Android使用ViewPager實現類似laucher左右拖動效果

2019-10-22 18:12:03

字體：大中小

來源：轉載

供稿：網友

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

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

Android,ViewPager,laucher,拖動

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

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

main.xml源碼：

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:orientation="vertical" >   <android.support.v4.view.ViewPager  android:id="@+id/guidePages"  android:layout_width="fill_parent"  android:layout_height="wrap_content"/>    <RelativeLayout  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:orientation="vertical" >  <LinearLayout  android:id="@+id/viewGroup"  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:layout_alignParentBottom="true"  android:layout_marginBottom="30dp"  android:gravity="center_horizontal"  android:orientation="horizontal" >  </LinearLayout>  </RelativeLayout>  </FrameLayout>

item01.xml源碼：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:orientation="vertical" >   <ImageView  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:background="@drawable/feature_guide_0" >  </ImageView>  </LinearLayout>

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

GuideViewDemoActivity.java 源碼：

package com.andyidea.guidedemo;  import java.util.ArrayList;  import android.app.Activity; import android.os.Bundle; import android.os.Parcelable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.view.ViewGroup.LayoutParams; import android.view.Window; import android.widget.ImageView;  public class GuideViewDemoActivity extends Activity {   private ViewPager viewPager;  private ArrayList<View> pageViews;  private ViewGroup main, group;  private ImageView imageView;  private ImageView[] imageViews;   /** Called when the activity is first created. */  @Override  public void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  this.requestWindowFeature(Window.FEATURE_NO_TITLE);    LayoutInflater inflater = getLayoutInflater();  pageViews = new ArrayList<View>();  pageViews.add(inflater.inflate(R.layout.item01, null));  pageViews.add(inflater.inflate(R.layout.item02, null));  pageViews.add(inflater.inflate(R.layout.item03, null));  pageViews.add(inflater.inflate(R.layout.item04, null));   imageViews = new ImageView[pageViews.size()];  main = (ViewGroup)inflater.inflate(R.layout.main, null);    // group是R.layou.main中的負責包裹小圓點的LinearLayout.  group = (ViewGroup)main.findViewById(R.id.viewGroup);   viewPager = (ViewPager)main.findViewById(R.id.guidePages);   for (int i = 0; i < pageViews.size(); i++) {   imageView = new ImageView(GuideViewDemoActivity.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());  }   /** 指引頁面Adapter */  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) {   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);   }   }   }   }  }

運行上面的程序，效果截圖如下：

Android,ViewPager,laucher,拖動