［ViewPager、一］ViewPager和PagerAdapter做动态加载页（类似listView适配根据data新增的效果）

最近碰到一个比较有意思的需求。

需求场景：

一、需求说明：

根据接口返回数据确定有多少页。样式统一，翻页仅仅改变数据。

类似一个横向的listview。

二、回忆一下常见需求：

平时我们做viewpager都比较固定页，比如传统的三页或者四页。如下图（截取个微信图）。

然而，这种效果基本上都是几页已经确定。

比如微信、通讯录、发现、我，这四页是确定的。

这是正常的也是最常见的需求，无外乎fragment＋viewpager＋fragmentpageradapter实现。

网上这样的需求应该很多。

实现方法：

一、先新建一个固定的样式：这儿我不多说，直接贴代码：

<?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="wrap_content"    android:background="@color/white"    android:padding="15dp" >    <TextView        android:id="@+id/tv3"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="最近一周排名"        android:textColor="@color/color_63"        android:textSize="18sp" />    <TextView        android:id="@+id/report"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/tv3"        android:layout_marginTop="10dp"        android:text="区域"        android:textColor="@color/color_66"        android:textSize="16sp" />    <TextView        android:id="@+id/province"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_toRightOf="@id/report"        android:layout_below="@+id/tv3"         android:layout_marginTop="10dp"         android:layout_marginLeft="20dp"        android:text="默认省份"        android:textColor="@color/color_66"        android:textSize="16sp" />    <TextView        android:id="@+id/all_people"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/report"        android:layout_marginTop="10dp"        android:text="总人数"        android:textColor="@color/color_66"        android:textSize="16sp" />    <TextView        android:id="@+id/mm_count"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_below="@+id/report"        android:layout_marginTop="10dp"        android:layout_marginLeft="20dp"        android:layout_toRightOf="@id/all_people"        android:text="--"        android:textColor="@color/color_66"        android:textSize="16sp" />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentRight="true"        android:text="查看详情"        android:textColor="@color/color_66"        android:textSize="16sp" />    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_below="@+id/all_people" >        <ImageView            android:id="@+id/sun_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:background="@drawable/crm_pn_sun_bg" />        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_centerInParent="true"            android:orientation="horizontal" >            <TextView                android:id="@+id/rank_id"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="22"                android:textColor="@color/color_63"                android:textSize="44sp" />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="bottom"                android:text="名"                android:textColor="@color/color_63"                android:textSize="15sp" />        </LinearLayout>        <LinearLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_alignParentBottom="true"            android:layout_centerHorizontal="true"            android:background="@drawable/crm_pn_pm"            android:orientation="vertical" >            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center"                android:layout_marginTop="8dp"                android:text="我的排名"                android:textColor="@color/white"                android:textSize="18sp" />        </LinearLayout>    </RelativeLayout></RelativeLayout>

实现效果图如下：

二、做个数据的类：用来一会儿作为用来装载数据list的bean。

package com.example.mydemo;import java.io.Serializable;public class PullProvinceListBean implements Serializable {private static final long serialVersionUID = 1L;private String mMCount;private String nameRate;private String provinceId;private String provinceName;public PullProvinceListBean(String mMCount, String nameRate,String provinceId, String provinceName) {super();this.mMCount = mMCount;this.nameRate = nameRate;this.provinceId = provinceId;this.provinceName = provinceName;}public String getmMCount() {return mMCount;}public void setmMCount(String mMCount) {this.mMCount = mMCount;}public String getNameRate() {return nameRate;}public void setNameRate(String nameRate) {this.nameRate = nameRate;}public String getProvinceId() {return provinceId;}public void setProvinceId(String provinceId) {this.provinceId = provinceId;}public String getProvinceName() {return provinceName;}public void setProvinceName(String provinceName) {this.provinceName = provinceName;}}

三、核心代码：写一个类继承自PagerAdapter。

package com.example.mydemo;import java.util.ArrayList;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.RelativeLayout;import android.widget.TextView;public class ViewPagerAdapter extends PagerAdapter {ArrayList<PullProvinceListBean> mData;TextView province,mm_count,rank_id;Context mContext;ArrayList<View> mList;public ViewPagerAdapter(Context mContext,ArrayList<View> mList, ArrayList<PullProvinceListBean> mData) {super();this.mContext = mContext;this.mData = mData;this.mList = mList;}@Overridepublic int getCount() {// TODO// 获取要滑动的控件的数量，在这里我们以滑动的广告栏为例，那么这里就应该是展示的广告图片的ImageView数量return this.mList.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO// 来判断显示的是否是同一张图片，这里我们将两个参数相比较返回即可return arg0 == arg1;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO// PagerAdapter只缓存三张要显示的图片，如果滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁container.removeView(this.mList.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODOView v = mList.get(position);province = (TextView)v.findViewById(R.id.province);mm_count = (TextView)v.findViewById(R.id.mm_count);rank_id = (TextView)v.findViewById(R.id.rank_id);setData(position);// 当要显示的图片可以进行缓存的时候，会调用这个方法进行显示图片的初始化，我们将要显示的ImageView加入到ViewGroup中，然后作为返回值返回即可container.addView(v);return this.mList.get(position);}private void setData(int position) {// TODO Auto-generated method stubprovince.setText(mData.get(position).getProvinceName());mm_count.setText(mData.get(position).getmMCount());rank_id.setText(mData.get(position).getNameRate());}}

这儿简单的做一些说明：

1）继承adapter，以下getCount、isViewFromObject、destroyItem、instantiateItem四个类必须实现。

getCount获取要滑动的控件的数量

isViewFromObject来判断显示的是否是同一张图片

destroyItem: PagerAdapter只缓存三张要显示的图片，如果滑动的图片超出了缓存的范围，就会调用这个方法，将图片销毁

instantiateItem:当要显示的图片可以进行缓存的时候，会调用这个方法进行显示图片的初始化，我们将要显示的ImageView加入到ViewGroup中

2) 写一个构造方法将数据列表及样式列表传进来。

（补充一句：本来我也想做成listview那样子的只传数据样式在adapter里面写的，却未能实现）

public ViewPagerAdapter(Context mContext,ArrayList<View> mList, ArrayList<PullProvinceListBean> mData) {super();this.mContext = mContext;this.mData = mData;this.mList = mList;}

3）关键的是instantiateItem代码的重写：获得外部传入的样式列表的位置。并获取到不同index的样式的R.xxx.id

View v = mList.get(position);province = (TextView)v.findViewById(R.id.province);mm_count = (TextView)v.findViewById(R.id.mm_count);rank_id = (TextView)v.findViewById(R.id.rank_id);

调用一个设置数据的对外方法，根据数据list的位置匹配。

private void setData(int position) {// TODO Auto-generated method stubprovince.setText(mData.get(position).getProvinceName());mm_count.setText(mData.get(position).getmMCount());rank_id.setText(mData.get(position).getNameRate());}

然后把view加进Viewgroup，然后再返回。

container.addView(v);return this.mList.get(position);

然后就可以在主方法中调用这个adapter了。并实现从外面传数据进来。根据数据列表的个数，生成多少个页面。

从我的adapter中也能看出，确定页面个数还是在外面确定的。是根据主方法传递的进来的样式列表中的个数确定的。

四、主方法：

package com.example.mydemo;import java.util.ArrayList;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.widget.RelativeLayout;public class MainActivity extends Activity implements OnPageChangeListener {private ViewPager v_pager;private RelativeLayout v_1, v_2, v_3;ArrayList<PullProvinceListBean> mData;ViewPagerAdapter mAdapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView() {// TODO Auto-generated method stubv_pager = (ViewPager) findViewById(R.id.v_pager);mData = new ArrayList<PullProvinceListBean> ();mData.add(new PullProvinceListBean("50", "1", "1", "湖南省"));mData.add(new PullProvinceListBean("30", "2", "1", "河南省"));mData.add(new PullProvinceListBean("300", "2", "1", "河北省"));mData.add(new PullProvinceListBean("320", "2", "1", "北京"));mData.add(new PullProvinceListBean("320", "2", "1", "辽宁"));ArrayList<View> mList = new ArrayList<View>();for (int i = 0; i < mData.size(); i++) { View v = (RelativeLayout) LayoutInflater.from(getApplicationContext()).inflate(R.layout.lin, null); mList.add(v);}mAdapter = new ViewPagerAdapter(getApplicationContext(), mList,mData);v_pager.setAdapter(mAdapter);v_pager.setCurrentItem(0);v_pager.setOnPageChangeListener(this);}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stub}}

关于adapter内复用的几个方法，及各自的意义，网上资料较多，不再多说。