大家好,相信大家用的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,目录结构如下图所示:
第二步:新建一个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(); } } }
<?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>
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) { } }
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>
OK,今天就写到这里,代码注释写的也比较清楚,大家有什么疑问的,可以留言!下面的链接是源代码,供新手们学习用,今天就讲到这里,谢谢大家!!!