Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!

大家好，相信大家用的ListView控件一定很多的，是竖向滑动的，复用convertView,我们可以加载成千上万的数据，但有时候我们会有这个需求比如相册，我们想横向滑动，并且数据有好多，这时候ViewPager控件就派上用场了，ViewPager使用时候我们需要导入第三方包android-support-v4.jar包，这是谷歌提供的，这个包里有Fragment ViewPager等控件，用户导入这个包，在3.0以前就可以使用Fragment控件了~

下面就开始讲下ViewPager的用法，ViewPager和ViewFlipper用法类似，但是更好用，左右滑动效果好，而且有类似于ListView的Adapter---PagerAdapter基类，这样的话可以回收内存，复用等。PagerAdapter的几个方法里常用的有:

void destroyItem(View container, int position, Object object) 这里是左右滑动的时候，回收较早前的itemView.

int getCount() ViewPager里显示内容的条数.

 Object instantiateItem(View container, int position)初始化ItemView.

为了让大家容易掌握，我写了一个简单的例子，简单实现相册横向滑动功能，首先自定义了ViewPager的itemView----ViewPagerItemView，这里做了初始化View的定义，以及回收内存重新加载等，数据源是JSONObject.其次是实现了PagerAdapter的适配器ViewPagerAdater，这里的数据源是JSONArray.然后ViewPager在名为ViewPagerDemoActivity.java的Activity里显示。下面是具体实现步骤：

第一步：新建一个Android工程ViewPagerDemoActivity,目录结构如下图所示:

第二步：新建一个ViewPagerItemView.java这里是相册的ItemView,代码如下：

package com.tutor.viewpager;import org.json.JSONException;import org.json.JSONObject;import android.content.Context;import android.graphics.Bitmap;import android.util.AttributeSet;import android.view.LayoutInflater;import android.view.View;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.TextView;/** * @author frankiewei * 相册的ItemView,自定义View.方便复用. */public class ViewPagerItemView extends FrameLayout {/** * 图片的ImageView. */private ImageView mAlbumImageView;/** * 图片名字的TextView. */private TextView mALbumNameTextView;/** * 图片的Bitmap. */private Bitmap mBitmap;/** * 要显示图片的JSONOBject类. */private JSONObject mObject;public ViewPagerItemView(Context context){super(context);setupViews();}public ViewPagerItemView(Context context, AttributeSet attrs) {super(context, attrs);setupViews();}//初始化View.private void setupViews(){LayoutInflater inflater = LayoutInflater.from(getContext());View view = inflater.inflate(R.layout.viewpager_itemview, null);mAlbumImageView = (ImageView)view.findViewById(R.id.album_imgview);mALbumNameTextView = (TextView)view.findViewById(R.id.album_name); addView(view);}/** * 填充数据，共外部调用. * @param object */public void setData(JSONObject object){this.mObject = object;try {int resId = object.getInt("resid");String name = object.getString("name");//实战中如果图片耗时应该令其一个线程去拉图片异步,不然把UI线程卡死.mAlbumImageView.setImageResource(resId);mALbumNameTextView.setText(name);} catch (JSONException e) {e.printStackTrace();}}/** * 这里内存回收.外部调用. */public void recycle(){mAlbumImageView.setImageBitmap(null);if ((this.mBitmap == null) || (this.mBitmap.isRecycled()))return;this.mBitmap.recycle();this.mBitmap = null;}/** * 重新加载.外部调用. */public void reload(){try {int resId = mObject.getInt("resid");//实战中如果图片耗时应该令其一个线程去拉图片异步,不然把UI线程卡死.mAlbumImageView.setImageResource(resId);}catch (JSONException e) {e.printStackTrace();}}}

其中ViewPagerItemView使用的xml文件viewpager_itemView.xml代码如下：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    >    <ImageView     android:id="@+id/album_imgview"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:contentDescription="@string/app_name"    android:scaleType="fitXY"    /><TextView    android:id="@+id/album_name"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="bottom|center_horizontal"     android:textColor="#B2191919"    /></FrameLayout>

第三步：新建一个ViewPagerAdapter.java继承与PagerAdapter，代码如下：

package com.tutor.viewpager;import java.util.HashMap;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;import android.content.Context;import android.os.Parcelable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;/** * @author frankiewei * 相册的适配器. */public class ViewPagerAdapter extends PagerAdapter {/** * 上下文 */private Context mContext;/** * 数据源,这里是JSONARRAY */private JSONArray mJsonArray;/** * Hashmap保存相片的位置以及ItemView. */private HashMap<Integer, ViewPagerItemView> mHashMap;public ViewPagerAdapter(Context context,JSONArray arrays) {this.mContext = context;this.mJsonArray = arrays;mHashMap = new HashMap<Integer, ViewPagerItemView>();}//这里进行回收，当我们左右滑动的时候，会把早期的图片回收掉.@Overridepublic void destroyItem(View container, int position, Object object) {ViewPagerItemView itemView = (ViewPagerItemView)object;itemView.recycle();}@Overridepublic void finishUpdate(View view) {}//这里返回相册有多少条,和BaseAdapter一样.@Overridepublic int getCount() {return mJsonArray.length();}//这里就是初始化ViewPagerItemView.如果ViewPagerItemView已经存在,//重新reload，不存在new一个并且填充数据.@Overridepublic Object instantiateItem(View container, int position) {ViewPagerItemView itemView;if(mHashMap.containsKey(position)){itemView = mHashMap.get(position);itemView.reload();}else{itemView = new ViewPagerItemView(mContext);try {JSONObject dataObj = (JSONObject) mJsonArray.get(position);itemView.setData(dataObj);} catch (JSONException e) {e.printStackTrace();}mHashMap.put(position, itemView);((ViewPager) container).addView(itemView);}return itemView;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == object;}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View view) {}}

第四步：修改主Activity类ViewPagerDemoActivity.java代码如下：

package com.tutor.viewpager;import org.json.JSONArray;import org.json.JSONException;import org.json.JSONObject;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.ViewPager;/** * @author frankiewei * ViewPager控件使用的Demo. */public class ViewPagerDemoActivity extends Activity {/** * 这里定义了相册的总数100条. */private static final int ALBUM_COUNT = 100;/** * 相册的资源,实战开发中都是网络数据或者本地相册. */private static final int ALBUM_RES[] = {R.drawable.test1,R.drawable.test2,R.drawable.test3,R.drawable.test4,R.drawable.test5,R.drawable.test6};    private ViewPager mViewPager;/** * 适配器. */private ViewPagerAdapter mViewPagerAdapter;/** * 数据源. */private JSONArray mJsonArray;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);                setupViews();    }        private void setupViews(){        //初始化JSonArray,给ViewPageAdapter提供数据源用.    mJsonArray = new JSONArray();    for(int i = 0;i<ALBUM_COUNT; i++){    JSONObject object = new JSONObject();    try {object.put("resid", ALBUM_RES[i % ALBUM_RES.length]);object.put("name", "Album " + i);    mJsonArray.put(object);} catch (JSONException e) {e.printStackTrace();}        }        mViewPager = (ViewPager)findViewById(R.id.viewpager);    mViewPagerAdapter = new ViewPagerAdapter(this, mJsonArray);    mViewPager.setAdapter(mViewPagerAdapter);    }}

其中main.xml布局代码如下：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="fill_parent"        android:layout_height="fill_parent"         /></LinearLayout>

第五步运行查看效果:

  

                     运行效果1                                             运行效果2

OK,今天就写到这里，代码注释写的也比较清楚，大家有什么疑问的，可以留言！下面的链接是源代码，供新手们学习用，今天就讲到这里，谢谢大家！！！

源代码点击进入==>