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

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

下面就开始讲下ViewPager的用法，ViewPager和ViewFlipper用法类似，但是更好用，左右滑动效果好，而且有类似于ListView

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

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

第五步运行查看效果:

  

                     运行效果1                                             运行效果2

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

 

来源：http://blog.csdn.net/android_tutor/article/details/7980239