Android中如何使用ViewPager實現相似laucher左右拖動效果

如今不少Android應用在首次安裝完都會有指引如何使用該應用的某些功能的指引界面，這樣會得到很好的用戶體驗，可以幫助用戶更好使用應用的某些功能。其實該功能和Android主界面的 luncher 的功能徹底同樣的效果，能夠實現左右拖動。java

下面結合 ViewPager 的實例來展現如何實現該功能，先看下該Demo的結構圖：android

注：ViewPager類是實現左右兩個屏幕平滑地切換的一個類，是由Google 提供的，使用ViewPager首先須要引入android-support-v4.jar這個jar包。其中工程項目中的 libs 文件夾下存放着 android-support-v4.jar這個jar包。drawable文件夾下包含有圖片資源文件。web

如下是工程中各個文件的源碼：app

main.xml源碼：ide

 
      01 
      <?xml version="1.0" encoding="utf-8"?> 
     
      02 
      <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     
      03 
          android:layout_width="fill_parent" 
     
      04 
          android:layout_height="fill_parent" 
     
      05 
          android:orientation="vertical" > 
     
      06 
        
      07 
          <android.support.v4.view.ViewPager 
     
      08 
              android:id="@+id/guidePages" 
     
      09 
              android:layout_width="fill_parent" 
     
      10 
              android:layout_height="wrap_content"/> 
     
      11 
               
      12 
          <RelativeLayout  
     
      13 
              android:layout_width="fill_parent"  
     
      14 
              android:layout_height="wrap_content"  
     
      15 
              android:orientation="vertical" > 
     
      16 
          <LinearLayout  
     
      17 
              android:id="@+id/viewGroup"  
     
      18 
              android:layout_width="fill_parent"  
     
      19 
              android:layout_height="wrap_content"  
     
      20 
              android:layout_alignParentBottom="true"  
     
      21 
              android:layout_marginBottom="30dp"  
     
      22 
              android:gravity="center_horizontal"  
     
      23 
              android:orientation="horizontal">  
     
      24 
          </LinearLayout>  
     
      25 
          </RelativeLayout> 
     
      26 
        
      27 
      </FrameLayout>

item01.xml源碼：佈局

 
      01 
      <?xml version="1.0" encoding="utf-8"?> 
     
      02 
      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     
      03 
          android:layout_width="fill_parent" 
     
      04 
          android:layout_height="fill_parent" 
     
      05 
          android:orientation="vertical" > 
     
      06 
            
      07 
          <ImageView  
     
      08 
              android:layout_width="fill_parent"  
     
      09 
              android:layout_height="fill_parent"  
     
      10 
              android:background="@drawable/feature_guide_0">  
     
      11 
          </ImageView> 
     
      12 
            
      13 
      </LinearLayout>

其中item02.xml,item03.xml,item04.xml佈局文件的源碼和item01.xml佈局文件同樣，只是 ImageView 中的 android:background 屬性的背景圖片不一樣而已。ui

GuideViewDemoActivity.java 源碼：this

 
      001 
      package com.andyidea.guidedemo; 
     
      002 
        
      003 
      import java.util.ArrayList; 
     
      004 
        
      005 
      import android.app.Activity; 
     
      006 
      import android.os.Bundle; 
     
      007 
      import android.os.Parcelable; 
     
      008 
      import android.support.v4.view.PagerAdapter; 
     
      009 
      import android.support.v4.view.ViewPager; 
     
      010 
      import android.support.v4.view.ViewPager.OnPageChangeListener; 
     
      011 
      import android.view.LayoutInflater; 
     
      012 
      import android.view.View; 
     
      013 
      import android.view.ViewGroup; 
     
      014 
      import android.view.ViewGroup.LayoutParams; 
     
      015 
      import android.view.Window; 
     
      016 
      import android.widget.ImageView; 
     
      017 
        
      018 
      public class GuideViewDemoActivity extends Activity { 
     
      019 
            
      020 
          privateViewPager viewPager;  
     
      021 
          privateArrayList<View> pageViews;  
     
      022 
          privateViewGroup main, group;  
     
      023 
          privateImageView imageView;  
     
      024 
          privateImageView[] imageViews; 
     
      025 
            
      026 
          /** Called when the activity is first created. */ 
     
      027 
          @Override 
     
      028 
          public void onCreate(Bundle savedInstanceState) { 
     
      029 
              super.onCreate(savedInstanceState); 
     
      030 
              this.requestWindowFeature(Window.FEATURE_NO_TITLE); 
     
      031 
                
      032 
              LayoutInflater inflater = getLayoutInflater();  
     
      033 
              pageViews = newArrayList<View>();  
     
      034 
              pageViews.add(inflater.inflate(R.layout.item01, null));  
     
      035 
              pageViews.add(inflater.inflate(R.layout.item02, null));  
     
      036 
              pageViews.add(inflater.inflate(R.layout.item03, null));  
     
      037 
              pageViews.add(inflater.inflate(R.layout.item04, null));   
     
      038 
          
      039 
              imageViews = newImageView[pageViews.size()];  
     
      040 
              main = (ViewGroup)inflater.inflate(R.layout.main, null);  
     
      041 
                
      042 
              // group是R.layou.main中的負責包裹小圓點的LinearLayout.  
     
      043 
              group = (ViewGroup)main.findViewById(R.id.viewGroup);  
     
      044 
          
      045 
              viewPager = (ViewPager)main.findViewById(R.id.guidePages);  
     
      046 
          
      047 
              for (inti = 0; i < pageViews.size(); i++) {  
     
      048 
                  imageView = newImageView(GuideViewDemoActivity.this);  
     
      049 
                  imageView.setLayoutParams(newLayoutParams(20,20));  
     
      050 
                  imageView.setPadding(20, 0, 20, 0);  
     
      051 
                  imageViews[i] = imageView;  
     
      052 
                  if(i == 0) {  
     
      053 
                      //默認選中第一張圖片 
     
      054 
                      imageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);  
     
      055 
                  } else{  
     
      056 
                      imageViews[i].setBackgroundResource(R.drawable.page_indicator);  
     
      057 
                  }  
     
      058 
                  group.addView(imageViews[i]);  
     
      059 
              }  
     
      060 
          
      061 
              setContentView(main);  
     
      062 
          
      063 
              viewPager.setAdapter(newGuidePageAdapter());  
     
      064 
              viewPager.setOnPageChangeListener(newGuidePageChangeListener());  
     
      065 
          } 
     
      066 
            
      067 
          /** 指引頁面Adapter */ 
     
      068 
          class GuidePageAdapter extendsPagerAdapter {  
     
      069 
                  
      070 
              @Override  
     
      071 
              public intgetCount() {  
     
      072 
                  returnpageViews.size();  
     
      073 
              }  
     
      074 
          
      075 
              @Override  
     
      076 
              public booleanisViewFromObject(View arg0, Object arg1) {  
     
      077 
                  returnarg0 == arg1;  
     
      078 
              }  
     
      079 
          
      080 
              @Override  
     
      081 
              public intgetItemPosition(Object object) {  
     
      082 
                  // TODO Auto-generated method stub  
     
      083 
                  returnsuper.getItemPosition(object);  
     
      084 
              }  
     
      085