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

最新推荐文章于 2024-07-25 19:04:18 发布

SpeedyCoder

最新推荐文章于 2024-07-25 19:04:18 发布

阅读量1k

点赞数

分类专栏： android 高手进阶教程 GridView 文章标签： android 相册 import object layout arrays

android 高手进阶教程同时被 2 个专栏收录

122 篇文章 1 订阅

订阅专栏

GridView

3 篇文章 0 订阅

订阅专栏

大家好，相信大家用的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

SpeedyCoder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android高手进阶教程(二十八)之---Android ViewPager控件的使用(基于ViewPager的横向相册)!!!

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

扫一扫

专栏目录