UI控件--ViewPager详解（1）

一、首先在总布局文件中引入ViewPager控件

<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"
    tools:context="com.lingzhuo.testviewpager.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>

二、新建三个布局界面，用于滑动切换的视图

• layout_pager1.xml

<?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:background="@color/colorAccent"
    android:orientation="vertical">

</LinearLayout>

• layout_pager2.xml

<?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:background="@color/colorPrimary"
    android:orientation="vertical">

</LinearLayout>

• layout_pager3.xml

<?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:background="@color/colorPrimaryDark"
    android:orientation="vertical">

</LinearLayout>

代码中逻辑的实现

• 总体代码如下

public class MainActivity extends AppCompatActivity {
    private List<View> list=new ArrayList<>();
    private ViewPager viewPager;
    private View view1,view2,view3;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        LayoutInflater inflater=getLayoutInflater();
        view1=inflater.inflate(R.layout.layout_pager1,null);
        view2=inflater.inflate(R.layout.layout_pager2,null);
        view3=inflater.inflate(R.layout.layout_pager3,null);
        //将三个页面分别加入list中
        list.add(view1);
        list.add(view2);
        list.add(view3);
        PagerAdapter pagerAdapter=new PagerAdapter() {
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(list.get(position));
                return list.get(position);
            }

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

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

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }
        };
        viewPager.setAdapter(pagerAdapter);

    }

    private void init() {
        viewPager= (ViewPager) findViewById(R.id.viewPager);
    }
}

• 变量声明阶段
• 声明一个list用于存放三个滑动的界面
• view1，view2，view3是三个界面
• viewPager同时声明

    private List<View> list=new ArrayList<>();
    private ViewPager viewPager;
    private View view1,view2,view3;

• 而后在代码中进行各个变量的实例化
• 同时将三个页面实例添加到list中

        LayoutInflater inflater=getLayoutInflater();
        view1=inflater.inflate(R.layout.layout_pager1,null);
        view2=inflater.inflate(R.layout.layout_pager2,null);
        view3=inflater.inflate(R.layout.layout_pager3,null);
        list.add(view1);
        list.add(view2);
        list.add(view3);

• PageAdapter——PageView的适配器
• 在PageAdapter中必须重写的方法有四个
• PageAdapter 必须重写的四个函数：
• • boolean isViewFromObject(View arg0, Object arg1)
• • int getCount()
• • void destroyItem(ViewGroup container, int position,Object object)
• • Object instantiateItem(ViewGroup container, int position)

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

• getCount():返回要滑动的VIew的个数

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

• destroyItem（）：从当前container中删除指定位置（position）的View;

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(list.get(position));
                return list.get(position);
            }

• instantiateItem()：做了两件事，第一：将当前视图添加到container中，第二：返回当前View

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }

• isViewFromObject():对于这个函数就先不做讲解，大家目前先知道它要这样重写就行了，后面我们会对它进行改写。

• 效果示意图