ViewPager

吾生也有涯，而知也无涯。 —— 庄子

ViewPager 初体验

PagerAdapter 函数详解

关于key以及自定义key

PagerTabStrip 、PagerTitleStrip

ViewPager初体验

首先来实现一个ViewPager的简单demo，滑动进行页面的简单切换。

1、main.xml：主布局文件中引入viewPager控件，注意是v4包下的viewPager

[code]<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.view.viewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

</LinearLayout>

2、定义子页面的Xml布局文件，分别为view_1.xml,view_2.xml,view_3.xml

view_1.xml: 布局很简单，只是设置view的背景颜色，其他pager也是同样的。

[code]<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewOne"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f98f98"
    android:orientation="vertical" >

</LinearLayout>

view_2.xml: 同上

[code]<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewTwo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f18f18"
    android:orientation="vertical" >

</LinearLayout>

view_3.xml: 同上

[code]<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/viewThree"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#c18f58"
    android:orientation="vertical" >

</LinearLayout>

3、定义好每个view 的xml文件后，接下来如何在Activity 中操作呢？

[code]public class MainActivity extends Activity {

    private ViewPager viewPager; //定义viewPager
    private View view1,view2,view3; //定义viewPager的子view
    private List<View> mViews ; //views数组
    private LayoutInflater inflater;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        inflater = getLayoutInflater();
        view1 = inflater.inflate(R.layout.view_1, null);
        view2 = inflater.inflate(R.layout.view_2, null);
        view3 = inflater.inflate(R.layout.view_3, null);
        //将pager 装载到 view数组中
        mViews = new ArrayList<View>();
        mViews.add(view1);
        mViews.add(view2);
        mViews.add(view3);

        // PagerAdapter
        PagerAdapter adapter = new PagerAdapter() {

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }

            @Override
            public int getCount() {
                return mViews.size();
            }

            @Override
            public void destroyItem(ViewGroup container, int position,
                    Object object) {
                container.removeView(mViews.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(mViews.get(position));
                return mViews.get(position);
            }
        };
        //viewPager 设置适配器
        viewPager.setAdapter(adapter);
    }

}

PagerAdapter四大函数

[code]public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }

[code]public int getCount() {
                return mViews.size();
                //返回要滑动的view 的个数
            }

[code]public void destroyItem(ViewGroup container, int position,
                    Object object) {
                container.removeView(mViews.get(position));
                //从当前container中删除指定position的view
            }

[code]public Object instantiateItem(ViewGroup container, int position) {
                //向当前container中添加指定position的view
                container.addView(mViews.get(position));
                //返回当前view
                return mViews.get(position);
            }
            //注意：此方法中做了两件事{添加view，并返回添加的view}

关于key以及自定义key

key：在viewPager中，每个滑动的子页面都对应着一个key，而且这个key是唯一用来追踪这个子页面的。也就是说，每一个key都与一个子页面一一对应的。

那么在PagerAdapter中之前的两个方法中：

[code]public Object instantiateItem(ViewGroup container, int position) {
                //向当前container中添加指定position的view
                container.addView(mViews.get(position));
                //返回当前view
                return mViews.get(position);
            }
            //注意：此方法中做了两件事{添加view，并返回添加的view}

我们可以看出此方法中首先是将参数中指定position的view添加到container中供其创建并显示，然后返回当前position的view作为视图的key。在谷歌官方中有这样的说明：对于简单的PagerAdapter来说，你可以选择滑动的子页面作为key，在创建并添加到当前container后instantiateItem方法里返回该滑动页面的本身即可。destroyItem将会将该滑动页面从container中删除。isViewFromObject方法里直接返回view == object。

自定义key

[code]public Object instantiateItem(ViewGroup container, int position) {
                //向容器中添加当前view
                container.addView(mViews.get(position));
                //返回当前新增视图的position作为key
                return position;
            }

Key是作为返回值与当前装入Container中的视图对应起来的。所以在这里我们返回postion与container.addView(mViews.get(position));里的mViews.get(position)这个视图对应起来。

[code]public boolean isViewFromObject(View arg0, Object arg1) {
                //根据传递过来的key，找到view，判断arg0是否等于传递过来的view是不是同一个视图
                return arg0 == mViews.get(Integer.parseInt(arg1.toString()));
            }

判断从instantiateItem（）返回来的Key与当前的View是否能对应起来，我们知道从instantiateItem传过来的其实是position，所以我们要根据position找到View，然后跟参数中的View arg0判断。

PagerTabStrip和PagerTitleStrip添加标题栏区别

PagerTitleStrip

1、xml文件

[code]<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/pagertitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"/>

    </android.support.v4.view.ViewPager>

</LinearLayout>

可以看出：这里是将PagerTitleStrip作为ViewPager的子控件添加到xml文件中的。android:layout_gravity=”top”，通过该属性可以设置标题是在上方还是下方显示。

2、代码操作

在PagerAdapter中重写getPageTitle（）方法。

[code]public CharSequence getPageTitle(int position) {
                return tList.get(position);
                //返回标题
            }

[code]通过运行可以看出，滑动page是可以改变标题的，但是点击标题会发现是不可以触发page滑动的，那么使用PagerTabStrip来看看呢？PagerTabStrip是可以通过点击标题来触发page滑动的。

总结：

1、【了解】什么是ViewPager，与Fragment的区别。

2、【熟悉】了解如何使用viewpager：xml文件定义viewpager组件；java代码中操作viewpager；viewpager适配器PagerAdapter中方法的运用；

3、【了解】PagerTabStrip，PagerTitleStrip，自定义标题栏属性。

接下来要学会：

1、ViewPager自定义指示条。

2、Fragment+ViewPager嵌套使用。