Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!
大家好,相信大家用的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();
- }
- }
- }
其中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,今天就写到这里,代码注释写的也比较清楚,大家有什么疑问的,可以留言!下面的链接是源代码,供新手们学习用,今天就讲到这里,谢谢大家!!!
源代码点击进入==>郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。