android 引導界面的設計

jopen 11年前發布 | 32K 次閱讀 Android Android開發移動開發
    實現功能：左右手勢滑屏

    底部小圓點隨當前顯示頁跳動

    浮動按鈕顯示。當觸屏事件發生顯示，否則就漸漸消失

第一種： ViewFlipper + GestureDetector

第二種： ActivityGroup +   GestureDetector

第三種： ViewPager (Android3.0+)

第四種： ViewFlow (開源項目)

話不多說，先放上效果圖
向右滑動，或者點擊按鈕向右
實現左右滑屏是需要一個叫做ViewPager的東西。具體ViewPager怎么用我就不贅述了。（PS注意導入ViewPager的兼容包)

接下來是代碼：

首先在main.xml中聲明ViewPager：
   <LinearLayout

       android:id="@+id/linearLayout01"

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:orientation="vertical" >

    <android.support.v4.view.ViewPager

        android:id="@+id/guidePages"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"/>

</LinearLayout>  


<LinearLayout  
   android:id="@+id/linearLayout01"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content"  
   android:orientation="vertical" >  
<android.support.v4.view.ViewPager  
    android:id="@+id/guidePages"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"/>  

</LinearLayout>  </pre><br />

    和一個viewGroup放小圓點  



  
  <LinearLayout

        android:id="@+id/viewGroup"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_marginBottom="40dp"

        android:gravity="center_horizontal"

        android:orientation="horizontal" >

</LinearLayout>  </pre><br />



接著在item01.xml等幾個xml中放置要顯示的圖片,因為幾個都一樣，就不都貼上來了。





    <ImageView

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:background="@drawable/feature_guide_0" >

</ImageView> </pre><br />



接下來是核心代碼：



    public class GuideViewActivity extends Activity {

    private ViewPager viewPager;    
     private ArrayList<View> pageViews;    
     private ImageView imageView;    
     private ImageView[] imageViews;   
    // 包裹滑動圖片LinearLayout   
     private ViewGroup main;  
    // 包裹小圓點的LinearLayout   
     private ViewGroup group;  
     //左箭頭按鈕   
     private ImageView imageViewLeft;  
     //右箭頭按鈕   
     private ImageView imageViewRight;  
     //當前頁碼   
     private int currentIndex;  

     //ImageView的alpha值      
     private int mAlpha = 0;  
     private boolean isHide;  


    /** Called when the activity is first created. */  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  

        super.onCreate(savedInstanceState);  

        //將要顯示的圖片放到ArrayList當中，存到適配器中   
        LayoutInflater inflater = getLayoutInflater();    
        pageViews = new ArrayList<View>();    
        pageViews.add(inflater.inflate(R.layout.item01, null));  


public class GuideViewActivity extends Activity {  


    private ViewPager viewPager;    
     private ArrayList<View> pageViews;    
     private ImageView imageView;    
     private ImageView[] imageViews;   
    // 包裹滑動圖片LinearLayout  
     private ViewGroup main;  
    // 包裹小圓點的LinearLayout  
     private ViewGroup group;  
     //左箭頭按鈕  
     private ImageView imageViewLeft;  
     //右箭頭按鈕  
     private ImageView imageViewRight;  
     //當前頁碼  
     private int currentIndex;  

     //ImageView的alpha值     
     private int mAlpha = 0;  
     private boolean isHide;  


    /** Called when the activity is first created. */  
    @Override  
    public void onCreate(Bundle savedInstanceState) {  

        super.onCreate(savedInstanceState);  

        //將要顯示的圖片放到ArrayList當中，存到適配器中  
        LayoutInflater inflater = getLayoutInflater();    
        pageViews = new ArrayList<View>();    
        pageViews.add(inflater.inflate(R.layout.item01, null));  

       imageViews = new ImageView[pageViews.size()];    
       main = (ViewGroup)inflater.inflate(R.layout.main, null);    

       group = (ViewGroup)main.findViewById(R.id.viewGroup);    
       viewPager = (ViewPager)main.findViewById(R.id.guidePages);    
       imageViewLeft = (ImageView)main.findViewById(R.id.imageView1);  
       imageViewRight = (ImageView)main.findViewById(R.id.imageView2);  
       imageViewLeft.setAlpha(0);  
       imageViewRight.setAlpha(0);  

       //將小圓點放到imageView數組當中   
       for (int i = 0; i < pageViews.size(); i++) {    
           imageView = new ImageView(GuideViewActivity.this);    
           imageView.setLayoutParams(new LayoutParams(20,20));    
           imageView.setPadding(20, 0, 20, 0);    
           imageViews[i] = imageView;    

           if (i == 0) {    
            //默認選中第一張圖片   
               imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);    
           } else {    
               imageViews[i].setBackgroundResource(R.drawable.page_indicator);    
           }    

           group.addView(imageViews[i]);    
       }    

       setContentView(main);  

       viewPager.setAdapter(new GuidePageAdapter());    
       viewPager.setOnPageChangeListener(new GuidePageChangeListener());  
       imageViewLeft.setOnClickListener(new ButtonListener());  
       imageViewRight.setOnClickListener(new ButtonListener());  
   }  

   //左右切換屏幕的按鈕監聽器   
   class ButtonListener implements OnClickListener{  

    @Override  
    public void onClick(View v) {  
        // TODO Auto-generated method stub   
        int showNext=0;  
        if(v.getId() == R.id.imageView1) {  
            System.out.println("點擊了向左的按鈕");  
            if(currentIndex ==0 )  
                showNext = currentIndex;  
            else  
                showNext = currentIndex-1;  
            viewPager.setCurrentItem(showNext);  
        }  
        if(v.getId() == R.id.imageView2){  
            System.out.println("點擊了向右的按鈕");  
            if(currentIndex == imageViews.length)  
                showNext = currentIndex;  
            else  
                showNext = currentIndex+1;  
            viewPager.setCurrentItem(showNext);  
        }  
            System.out.println("當前頁碼："+showNext);  

    }  

   }  

   /**
    * 設置按鈕漸顯效果
    */  
   private Handler mHandler = new Handler()  
   {  
       public void handleMessage(Message msg) {  
           if(msg.what==1 && mAlpha<255){             
               //通過設置不透明度設置按鈕的漸顯效果   
               mAlpha += 50;  

               if(mAlpha>255)  
                   mAlpha=255;  

               imageViewLeft.setAlpha(mAlpha);  
               imageViewLeft.invalidate();  
               imageViewRight.setAlpha(mAlpha);  
               imageViewRight.invalidate();  

               if(!isHide && mAlpha<255)  
                   mHandler.sendEmptyMessageDelayed(1, 100);  
           }else if(msg.what==0 && mAlpha>0){  
               mAlpha -= 3;  

               if(mAlpha<0)  
                   mAlpha=0;  
               imageViewLeft.setAlpha(mAlpha);  
               imageViewLeft.invalidate();  
               imageViewRight.setAlpha(mAlpha);  
               imageViewRight.invalidate();  

               if(isHide && mAlpha>0)  
                   mHandler.sendEmptyMessageDelayed(0, 2);  
           }              
       }  
   };  

   private void showImageButtonView(){  
       isHide = false;  
       mHandler.sendEmptyMessage(1);  
   }  

   private void hideImageButtonView(){  
       new Thread(){  
           public void run() {  
               try {  
                   isHide = true;  
                   mHandler.sendEmptyMessage(0);  
               } catch (Exception e) {  
                   ;  
               }  
           }  
       }.start();  
   }  





@Override  
public boolean dispatchTouchEvent(MotionEvent ev) {  
    System.out.println("this is dispatch");  
    System.out.println("觸碰屏幕");  
       switch (ev.getAction()) {  
           case MotionEvent.ACTION_MOVE:  
           case MotionEvent.ACTION_DOWN:  
               showImageButtonView();              
               break;  
           case MotionEvent.ACTION_UP:  
               hideImageButtonView();                  
               break;  
       }  


    return super.dispatchTouchEvent(ev);  
}  

// 指引頁面數據適配器,實現適配器方法   
   class GuidePageAdapter extends PagerAdapter {    

       @Override    
       public int getCount() {    
           return pageViews.size();    
       }    

       @Override    
       public boolean isViewFromObject(View arg0, Object arg1) {    
           return arg0 == arg1;    
       }    

       @Override    
       public int getItemPosition(Object object) {    
           // TODO Auto-generated method stub     
           return super.getItemPosition(object);    
       }    

       @Override    
       public void destroyItem(View arg0, int arg1, Object arg2) {    
           // TODO Auto-generated method stub     
           ((ViewPager) arg0).removeView(pageViews.get(arg1));    
       }    

       @Override    
       public Object instantiateItem(View arg0, int arg1) {    
           // TODO Auto-generated method stub     
           ((ViewPager) arg0).addView(pageViews.get(arg1));    
           return pageViews.get(arg1);    
       }    

       @Override    
       public void restoreState(Parcelable arg0, ClassLoader arg1) {    
           // TODO Auto-generated method stub     

       }    

       @Override    
       public Parcelable saveState() {    
           // TODO Auto-generated method stub     
           return null;    
       }    

       @Override    
       public void startUpdate(View arg0) {    
           // TODO Auto-generated method stub     

       }    

       @Override    
       public void finishUpdate(View arg0) {    
           // TODO Auto-generated method stub     

       }    
   }   

// 指引頁面更改事件監聽器,左右滑動圖片時候，小圓點變換顯示當前圖片位置   
   class GuidePageChangeListener implements OnPageChangeListener {    

       @Override    
       public void onPageScrollStateChanged(int arg0) {    
           // TODO Auto-generated method stub     

       }    

       @Override    
       public void onPageScrolled(int arg0, float arg1, int arg2) {    
           // TODO Auto-generated method stub     

       }    

       @Override    
       public void onPageSelected(int arg0) {    
        currentIndex = arg0;  
           for (int i = 0; i < imageViews.length; i++) {    
               imageViews[arg0].setBackgroundResource(R.drawable.page_indicator_focused);  

               if (arg0 != i) {    
                   imageViews[i].setBackgroundResource(R.drawable.page_indicator);    
               }    
           }  
       }    
   }    </pre><br />
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
本文地址：http://www.baiduhome.net/lib/view/open1384348932383.html
Android Android開發移動開發
android 引導界面的設計

相關經驗

相關資訊

相關文檔

目錄
