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

分类： Android高手进阶 Android基础教程 2012-09-14 18:10 29759人阅读 评论(35) 收藏 举报

android相册layoutobjectclassloaderencoding

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

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

[java] view plaincopy

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

[java] view plaincopy

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

[java] view plaincopy

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 plaincopy

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

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

[java] view plaincopy

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. <ImageView
7. android:id="@+id/album_imgview"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:contentDescription="@string/app_name"
11. android:scaleType="fitXY"
12. />
13. <TextView
14. android:id="@+id/album_name"
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:layout_gravity="bottom|center_horizontal"
18. android:textColor="#B2191919"
19. />
20. </FrameLayout>

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

[java] view plaincopy

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

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

[java] view plaincopy

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

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

[java] view plaincopy

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. <android.support.v4.view.ViewPager
7. android:id="@+id/viewpager"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. />
11. </LinearLayout>

第五步运行查看效果:

运行效果1                                             运行效果2

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

源代码点击进入==>

• 上一篇Android高手进阶教程(二十七)之---基于ViewFlipper实现的自定义新手指引控件.
• 下一篇谈谈Android里的Context的使用！！