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

我们经常看到使用了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.运行实例：

可以实现翻页效果。

二 添加标题
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.运行实例如下：

三 实现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.运行实例：

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

四 实现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();

}

}

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