Android ViewPager控件的使用

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

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

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

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

这里是左右滑动的时候,回收较早前的itemView.

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

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

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

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

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

  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. }  
package com.tutor.viewpager;

import org.json.JSONException;
import org.json.JSONObject;

import android.content.Context;
import android.graphics.Bitmap;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * @author frankiewei
 * 相册的ItemView,自定义View.方便复用.
 */
public class ViewPagerItemView extends FrameLayout {

	/**
	 * 图片的ImageView.
	 */
	private ImageView mAlbumImageView;
	
	/**
	 * 图片名字的TextView.
	 */
	private TextView mALbumNameTextView;
	
	/**
	 * 图片的Bitmap.
	 */
	private Bitmap mBitmap;
	
	/**
	 * 要显示图片的JSONOBject类.
	 */
	private JSONObject mObject;
	
	
	public ViewPagerItemView(Context context){
		super(context);
		setupViews();
	}
	
	public ViewPagerItemView(Context context, AttributeSet attrs) {
		super(context, attrs);
		setupViews();
	}
	
	//初始化View.
	private void setupViews(){
		LayoutInflater inflater = LayoutInflater.from(getContext());
		View view = inflater.inflate(R.layout.viewpager_itemview, null);
		
		mAlbumImageView = (ImageView)view.findViewById(R.id.album_imgview);
		mALbumNameTextView = (TextView)view.findViewById(R.id.album_name); 
		addView(view);
	}

	/**
	 * 填充数据,共外部调用.
	 * @param object
	 */
	public void setData(JSONObject object){
		this.mObject = object;
		try {
			int resId = object.getInt("resid");
			String name = object.getString("name");
			//实战中如果图片耗时应该令其一个线程去拉图片异步,不然把UI线程卡死.
			mAlbumImageView.setImageResource(resId);
			mALbumNameTextView.setText(name);
		} catch (JSONException e) {
			e.printStackTrace();
		}
		
	}
		
	/**
	 * 这里内存回收.外部调用.
	 */
	public void recycle(){
		mAlbumImageView.setImageBitmap(null);
		if ((this.mBitmap == null) || (this.mBitmap.isRecycled()))
			return;
		this.mBitmap.recycle();
		this.mBitmap = null;
	}
	
	
	/**
	 * 重新加载.外部调用.
	 */
	public void reload(){
		try {
			int resId = mObject.getInt("resid");
			//实战中如果图片耗时应该令其一个线程去拉图片异步,不然把UI线程卡死.
			mAlbumImageView.setImageResource(resId);
		}catch (JSONException e) {
			e.printStackTrace();
		}
	}
	
}

其中ViewPagerItemView使用的xml文件viewpager_itemView.xml代码如下:
  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>  
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    
	<ImageView 
	    android:id="@+id/album_imgview"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent"
	    android:contentDescription="@string/app_name"
	    android:scaleType="fitXY"
	    />
	
	<TextView
	    android:id="@+id/album_name"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_gravity="bottom|center_horizontal" 
	    android:textColor="#B2191919"
	    />
</FrameLayout>

第三步:新建一个ViewPagerAdapter.java继承与PagerAdapter,代码如下:
  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. }  
package com.tutor.viewpager;

import java.util.HashMap;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;

/**
 * @author frankiewei
 * 相册的适配器.
 */
public class ViewPagerAdapter extends PagerAdapter {

	/**
	 * 上下文
	 */
	private Context mContext;
	
	/**
	 * 数据源,这里是JSONARRAY
	 */
	private JSONArray mJsonArray;
	
	/**
	 * Hashmap保存相片的位置以及ItemView.
	 */
	private HashMap<Integer, ViewPagerItemView> mHashMap;
	
	public ViewPagerAdapter(Context context,JSONArray arrays) {
		this.mContext = context;
		this.mJsonArray = arrays;
		mHashMap = new HashMap<Integer, ViewPagerItemView>();
	}
	
	//这里进行回收,当我们左右滑动的时候,会把早期的图片回收掉.
	@Override
	public void destroyItem(View container, int position, Object object) {
		ViewPagerItemView itemView = (ViewPagerItemView)object;
		itemView.recycle();
	}
	
	@Override
	public void finishUpdate(View view) {

	}

	//这里返回相册有多少条,和BaseAdapter一样.
	@Override
	public int getCount() {
		return mJsonArray.length();
	}

	//这里就是初始化ViewPagerItemView.如果ViewPagerItemView已经存在,
	//重新reload,不存在new一个并且填充数据.
	@Override
	public Object instantiateItem(View container, int position) {	
		ViewPagerItemView itemView;
		if(mHashMap.containsKey(position)){
			itemView = mHashMap.get(position);
			itemView.reload();
		}else{
			itemView = new ViewPagerItemView(mContext);
			try {
				JSONObject dataObj = (JSONObject) mJsonArray.get(position);
				itemView.setData(dataObj);
			} catch (JSONException e) {
				e.printStackTrace();
			}
			mHashMap.put(position, itemView);
			((ViewPager) container).addView(itemView);
		}
		
		return itemView;
	}

	@Override
	public boolean isViewFromObject(View view, Object object) {
		return view == object;
	}

	@Override
	public void restoreState(Parcelable arg0, ClassLoader arg1) {
		
	}

	@Override
	public Parcelable saveState() {
		return null;
	}

	@Override
	public void startUpdate(View view) {

	}
}

第四步:修改主Activity类ViewPagerDemoActivity.java代码如下:
  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. }  
package com.tutor.viewpager;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;

/**
 * @author frankiewei
 * ViewPager控件使用的Demo.
 */
public class ViewPagerDemoActivity extends Activity {
	
	/**
	 * 这里定义了相册的总数100条.
	 */
	private static final int ALBUM_COUNT = 100;
	
	/**
	 * 相册的资源,实战开发中都是网络数据或者本地相册.
	 */
	private static final int ALBUM_RES[] = {
		R.drawable.test1,R.drawable.test2,R.drawable.test3,
		R.drawable.test4,R.drawable.test5,R.drawable.test6
	};
    
	private ViewPager mViewPager;
	
	/**
	 * 适配器.
	 */
	private ViewPagerAdapter mViewPagerAdapter;
	
	/**
	 * 数据源.
	 */
	private JSONArray mJsonArray;
	
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        setupViews();
    }
    
    private void setupViews(){    
    	//初始化JSonArray,给ViewPageAdapter提供数据源用.
    	mJsonArray = new JSONArray();
    	for(int i = 0;i<ALBUM_COUNT; i++){
    		JSONObject object = new JSONObject();
    		try {
				object.put("resid", ALBUM_RES[i % ALBUM_RES.length]);
				object.put("name", "Album " + i);
	    		mJsonArray.put(object);
			} catch (JSONException e) {
				e.printStackTrace();
			}
    		
    	}    	
    	mViewPager = (ViewPager)findViewById(R.id.viewpager);
    	mViewPagerAdapter = new ViewPagerAdapter(this, mJsonArray);
    	mViewPager.setAdapter(mViewPagerAdapter);
    }
}

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

  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>  
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
         />

</LinearLayout>

第五步运行查看效果:

  

                     运行效果1                                             运行效果2

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

源代码点击进入==>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值