实例讲解Android中ViewPager组件的一些进阶使用技巧

2020-01-02 06:58:48

字体：大中小

来源：转载

供稿：网友

我们经常看到使用了ViewPager的App，在每页上面都会有一个滑块来标志当前处于哪一页。在PagerView包里有android.support.v4.view.PagerTitleStrip和android.support.v4.view.PagerTabStrip两个组件，可以在布局文件中，作为ViewPager的子标签，并设定相对与ViewPager的位置(比如顶部)。但这两个组件都很丑，并且标题会随着页面一起滑动，所以一般都不用。

其实实现一个滑块标志当前页面也很简单，大概需要两步：

第一步在布局文件ViewPager的上方放置一个ImageView组件，组件可以是图片或是shape资源。注意需要把ImageView的scaleType属性设为matrix，就是说该组件的位置和大小由一个变换矩阵来控制；

第二步在Activity中为ViewPager组件添加OnPageChangeListener监听器。在OnPageChangeListener里设定matrix，用于控制指示滑块ImageView的位置。该监听器需要实现三个方法：

onPageScrollStateChanged：用于监听滑动状态的改变

onPageScrolled：用于监听滑动的动作

onPageSeleted:用于监听页面的切换，即某个页面被选中了作为当前页面。

一般实现onPageSelected方法就可以，其他两个方法可以空着。另外为了使页面切换时滑块也是平滑地滑动，可以给滑块的ImageView指定一个TranslateAnimation动画，指定动画用setAnimation，TranlateAnimation也很简单，有个构造函数是TranslateAnimation(int beginX,int endX,int beginY,int endY)，将运动矢量的起始位置和终止位置传给它就好了。

下面我们来看五个具体的例子：

一实现ViewPager（数据源为List<View>）

1.先在main.xml文件中添加一个ViewPager:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="match_parent"   android:layout_height="match_parent" >    <android.support.v4.view.ViewPager     android:id="@+id/pager"     android:layout_width="wrap_content"     android:layout_height="wrap_content">   </android.support.v4.view.ViewPager>  </LinearLayout>

2.创建三个View:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:orientation="vertical" >    <TextView     android:id="@+id/txt1"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravity="center"     android:textSize="25dp"     android:text="第一页" >   </TextView>  </LinearLayout>

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:orientation="vertical" >    <TextView     android:id="@+id/txt2"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="第二页" >   </TextView>    </LinearLayout>

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical" >    <TextView    android:id="@+id/txt3"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="第三页" >  </TextView>  </LinearLayout>

3.创建一个ViewPager适配器类：

package com.yayun.viewpagerdemo;  import java.util.ArrayList; import java.util.List;  import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup;  public class ViewPagerAdapter extends PagerAdapter {   private List<View> lViews=new ArrayList<View>();      public ViewPagerAdapter(List<View> lViews){     this.lViews=lViews;   }    @Override   public int getCount() {     return lViews.size();   }    @Override   public boolean isViewFromObject(View arg0, Object arg1) {     return arg0==arg1;   }   @Override   public Object instantiateItem(ViewGroup container, int position) {     container.addView(lViews.get(position));     return lViews.get(position);   }   @Override   public void destroyItem(ViewGroup container, int position, Object object) {     container.removeView(lViews.get(position));   }  }

4.MainActivity.java:

package com.yayun.viewpagerdemo;  import java.util.ArrayList; import java.util.List;  import android.support.v7.app.ActionBarActivity; import android.support.v7.app.ActionBar; import android.support.v4.app.Fragment; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.os.Build;  public class MainActivity extends ActionBarActivity {   private ViewPager viewPager;   private List<View> listViews=null;   ViewPagerAdapter pagerAdapter;    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     requestWindowFeature(Window.FEATURE_NO_TITLE);     setContentView(R.layout.activity_main);          viewPager=(ViewPager) findViewById(R.id.pager);     listViews=new ArrayList<View>();     /**      * 为Adapter创建数据源      */     View view1=View.inflate(this, R.layout.view1, null);     View view2=View.inflate(this, R.layout.view2, null);     View view3=View.inflate(this, R.layout.view3, null);     listViews.add(view1);     listViews.add(view2);     listViews.add(view3);     pagerAdapter=new ViewPagerAdapter(listViews) ;     viewPager.setAdapter(pagerAdapter);    }  }

5.运行实例：

2016323152038108.jpg (707×476)
可以实现翻页效果。

二添加标题
1.我们需要更改main.xml文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="match_parent"   android:layout_height="match_parent" >    <android.support.v4.view.ViewPager     android:id="@+id/pager"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravity="center" >      <android.support.v4.view.PagerTabStrip       android:id="@+id/strip"       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:layout_gravity="top" >     </android.support.v4.view.PagerTabStrip>   </android.support.v4.view.ViewPager>  </LinearLayout>

2.需要更改适配器文件：

package com.yayun.viewpagerdemo;  import java.util.ArrayList; import java.util.List;  import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup;  public class ViewPagerAdapter extends PagerAdapter {   private List<View> lViews=new ArrayList<View>();   private List<String> titleList=new ArrayList<String>();      public ViewPagerAdapter(List<View> lViews,List<String> titleList){     this.lViews=lViews;     this.titleList=titleList;   }    @Override   public int getCount() {     return lViews.size();   }    @Override   public boolean isViewFromObject(View arg0, Object arg1) {     return arg0==arg1;   }   @Override   public Object instantiateItem(ViewGroup container, int position) {     container.addView(lViews.get(position));     return lViews.get(position);   }   @Override   public void destroyItem(ViewGroup container, int position, Object object) {     container.removeView(lViews.get(position));   }   /**    * 标题    */   @Override   public CharSequence getPageTitle(int position) {     // TODO Auto-generated method stub     return titleList.get(position);   }  }

3.需要更改MainActivity.java文件：

package com.yayun.viewpagerdemo;  import java.util.ArrayList; import java.util.List;  import android.support.v7.app.ActionBarActivity; import android.support.v7.app.ActionBar; import android.support.v4.app.Fragment; import android.support.v4.view.PagerAdapter; import android.support.v4.view.PagerTabStrip; import android.support.v4.view.ViewPager; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.os.Build;  public class MainActivity extends ActionBarActivity {   private ViewPager viewPager;   private List<View> listViews=null;   ViewPagerAdapter pagerAdapter;   PagerTabStrip pagerTabStrip;   private List<String> titleList;    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     requestWindowFeature(Window.FEATURE_NO_TITLE);     setContentView(R.layout.activity_main);          viewPager=(ViewPager) findViewById(R.id.pager);     pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);     listViews=new ArrayList<View>();     titleList=new ArrayList<String>();     titleList.add("第一页");     titleList.add("第二页");     titleList.add("第三页");     /**      * 为Adapter创建数据源      */     View view1=View.inflate(this, R.layout.view1, null);     View view2=View.inflate(this, R.layout.view2, null);     View view3=View.inflate(this, R.layout.view3, null);     listViews.add(view1);     listViews.add(view2);     listViews.add(view3);     pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;     viewPager.setAdapter(pagerAdapter);    }  }

4.运行实例如下：

2016323152232160.jpg (706×473)

三实现ViewPager(数据源为List<Fragment>)
1.首先我们要创建三个Fragment:

package com.yayun.viewpagerdemo;  import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  public class Fragment1 extends Fragment {   @Override   public View onCreateView(LayoutInflater inflater, ViewGroup container,       Bundle savedInstanceState) {     return inflater.inflate(R.layout.view1, container, false);   }  } package com.yayun.viewpagerdemo;  import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  public class Fragment2 extends Fragment {   @Override   public View onCreateView(LayoutInflater inflater, ViewGroup container,       Bundle savedInstanceState) {     return inflater.inflate(R.layout.view2, container, false);   }  } package com.yayun.viewpagerdemo;  import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup;  public class Fragment3 extends Fragment {   @Override   public View onCreateView(LayoutInflater inflater, ViewGroup container,       Bundle savedInstanceState) {     return inflater.inflate(R.layout.view3, container, false);   }  }

2.设置Adapter:

package com.yayun.viewpagerdemo;  import java.util.List;  import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter;  public class MyFragmentPagerAdapter extends FragmentPagerAdapter {   List<Fragment> fragmentsList;   List<String> titleList;    public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {     super(fm);     this.fragmentsList=fragmentsList;     this.titleList=titleList;   }    @Override   public Fragment getItem(int arg0) {     // TODO Auto-generated method stub     return fragmentsList.get(arg0);   }    @Override   public int getCount() {     // TODO Auto-generated method stub     return fragmentsList.size();   } @Override /**  * 添加标题  */ public CharSequence getPageTitle(int position) {   // TODO Auto-generated method stub   return titleList.get(position); }  }

3.MainActivity.java:

package com.yayun.viewpagerdemo;  import java.util.ArrayList; import java.util.List;  import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.view.PagerTabStrip; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.PageTransformer; import android.support.v7.app.ActionBarActivity; import android.view.View; import android.view.Window;  public class MainActivity extends ActionBarActivity {   private ViewPager viewPager;   private List<View> listViews=null;   ViewPagerAdapter pagerAdapter;   PagerTabStrip pagerTabStrip;   private List<String> titleList;   private List<Fragment> fragmentsList;   MyFragmentPagerAdapter myFragmentPagerAdapter;    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     requestWindowFeature(Window.FEATURE_NO_TITLE);     setContentView(R.layout.activity_main);          viewPager=(ViewPager) findViewById(R.id.pager);     pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);          /**      * 设置PagerTabStrip属性      */     pagerTabStrip.setBackgroundColor(Color.GREEN);     pagerTabStrip.setDrawFullUnderline(false);     pagerTabStrip.setTextColor(Color.WHITE);     listViews=new ArrayList<View>();     titleList=new ArrayList<String>();     fragmentsList=new ArrayList<Fragment>();     fragmentsList.add(new Fragment1());     fragmentsList.add(new Fragment2());     fragmentsList.add(new Fragment3());     titleList.add("第一页");     titleList.add("第二页");     titleList.add("第三页");     /**      * 为Adapter创建数据源      */     View view1=View.inflate(this, R.layout.view1, null);     View view2=View.inflate(this, R.layout.view2, null);     View view3=View.inflate(this, R.layout.view3, null);     listViews.add(view1);     listViews.add(view2);     listViews.add(view3);     pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;     myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);     //viewPager.setAdapter(pagerAdapter);     viewPager.setAdapter(myFragmentPagerAdapter);    }  }

4.运行实例：

2016323152451926.jpg (708×471)

这种方法不会销毁不在当前页面的页面，不能实现页卡的创建和销毁。

四实现ViewPager(数据源为List<Fragment>实现FargmentStatePagerAdapter)常用
改变Adapter:

package com.yayun.viewpagerdemo;  import java.util.List;  import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.app.FragmentStatePagerAdapter; import android.view.View;  public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter {   List<Fragment> fragmentsList;   List<String> titleList;    public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {     super(fm);     this.fragmentsList=fragmentsList;     this.titleList=titleList;   }    @Override   public Fragment getItem(int arg0) {     // TODO Auto-generated method stub     return fragmentsList.get(arg0);   }    @Override   public int getCount() {     // TODO Auto-generated method stub     return fragmentsList.size();   } @Override /**  * 添加标题  */ public CharSequence getPageTitle(int position) {   // TODO Auto-generated method stub   return titleList.get(position); } @Override public Object instantiateItem(View container, int position) {   // TODO Auto-generated method stub   return super.instantiateItem(container, position); } @Override public void destroyItem(View container, int position, Object object) {   // TODO Auto-generated method stub   super.destroyItem(container, position, object); }  }

将MainActivity.java中的Adapter换一下即可，它可以实现页卡的创建和销毁。

五 onPagerChangeListener 监听使用
只需要修改MainActivity.java:

package com.yayun.viewpagerdemo;  import java.util.ArrayList; import java.util.List;  import android.graphics.Color; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.view.PagerTabStrip; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.support.v4.view.ViewPager.PageTransformer; import android.support.v7.app.ActionBarActivity; import android.view.View; import android.view.Window; import android.widget.Toast;  public class MainActivity extends ActionBarActivity implements OnPageChangeListener {   private ViewPager viewPager;   private List<View> listViews=null;   ViewPagerAdapter pagerAdapter;   PagerTabStrip pagerTabStrip;   private List<String> titleList;   private List<Fragment> fragmentsList;   MyFragmentPagerAdapter myFragmentPagerAdapter;    @Override   protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     requestWindowFeature(Window.FEATURE_NO_TITLE);     setContentView(R.layout.activity_main);          viewPager=(ViewPager) findViewById(R.id.pager);     pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);          /**      * 设置PagerTabStrip属性      */     pagerTabStrip.setBackgroundColor(Color.GREEN);     pagerTabStrip.setDrawFullUnderline(false);     pagerTabStrip.setTextColor(Color.WHITE);     listViews=new ArrayList<View>();     titleList=new ArrayList<String>();     fragmentsList=new ArrayList<Fragment>();     fragmentsList.add(new Fragment1());     fragmentsList.add(new Fragment2());     fragmentsList.add(new Fragment3());     titleList.add("第一页");     titleList.add("第二页");     titleList.add("第三页");     /**      * 为Adapter创建数据源      */     View view1=View.inflate(this, R.layout.view1, null);     View view2=View.inflate(this, R.layout.view2, null);     View view3=View.inflate(this, R.layout.view3, null);     listViews.add(view1);     listViews.add(view2);     listViews.add(view3);     pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;     myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);     //viewPager.setAdapter(pagerAdapter);     viewPager.setAdapter(myFragmentPagerAdapter);     viewPager.setOnPageChangeListener(this);//加载监听器    }    @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) {     Toast.makeText(this, "当前页面为"+(arg0+1), Toast.LENGTH_SHORT).show();        }  }

运行实例即可以显示当前页面标签。

上一篇：Android ListView常用小技巧汇总

下一篇：Android中ViewPager组件的基本用法及实现图片切换的示例