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

亦凉 2022-05-28 10:17 238阅读 0赞

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

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

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

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

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

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

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

![1347617294_6041.jpg][]

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

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代码如下：

<?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，代码如下：

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代码如下：

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布局代码如下：

<?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>

第五步运行查看效果:

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

运行效果1 运行效果2

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

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

[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