一起学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布局代码

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <relativelayout
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     xmlns:tools="http://schemas.android.com/tools"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     tools:context="com.hex.demoviewpager.mainactivity">
 8     <android.support.v4.view.viewpager
 9         android:id="@+id/vp_info"
10         android:scrollindicators="bottom"
11         android:layout_width="match_parent"
12         android:layout_height="match_parent">
13     </android.support.v4.view.viewpager>
14     <textview
15         android:id="@+id/tv_title"
16         android:layout_alignbottom="@id/vp_info"
17         android:layout_centerhorizontal="true"
18         android:textsize="20dp"
19         android:text="aaaa"
20         android:layout_marginbottom="30dp"
21         android:layout_width="wrap_content"
22         android:layout_height="wrap_content"/>
23     <linearlayout
24         android:id="@+id/ll_indicator"
25         android:layout_alignbottom="@id/vp_info"
26         android:layout_centerhorizontal="true"
27         android:gravity="center"
28         android:orientation="horizontal"
29         android:layout_width="200dp"
30         android:layout_height="wrap_content">
31 
32     </linearlayout>
33     <button
34         android:id="@+id/bn_go"
35         android:text="@string/go"
36         android:layout_alignparenttop="true"
37         android:layout_width="wrap_content"
38         android:layout_height="wrap_content"/>
39 </relativelayout>

view code

java代码（图片轮播）

  1 package com.hex.demoviewpager;
  2 
  3 import android.content.intent;
  4 import android.support.v4.view.pageradapter;
  5 import android.support.v4.view.viewpager;
  6 import android.support.v7.app.actionbar;
  7 import android.support.v7.app.appcompatactivity;
  8 import android.os.bundle;
  9 import android.util.log;
 10 import android.view.view;
 11 import android.view.viewgroup;
 12 import android.widget.button;
 13 import android.widget.imageview;
 14 import android.widget.linearlayout;
 15 import android.widget.textview;
 16 
 17 public class mainactivity extends appcompatactivity {
 18 
 19     private viewpager mviewpager;
 20     int[] imgs;
 21     string[] titles;
 22     textview tvtitle;
 23     linearlayout llindicator;
 24     button mgo;
 25     @override
 26     protected void oncreate(bundle savedinstancestate) {
 27         super.oncreate(savedinstancestate);
 28         setcontentview(r.layout.activity_main);
 29         mviewpager= (viewpager) this.findviewbyid(r.id.vp_info);
 30         imgs=new int[]{r.drawable.s01,r.drawable.s02,r.drawable.s03,r.drawable.s04,r.drawable.s05};
 31         titles=new string[]{"第一张图","第二张图","第三张图","第四张图","第五张图"};
 32         tvtitle= (textview) this.findviewbyid(r.id.tv_title);
 33         //构造适配器并赋值
 34         myadapter adapter=new myadapter();
 35         mviewpager.setadapter(adapter);
 36         //初始化第一个标题
 37         tvtitle.settext(titles[0]);
 38         //初始化指示器
 39         llindicator = (linearlayout) this.findviewbyid(r.id.ll_indicator);
 40         setindicator(0);
 41         //设置页面切换监听事件
 42         mviewpager.addonpagechangelistener(new viewpager.simpleonpagechangelistener() {
 43             /**
 44              * 页面被选中
 45              * @param position
 46              */
 47             @override
 48             public void onpageselected(int position) {
 49                 log.v("demoviewpager","当前是："+titles[position]);
 50                 tvtitle.settext(titles[position]);
 51                 //设置指示器
 52                 llindicator.removeallviews();
 53                 setindicator(position);
 54             }
 55         });
 56         //页面跳转
 57         mgo= (button) this.findviewbyid(r.id.bn_go);
 58         mgo.setonclicklistener(new view.onclicklistener() {
 59             @override
 60             public void onclick(view v) {
 61                 intent intent=new intent(mainactivity.this,main2activity.class);
 62                 startactivity(intent);
 63             }
 64         });
 65     }
 66 
 67     /**
 68      * 设置指示器
 69      * @param position
 70      */
 71     private  void setindicator(int position){
 72         for(int i=0;i<imgs.length;i++) {
 73             imageview imgindicatior = new imageview(mainactivity.this);
 74             linearlayout.layoutparams layoutparams = new linearlayout.layoutparams(10, 10);
 75             layoutparams.leftmargin = 10;
 76             layoutparams.rightmargin = 10;
 77             imgindicatior.setlayoutparams(layoutparams);
 78             if (i == position) {
 79                 imgindicatior.setimageresource(r.drawable.dot1);
 80             } else {
 81                 imgindicatior.setimageresource(r.drawable.dot0);
 82             }
 83             llindicator.addview(imgindicatior);
 84         }
 85     }
 86 
 87     /*
 88     描述：自定义一适配器
 89      */
 90     class myadapter extends pageradapter
 91     {
 92 
 93         @override
 94         public int getcount() {
 95             return imgs == null ? 0 : imgs.length;
 96         }
 97 
 98         /**
 99          * 是否需要重新加载子视图
100          * @param view
101          * @param object
102          * @return
103          */
104         @override
105         public boolean isviewfromobject(view view, object object) {
106             return view == object;
107         }
108 
109         @override
110         public void destroyitem(viewgroup container, int position, object object) {
111             //container.removeviewat(position);
112             container.removeview((view)object);
113         }
114 
115         /**
116          * 生成子视图
117          * @param container
118          * @param position
119          * @return
120          */
121         @override
122         public object instantiateitem(viewgroup container, int position) {
123             imageview img=new imageview(container.getcontext());
124             img.setimageresource(imgs[position]);
125             container.addview(img);
126             return  img;
127         }
128 
129         @override
130         public charsequence getpagetitle(int position) {
131             return titles[position];
132         }
133     }
134 }

view code

java代码（fragment滑动）

 1 package com.hex.demoviewpager;
 2 
 3 import android.support.v4.app.fragment;
 4 import android.support.v4.app.fragmentactivity;
 5 import android.support.v4.app.fragmentmanager;
 6 import android.support.v4.app.fragmentpageradapter;
 7 import android.support.v4.view.viewpager;
 8 import android.support.v7.app.appcompatactivity;
 9 import android.os.bundle;
10 import android.util.log;
11 import android.widget.imageview;
12 import android.widget.linearlayout;
13 
14 import java.util.arraylist;
15 import java.util.list;
16 
17 public class main2activity extends fragmentactivity {
18 
19     private viewpager mviewpager2;
20     private   list<fragment> mlist;
21     linearlayout llindicator2;
22     @override
23     protected void oncreate(bundle savedinstancestate) {
24         super.oncreate(savedinstancestate);
25         setcontentview(r.layout.activity_main2);
26         mviewpager2= (viewpager) this.findviewbyid(r.id.vp_info2);
27         mlist=new arraylist<fragment>();
28         for(int i=0;i<5;i++){
29             contentfragment fragment=contentfragment.newinstance("第 "+i+" 个fragment");
30             mlist.add(fragment);
31         }
32         fragmentmanager manager = getsupportfragmentmanager();
33         myadapter2 adapter2=new myadapter2(manager);
34         mviewpager2.setadapter(adapter2);
35         //初始化指示器
36         llindicator2 = (linearlayout) this.findviewbyid(r.id.ll_indicator2);
37         setindicator(0);
38         //设置页面切换监听事件
39         mviewpager2.addonpagechangelistener(new viewpager.simpleonpagechangelistener() {
40             /**
41              * 页面被选中
42              * @param position
43              */
44             @override
45             public void onpageselected(int position) {
46                 //设置指示器
47                 llindicator2.removeallviews();
48                 setindicator(position);
49             }
50         });
51     }
52 
53     /**
54      * 设置指示器
55      * @param position
56      */
57     private  void setindicator(int position){
58         for(int i=0;i<mlist.size();i++) {
59             imageview imgindicatior = new imageview(main2activity.this);
60             linearlayout.layoutparams layoutparams = new linearlayout.layoutparams(10, 10);
61             layoutparams.leftmargin = 10;
62             layoutparams.rightmargin = 10;
63             imgindicatior.setlayoutparams(layoutparams);
64             if (i == position) {
65                 imgindicatior.setimageresource(r.drawable.dot1);
66             } else {
67                 imgindicatior.setimageresource(r.drawable.dot0);
68             }
69             llindicator2.addview(imgindicatior);
70         }
71     }
72 
73     /**
74      * 结合fragement的适配器
75      */
76     class myadapter2 extends fragmentpageradapter{
77 
78         public myadapter2(fragmentmanager fm) {
79             super(fm);
80 
81         }
82 
83         @override
84         public int getcount() {
85             return mlist==null ? 0:mlist.size();
86         }
87 
88         @override
89         public fragment getitem(int position) {
90             return mlist.get(position);
91         }
92     }
93 }

view code

备注

viewpager支持的fragment也是android.support.v4.app包中的fragment，需要调用的activity也是需要继承android.support.v4.app.fragmentactivity 。viewpager中的图片指示器是用linearlayout中图片实现的。