Android UI学习笔记 之 使用ViewPager实现导航

ViewPager的用处就如上图所示（图源网络），当我们左右滑动屏幕时，会从一个页卡转到下一个页卡。

ViewPager中默认三个为一组的加载，例如，view1 view2 view3，当我们向左滑动时，view1会被销毁，

而view4(如果有的话)就会实例化加载进来，变成view2 view3 view4的样子。

使用ViewPager大致分为以下步骤：

①建立数据源List<View>或者List<Fragment>。

②将数据源绑定到适配器，不同的数据源有不同的适配器。

③再将适配器绑定到当前的ViewPager中，完成。

当填充的内容不同时，使用的适配器也不同。

PagerAdapter适配器对应的数据源是List<View>，能动态加载页卡，销毁页卡。

FragmentPagerAdapter适配器对应的数据源是List<Fragment>，不能动态加载页卡，销毁页卡，一次性全部导入。

FragmentStatePagerAdapter适配器对应的数据源是List<Fragment>，能动态加载页卡，销毁页卡。

①建立数据源List<View>或者List<Fragment>。

ViewPager中可以填充View和Fragment作为页卡。

我们这里以View为例，先新建一个简单的layout，里面只有一个TextView，用来显示第几个页卡。

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

然后在Activity中将这个layout转换为View对象，有两种方法，这里大致提一下。

//第一种方法
LayoutInflater lf = getLayoutInflater().from(this);//先获取LayoutInflater 对象
lf.inflate(resource, root);//再inflate获取view,resource表示layout的布局文件,root表示需要附加到resource资源文件的根控件

//第二种方法
View.inflate(context, resource, root);//context表示当前的上下文,resouce和root参照上面解释
//这里的root就是说要把layout转换得到的view加载到哪一个ViewGroup里面,我们这里不需要.所以设置为null

得到的view在添加到List集合里面，这样第一步建立数据源就完成了。

viewList = new ArrayList<View>();
for (int i = 0; i < 4; i++) {
View view = View.inflate(MainActivity.this, R.layout.view, null);
((TextView) view.findViewById(R.id.pageText)).setText("这是第" + i + "个View");
viewList.add(view);
}

②将数据源绑定到适配器，不同的数据源有不同的适配器。

我们需要自己来写一个适配器，因为之前用的是View来填充的，所以这里使用PagerAdapter。

public class MyViewPagerAdapter extends PagerAdapter {
List<View> viewList;//页卡的View集合
List<String> titleList;//页卡的标题集合

public MyViewPagerAdapter(List<View> viewList, List<String> titleList) {//自定义的构造方法
this.viewList = viewList;
this.titleList = titleList;
}
@Override
public int getCount() {
return viewList.size();//返回页卡数量
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;//这个view是否来自object的类型
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));//实例化一个页卡,左右滑动时调用
return viewList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));//销毁一个页卡,左右滑动时调用
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);//设置页卡的标题,如上图中的FragmentA,FragmentB,FragmentC
}
}

里面有一些常用的方法要重写。

getCount()返回的是页卡的数量，也就是你填充进去的View的数量，我们用集合的size()方法返回一个int。
isViewFromObject()判断的是view的类型，有时候我们要判断这个view是否为TextView或者Button之类的。
instantiateItem()这个方法的用法，就是当页面是view1 view2 view3时，向左滑动，出现view4的时候调用的，用来加载view4，形成view2 view3 view4。
destroyItem()和上一个方法同时调用，销毁view1，本质上就是从ViewGroup中删掉view1，加入view4。
getPageTitle()显示的是标题，如最上面图中的fragmengA，fragmengB，fragmengC。

我们写了个适配器之后，之后当然就是加载数据源了。

第二步的主要工作就是写适配器了。

myViewPagerAdapter = new MyViewPagerAdapter(viewList, titleList);//将List<View>传入,适配器中要写构造方法

③再将适配器绑定到当前的ViewPager中，完成。

先在Activity的XML布局文件中，加入ViewPager。

实现上图中的FragmentA,FragmentB,FragmentC的标题其实有两种方法，

使用PagerTabStrip或者PagerTitleStrip两种，注意只能取其中一种方法。

然后通过layout_gravity来布置，我们把tab放在顶部，title放在底部。

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<android.support.v4.view.PagerTabStrip
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="@color/yellow"  >
</android.support.v4.view.PagerTabStrip>
<android.support.v4.view.PagerTitleStrip
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="@color/blue"    >
</android.support.v4.view.PagerTitleStrip>
</android.support.v4.view.ViewPager>

会造成tab的失效（PagerTabStrip是PagerTitleStrip的子类，有兴趣的可以看下API）

然后绑定适配器，完成。

viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(myViewPagerAdapter);

附加：

④如果觉得样式很丑的话，我们可以自定义样式

建议还是实际写一下代码，增加印象。

//在pagerTabStrip中有以下方法
pagerTabStrip.setBackgroundColor(int color);//导航栏的背景色
pagerTabStrip.setTextColor(int color);//导航栏的文字色
pagerTabStrip.setDrawFullUnderline(boolean drawFull);//导航栏底线是否显示
pagerTabStrip.setTabIndicatorColor(int color);//当前页卡的选中的线的颜色

⑤如果不是用View，而是用Fragment填充呢

通过查阅API，我们可以知道FragmentPagerAdapter和FragmentStatePagerAdapter是兄弟关系，都是直接继承自PagerAdapter。

两者的区别在于FragmentPagerAdapter不能动态加载页卡，是一次性导入所有页卡，而FragmentStatePagerAdapter是和PagerAdapter一样动态加载页卡的。

和View一样，我们为FragmentPagerAdapter适配器添加数据源List<Fragment>，然后重写FragmentPagerAdapter中的方法（继承自PagerAdapter）。

注意FragmentPagerAdapter是一次性加载所有页卡，所以不用重写instantiateItem()和destroyItem()（这两个方法在FragmentStatePagerAdapter要重写）。

值得注意的是我们需要import android.support.v4.app.Fragment;而不是import android.app.Fragment。

并且，我们的Activity要继承自FragmentActivity，

并且在new对象的时候，要在Activity中用getSupportFragmentManager()获取FragmentManager对象。

public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragmentList, List<String> titleList) {
super(fm);
this.fragmentList = fragmentList;
this.titleList = titleList;
}

⑥最后，我们再添加一个监听器

public class MainActivity extends FragmentActivity implements ViewPager.OnPageChangeListener{
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
System.out.println("当前是第"+position+"个页卡" +
",当前页面偏移的百分比:"+positionOffset+
",当前页面偏移的像素位置:"+positionOffsetPixels);
//当页卡滚动时调用该方法
}

@Override
public void onPageSelected(int position) {
Toast.makeText(MainActivity.this, "当前是第"+position+"个页卡", Toast.LENGTH_SHORT).show();
//当页卡改变时调用该方法
}

@Override
public void onPageScrollStateChanged(int state) {
switch (state) {
case 0: Toast.makeText(MainActivity.this, "滑动完毕", Toast.LENGTH_SHORT).show();break;
case 1: Toast.makeText(MainActivity.this, "手指按下", Toast.LENGTH_SHORT).show();break;
case 2: Toast.makeText(MainActivity.this, "手指抬起", Toast.LENGTH_SHORT).show();break;
}
//当滑动状态改变时调用该方法
}

以下附上以View填充的ViewPager的Demo源码。

public class MainActivity extends Activity implements ViewPager.OnPageChangeListener{
List<View> viewList;//填充View数据源
List<String> titleList;//View的标题集合
MyViewPagerAdapter myViewPagerAdapter;//自定义的以View为数据源的适配器
PagerTabStrip pagerTabStrip;//导航栏
ViewPager viewPager;//被填充的组件
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

viewList = new ArrayList<View>();
titleList = new ArrayList<String>();
View[] views = new View[4];
for (int i = 0; i < 4; i++) {
views[i] = View.inflate(MainActivity.this, R.layout.view, null);//将view.xml转化为View对象
((TextView) views[i].findViewById(R.id.pageText)).setText("这是第" + i + "个View");
titleList.add("第" + i + "页");//添加标题到集合
viewList.add(views[i]);//添加view到集合
}

pagerTabStrip = (PagerTabStrip) findViewById(R.id.tab);//自定义导航栏样式
pagerTabStrip.setBackgroundColor(Color.YELLOW);//导航栏背景色
pagerTabStrip.setTextColor(Color.BLUE);//导航栏文字色
pagerTabStrip.setDrawFullUnderline(false);//导航栏底线是否显示
pagerTabStrip.setTabIndicatorColor(Color.RED);//导航栏选中的当前页卡的底线颜色

myViewPagerAdapter = new MyViewPagerAdapter(viewList, titleList);
viewPager = (ViewPager) findViewById(R.id.viewPager);
viewPager.setAdapter(myViewPagerAdapter);//添加适配器到ViewPager
viewPager.setOnPageChangeListener(this);//设置监听器
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
System.out.println("当前是第"+position+"个页卡" +
",当前页面偏移的百分比:"+positionOffset+
",当前页面偏移的像素位置:"+positionOffsetPixels);
//当页卡滚动时调用该方法
}
@Override
public void onPageSelected(int position) {
Toast.makeText(MainActivity.this, "当前是第"+position+"个页卡", Toast.LENGTH_SHORT).show();
//当页卡改变时调用该方法
}
@Override
public void onPageScrollStateChanged(int state) {
switch (state) {
case 0: Toast.makeText(MainActivity.this, "滑动完毕", Toast.LENGTH_SHORT).show();break;
case 1: Toast.makeText(MainActivity.this, "手指按下", Toast.LENGTH_SHORT).show();break;
case 2: Toast.makeText(MainActivity.this, "手指抬起", Toast.LENGTH_SHORT).show();break;
}
//当滑动状态改变时调用该方法
}
}

public class MyViewPagerAdapter extends PagerAdapter {
List<View> viewList;
List<String> titleList;
public MyViewPagerAdapter(List<View> viewList, List<String> titleList) {
this.viewList = viewList;
this.titleList = titleList;
}

@Override
public int getCount() {
return viewList.size();//返回页卡数量
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;//这个view是否来自object的类型
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));//实例化一个页卡
return viewList.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));//销毁一个页卡
}
@Override
public CharSequence getPageTitle(int position) {
return titleList.get(position);//设置页卡的标题
}
}

<!--主Activity的XML布局-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:orientation="vertical">

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<android.support.v4.view.PagerTabStrip
android:id="@+id/tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="@color/yellow"
>
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>

<!--加载的View的布局-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/pageText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>