一起学Android之ViewPager

本文以一个简单的小例子，简述在Android开发中ViewPager的常见用法，仅供学习分享使用。

概述

ViewPager是一个支持使用者左右滑动的布局管理控件，可以通过一个实现的（适配器）PageAdapter来进行数据和页面的传递。ViewPager更多时候会和Fragment一起使用，方便管理各个页面的生命周期。

涉及知识点

• ViewPager并非是原生的UI控件，所以使用的时候需要包含全部的包名（android.support.v4.view.ViewPager）。
• PagerAdapter 是一个抽象基类，开发时需要实现类中的抽象方法。用于将数据在ViewPager中展示出来。
PagerAdapter的抽象方法需要实现以下几个：
• getCount() 用于获取需要展示的子视图的数量
• isViewFromObject(View view, Object object) 子视图是否需要重新加载，如果已经加载过，则不需要重新加载。
• destroyItem(ViewGroup container, int position, Object object) 删除子视图
• instantiateItem(ViewGroup container, int position) 生成对应位置的子视图
• addOnPageChangeListener 对ViewPager增加监听事件
• SimpleOnPageChangeListener 是实现OnPageChangeListener接口的类，需要实现onPageSelected(int position)方法即可。
• ImageView 图片视图，用于显示图片，本例中主要用于ViewPager中的指示器。
• FragmentPagerAdapter 用于显示Fragment的适配器。
• FragmentManager 一个用于管理Fragmetn的抽象类，是FragmentPagerAdapter构造函数中的一个参数。

示例截图

图片轮播如下所示：

示例源码

xml布局代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context="com.hex.demoviewpager.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_info"
        android:scrollIndicators="bottom"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
    <TextView
        android:id="@+id/tv_title"
        android:layout_alignBottom="@id/vp_info"
        android:layout_centerHorizontal="true"
        android:textSize="20dp"
        android:text="aaaa"
        android:layout_marginBottom="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <LinearLayout
        android:id="@+id/ll_Indicator"
        android:layout_alignBottom="@id/vp_info"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:orientation="horizontal"
        android:layout_width="200dp"
        android:layout_height="wrap_content">

    </LinearLayout>
    <Button
        android:id="@+id/bn_go"
        android:text="@string/go"
        android:layout_alignParentTop="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>

Java代码（图片轮播）

package com.hex.demoviewpager;

import android.content.Intent;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private ViewPager mViewPager;
    int[] imgs;
    String[] titles;
    TextView tvTitle;
    LinearLayout llIndicator;
    Button mGo;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager= (ViewPager) this.findViewById(R.id.vp_info);
        imgs=new int[]{R.drawable.s01,R.drawable.s02,R.drawable.s03,R.drawable.s04,R.drawable.s05};
        titles=new String[]{"第一张图","第二张图","第三张图","第四张图","第五张图"};
        tvTitle= (TextView) this.findViewById(R.id.tv_title);
        //构造适配器并赋值
        MyAdapter adapter=new MyAdapter();
        mViewPager.setAdapter(adapter);
        //初始化第一个标题
        tvTitle.setText(titles[0]);
        //初始化指示器
        llIndicator = (LinearLayout) this.findViewById(R.id.ll_Indicator);
        setIndicator(0);
        //设置页面切换监听事件
        mViewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            /**
             * 页面被选中
             * @param position
             */
            @Override
            public void onPageSelected(int position) {
                Log.v("DemoViewPager","当前是："+titles[position]);
                tvTitle.setText(titles[position]);
                //设置指示器
                llIndicator.removeAllViews();
                setIndicator(position);
            }
        });
        //页面跳转
        mGo= (Button) this.findViewById(R.id.bn_go);
        mGo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(MainActivity.this,Main2Activity.class);
                startActivity(intent);
            }
        });
    }

    /**
     * 设置指示器
     * @param position
     */
    private  void setIndicator(int position){
        for(int i=0;i<imgs.length;i++) {
            ImageView imgIndicatior = new ImageView(MainActivity.this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(10, 10);
            layoutParams.leftMargin = 10;
            layoutParams.rightMargin = 10;
            imgIndicatior.setLayoutParams(layoutParams);
            if (i == position) {
                imgIndicatior.setImageResource(R.drawable.dot1);
            } else {
                imgIndicatior.setImageResource(R.drawable.dot0);
            }
            llIndicator.addView(imgIndicatior);
        }
    }

    /*
    描述：自定义一适配器
     */
    class MyAdapter extends PagerAdapter
    {

        @Override
        public int getCount() {
            return imgs == null ? 0 : imgs.length;
        }

        /**
         * 是否需要重新加载子视图
         * @param view
         * @param object
         * @return
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //container.removeViewAt(position);
            container.removeView((View)object);
        }

        /**
         * 生成子视图
         * @param container
         * @param position
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            ImageView img=new ImageView(container.getContext());
            img.setImageResource(imgs[position]);
            container.addView(img);
            return  img;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }
    }
}

Java代码（Fragment滑动）

package com.hex.demoviewpager;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

public class Main2Activity extends FragmentActivity {

    private ViewPager mViewPager2;
    private   List<Fragment> mList;
    LinearLayout llIndicator2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
        mViewPager2= (ViewPager) this.findViewById(R.id.vp_info2);
        mList=new ArrayList<Fragment>();
        for(int i=0;i<5;i++){
            ContentFragment fragment=ContentFragment.newInstance("第 "+i+" 个Fragment");
            mList.add(fragment);
        }
        FragmentManager manager = getSupportFragmentManager();
        MyAdapter2 adapter2=new MyAdapter2(manager);
        mViewPager2.setAdapter(adapter2);
        //初始化指示器
        llIndicator2 = (LinearLayout) this.findViewById(R.id.ll_Indicator2);
        setIndicator(0);
        //设置页面切换监听事件
        mViewPager2.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            /**
             * 页面被选中
             * @param position
             */
            @Override
            public void onPageSelected(int position) {
                //设置指示器
                llIndicator2.removeAllViews();
                setIndicator(position);
            }
        });
    }

    /**
     * 设置指示器
     * @param position
     */
    private  void setIndicator(int position){
        for(int i=0;i<mList.size();i++) {
            ImageView imgIndicatior = new ImageView(Main2Activity.this);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(10, 10);
            layoutParams.leftMargin = 10;
            layoutParams.rightMargin = 10;
            imgIndicatior.setLayoutParams(layoutParams);
            if (i == position) {
                imgIndicatior.setImageResource(R.drawable.dot1);
            } else {
                imgIndicatior.setImageResource(R.drawable.dot0);
            }
            llIndicator2.addView(imgIndicatior);
        }
    }

    /**
     * 结合Fragement的适配器
     */
    class MyAdapter2 extends FragmentPagerAdapter{

        public MyAdapter2(FragmentManager fm) {
            super(fm);

        }

        @Override
        public int getCount() {
            return mList==null ? 0:mList.size();
        }

        @Override
        public Fragment getItem(int position) {
            return mList.get(position);
        }
    }
}

备注

ViewPager支持的Fragment也是android.support.v4.app包中的Fragment，需要调用的Activity也是需要继承android.support.v4.app.FragmentActivity 。ViewPager中的图片指示器是用LinearLayout中图片实现的。