码迷，mamicode.com
首页 > 移动开发 > 详细

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

时间：2014-09-24 20:39:57      阅读：425      评论：0      收藏：0      [点我收藏+]

标签：des   android   style   blog   http   color   io   os   使用   

 
分类： 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,目录结构如下图所示:

bubuko.com,布布扣

第二步：新建一个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>  

第五步运行查看效果:

bubuko.com,布布扣   bubuko.com,布布扣

                     运行效果1                                             运行效果2

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

源代码点击进入==>

 

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

标签：des   android   style   blog   http   color   io   os   使用   

原文地址：http://www.cnblogs.com/xgjblog/p/3991356.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！