ViewPager详解

一、ViewPager简介

ViewPager 如其名所述，是负责翻页的一个 View。准确说是一个 ViewGrop，包含多个 View 页，在手指横向滑动屏幕时，其负责对 View 进行切换。为了生成这些 View 页，需要提供一个 PagerAdapter 来进行和数据绑定以及生成最终的 View 页。

二、实现三个view间的相互滑动

本例创建三个view，实现相互滑动，三个view分别为：one.xml、two.xml、three.xml。

三、新建项目，引入ViewPager控件

ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。

1.在主布局文件里加入

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</RelativeLayout>

其中 <Android.support.v4.view.ViewPager /> 是ViewPager对应的组件，要将其放到想要滑动的位置。

2、新建三个layout，用于滑动切换的视图

我们的三个视图都非常简单，里面只添加了textView视图，当然大家可以往里添加各种控件，这里只是个DEMO，所以我这里仅仅使用textView区别不同layout布局。

布局代码分别如下：

one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="one"/>

</LinearLayout>

two.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="two"/>

</LinearLayout>

three.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="three"/>

</LinearLayout>

四、代码实战

1.主活动：

public class MainActivity extends AppCompatActivity {
    private ViewPager mViewPager;//对应的viewPager
    private List<Fragment> mFragments;//view数组

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        OneFragment oneFragment = new OneFragment();
        TwoFragment twoFragment = new TwoFragment();
        ThreeFragment threeFragment = new ThreeFragment();
        mFragments = new ArrayList<>();
        mFragments.add(oneFragment);
        mFragments.add(twoFragment);
        mFragments.add(threeFragment);

        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        mViewPager.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

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

设置mFragments = new ArrayList<>()，是要分页显示的View装入数组中 。

 mFragments.add()方法是将实例化的三个view添加到list中。

 

ViewPager 通过 setAdapter() 来建立与 PagerAdapter 的联系。

PageAdapter 是 ViewPager 的支持者，ViewPager 将调用它来取得所需显示的页，而 PageAdapter 也会在数据变化时，通知 ViewPager。这个类也是FragmentPagerAdapter 以及 FragmentStatePagerAdapter 的基类。如果使用FragmentStatePagerAdapter类需要实现 getItem()和getCount() 方法。

如果使用PageAdapter至少需要实现 instantiateItem(), destroyItem(), getCount() 以及 isViewFromObject()四个方法。

2.加载one.xml视图的fragment（OneFragment）：

public class OneFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.one,container,false);
    }
}

3.加载two.xml视图的fragment（TwoFragment）：

public class TwoFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.two,container,false);
    }
}

4.加载three.xml视图的fragment(ThreeFragment)：

public class ThreeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.three,container,false);
    }
}