一起学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中图片实现的。