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

蔚落 2022-09-20 16:18 211阅读 0赞

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

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

**\[java\]** [view plain][] [copy][view plain]

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

**\[java\]** [view plain][] [copy][view plain]

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

**\[java\]** [view plain][] [copy][view plain]

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

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

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

![1347617294_6041.jpg][]

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

**\[java\]** [view plain][] [copy][view plain]

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][view plain]

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][view plain]

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][view plain]

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][view plain]

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>

第五步运行查看效果:

![1347618000_3208.jpg][] ![1347618007_7650.jpg][]

运行效果1 运行效果2

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

[**源代码点击进入==>**][Link 1]

[view plain]: http://blog.csdn.net/android_tutor/article/details/7980239#
[1347617294_6041.jpg]: https://img-my.csdn.net/uploads/201209/14/1347617294_6041.jpg
[1347618000_3208.jpg]: https://img-my.csdn.net/uploads/201209/14/1347618000_3208.jpg
[1347618007_7650.jpg]: https://img-my.csdn.net/uploads/201209/14/1347618007_7650.jpg
[Link 1]: http://download.csdn.net/download/android_tutor/4570798