Android ViewPager控件的使用(基于ViewPager的横向相册)!!!

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

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

[java]  view plain copy

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

[java]  view plain copy

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

[java]  view plain copy

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

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

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

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

[java]  view plain copy

1. package com.tutor.viewpager;  
2.   
3. import org.json.JSONException;  
4. import org.json.JSONObject;  
5.   
6. import android.content.Context;  
7. import android.graphics.Bitmap;  
8. import android.util.AttributeSet;  
9. import android.view.LayoutInflater;  
10. import android.view.View;  
11. import android.widget.FrameLayout;  
12. import android.widget.ImageView;  
13. import android.widget.TextView;  
14.   
15. /** 
16.  * @author frankiewei 
17.  * 相册的ItemView,自定义View.方便复用. 
18.  */  
19. public class ViewPagerItemView extends FrameLayout {  
20.   
21.     /** 
22.      * 图片的ImageView. 
23.      */  
24.     private ImageView mAlbumImageView;  
25.       
26.     /** 
27.      * 图片名字的TextView. 
28.      */  
29.     private TextView mALbumNameTextView;  
30.       
31.     /** 
32.      * 图片的Bitmap. 
33.      */  
34.     private Bitmap mBitmap;  
35.       
36.     /** 
37.      * 要显示图片的JSONOBject类. 
38.      */  
39.     private JSONObject mObject;  
40.       
41.       
42.     public ViewPagerItemView(Context context){  
43.         super(context);  
44.         setupViews();  
45.     }  
46.       
47.     public ViewPagerItemView(Context context, AttributeSet attrs) {  
48.         super(context, attrs);  
49.         setupViews();  
50.     }  
51.       
52.     //初始化View.  
53.     private void setupViews(){  
54.         LayoutInflater inflater = LayoutInflater.from(getContext());  
55.         View view = inflater.inflate(R.layout.viewpager_itemview, null);  
56.           
57.         mAlbumImageView = (ImageView)view.findViewById(R.id.album_imgview);  
58.         mALbumNameTextView = (TextView)view.findViewById(R.id.album_name);   
59.         addView(view);  
60.     }  
61.   
62.     /** 
63.      * 填充数据，共外部调用. 
64.      * @param object 
65.      */  
66.     public void setData(JSONObject object){  
67.         this.mObject = object;  
68.         try {  
69.             int resId = object.getInt("resid");  
70.             String name = object.getString("name");  
71.             //实战中如果图片耗时应该令其一个线程去拉图片异步,不然把UI线程卡死.  
72.             mAlbumImageView.setImageResource(resId);  
73.             mALbumNameTextView.setText(name);  
74.         } catch (JSONException e) {  
75.             e.printStackTrace();  
76.         }  
77.           
78.     }  
79.           
80.     /** 
81.      * 这里内存回收.外部调用. 
82.      */  
83.     public void recycle(){  
84.         mAlbumImageView.setImageBitmap(null);  
85.         if ((this.mBitmap == null) || (this.mBitmap.isRecycled()))  
86.             return;  
87.         this.mBitmap.recycle();  
88.         this.mBitmap = null;  
89.     }  
90.       
91.       
92.     /** 
93.      * 重新加载.外部调用. 
94.      */  
95.     public void reload(){  
96.         try {  
97.             int resId = mObject.getInt("resid");  
98.             //实战中如果图片耗时应该令其一个线程去拉图片异步,不然把UI线程卡死.  
99.             mAlbumImageView.setImageResource(resId);  
100.         }catch (JSONException e) {  
101.             e.printStackTrace();  
102.         }  
103.     }  
104.       
105. }  

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

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     >  
6.       
7.     <ImageView   
8.         android:id="@+id/album_imgview"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="fill_parent"  
11.         android:contentDescription="@string/app_name"  
12.         android:scaleType="fitXY"  
13.         />  
14.       
15.     <TextView  
16.         android:id="@+id/album_name"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:layout_gravity="bottom|center_horizontal"   
20.         android:textColor="#B2191919"  
21.         />  
22. </FrameLayout>  

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

[java]  view plain copy

1. package com.tutor.viewpager;  
2.   
3. import java.util.HashMap;  
4.   
5. import org.json.JSONArray;  
6. import org.json.JSONException;  
7. import org.json.JSONObject;  
8.   
9. import android.content.Context;  
10. import android.os.Parcelable;  
11. import android.support.v4.view.PagerAdapter;  
12. import android.support.v4.view.ViewPager;  
13. import android.view.View;  
14.   
15. /** 
16.  * @author frankiewei 
17.  * 相册的适配器. 
18.  */  
19. public class ViewPagerAdapter extends PagerAdapter {  
20.   
21.     /** 
22.      * 上下文 
23.      */  
24.     private Context mContext;  
25.       
26.     /** 
27.      * 数据源,这里是JSONARRAY 
28.      */  
29.     private JSONArray mJsonArray;  
30.       
31.     /** 
32.      * Hashmap保存相片的位置以及ItemView. 
33.      */  
34.     private HashMap<Integer, ViewPagerItemView> mHashMap;  
35.       
36.     public ViewPagerAdapter(Context context,JSONArray arrays) {  
37.         this.mContext = context;  
38.         this.mJsonArray = arrays;  
39.         mHashMap = new HashMap<Integer, ViewPagerItemView>();  
40.     }  
41.       
42.     //这里进行回收，当我们左右滑动的时候，会把早期的图片回收掉.  
43.     @Override  
44.     public void destroyItem(View container, int position, Object object) {  
45.         ViewPagerItemView itemView = (ViewPagerItemView)object;  
46.         itemView.recycle();  
47.     }  
48.       
49.     @Override  
50.     public void finishUpdate(View view) {  
51.   
52.     }  
53.   
54.     //这里返回相册有多少条,和BaseAdapter一样.  
55.     @Override  
56.     public int getCount() {  
57.         return mJsonArray.length();  
58.     }  
59.   
60.     //这里就是初始化ViewPagerItemView.如果ViewPagerItemView已经存在,  
61.     //重新reload，不存在new一个并且填充数据.  
62.     @Override  
63.     public Object instantiateItem(View container, int position) {     
64.         ViewPagerItemView itemView;  
65.         if(mHashMap.containsKey(position)){  
66.             itemView = mHashMap.get(position);  
67.             itemView.reload();  
68.         }else{  
69.             itemView = new ViewPagerItemView(mContext);  
70.             try {  
71.                 JSONObject dataObj = (JSONObject) mJsonArray.get(position);  
72.                 itemView.setData(dataObj);  
73.             } catch (JSONException e) {  
74.                 e.printStackTrace();  
75.             }  
76.             mHashMap.put(position, itemView);  
77.             ((ViewPager) container).addView(itemView);  
78.         }  
79.           
80.         return itemView;  
81.     }  
82.   
83.     @Override  
84.     public boolean isViewFromObject(View view, Object object) {  
85.         return view == object;  
86.     }  
87.   
88.     @Override  
89.     public void restoreState(Parcelable arg0, ClassLoader arg1) {  
90.           
91.     }  
92.   
93.     @Override  
94.     public Parcelable saveState() {  
95.         return null;  
96.     }  
97.   
98.     @Override  
99.     public void startUpdate(View view) {  
100.   
101.     }  
102. }  

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

[java]  view plain copy

1. package com.tutor.viewpager;  
2.   
3. import org.json.JSONArray;  
4. import org.json.JSONException;  
5. import org.json.JSONObject;  
6.   
7. import android.app.Activity;  
8. import android.os.Bundle;  
9. import android.support.v4.view.ViewPager;  
10.   
11. /** 
12.  * @author frankiewei 
13.  * ViewPager控件使用的Demo. 
14.  */  
15. public class ViewPagerDemoActivity extends Activity {  
16.       
17.     /** 
18.      * 这里定义了相册的总数100条. 
19.      */  
20.     private static final int ALBUM_COUNT = 100;  
21.       
22.     /** 
23.      * 相册的资源,实战开发中都是网络数据或者本地相册. 
24.      */  
25.     private static final int ALBUM_RES[] = {  
26.         R.drawable.test1,R.drawable.test2,R.drawable.test3,  
27.         R.drawable.test4,R.drawable.test5,R.drawable.test6  
28.     };  
29.       
30.     private ViewPager mViewPager;  
31.       
32.     /** 
33.      * 适配器. 
34.      */  
35.     private ViewPagerAdapter mViewPagerAdapter;  
36.       
37.     /** 
38.      * 数据源. 
39.      */  
40.     private JSONArray mJsonArray;  
41.       
42.       
43.     @Override  
44.     public void onCreate(Bundle savedInstanceState) {  
45.         super.onCreate(savedInstanceState);  
46.         setContentView(R.layout.main);  
47.           
48.         setupViews();  
49.     }  
50.       
51.     private void setupViews(){      
52.         //初始化JSonArray,给ViewPageAdapter提供数据源用.  
53.         mJsonArray = new JSONArray();  
54.         for(int i = 0;i<ALBUM_COUNT; i++){  
55.             JSONObject object = new JSONObject();  
56.             try {  
57.                 object.put("resid", ALBUM_RES[i % ALBUM_RES.length]);  
58.                 object.put("name", "Album " + i);  
59.                 mJsonArray.put(object);  
60.             } catch (JSONException e) {  
61.                 e.printStackTrace();  
62.             }  
63.               
64.         }         
65.         mViewPager = (ViewPager)findViewById(R.id.viewpager);  
66.         mViewPagerAdapter = new ViewPagerAdapter(this, mJsonArray);  
67.         mViewPager.setAdapter(mViewPagerAdapter);  
68.     }  
69. }  

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

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="fill_parent"  
5.     android:orientation="vertical" >  
6.   
7.     <android.support.v4.view.ViewPager  
8.         android:id="@+id/viewpager"  
9.         android:layout_width="fill_parent"  
10.         android:layout_height="fill_parent"  
11.          />  
12.   
13. </LinearLayout>  

第五步运行查看效果:

   

                     运行效果1                                             运行效果2

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

源代码点击进入==>