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

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

2024-07-24 05:46:56   219人阅读

 
分类： 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.   
  3. 这里是左右滑动的时候，回收较早前的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.   
  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 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.       
  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 plaincopy
  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 plaincopy
  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 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.   
  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,今天就写到这里，代码注释写的也比较清楚，大家有什么疑问的，可以留言！下面的链接是源代码，供新手们学习用，今天就讲到这里，谢谢大家！！！

源代码点击进入==>

 

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


联系
我们