Hi,欢迎来到华清远见移动互联网学院官网!国内王牌JAVAEE培训、Android培训、HTML5培训、UI培训、JAVA培训、VR培训机构!

  • 400-611-6270
  • 新浪微博
  • 微信
您当前的位置:移动互联网学院 > Android开发 > Android ViewPager控件的使用

Android ViewPager控件的使用

时间:2017-07-17 09:16 来源:移动互联网学院

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

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

[java] view plain copy

1. void destroyItem(View container, int position, Object object)   

2.

3. 这里是左右滑动的时候,回收较早前的itemView.  

[java] view plain copy

1. int getCount()   

2. ViewPager里显示内容的条数.  

[java] view plain copy

1. Object instantiateItem(View container, int position)  

2. 始化ItemView.  

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

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

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

[java] view plain copy

1. package com.tutor.viewpager;  

2.

3. import org.json.JSONException;  

4. import org.json.JSONObject;  

5.

6. import android.content.Context;  

7. import android.graphics.Bitmap;  

8. import android.util.AttributeSet;  

9. import android.view.LayoutInflater;  

10. import android.view.View;  

11. import android.widget.FrameLayout;  

12. import android.widget.ImageView;  

13. import android.widget.TextView;  

14.

15. /** 

16. * @author frankiewei 

17. * 相册的ItemView,自定义View.方便复用. 

18. */  

19. public class ViewPagerItemView extends FrameLayout {  

20.

21.    /** 

22.     * 图片的ImageView. 

23.     */  

24.    private ImageView mAlbumImageView;  

25.      

26.    /** 

27.     * 图片名字的TextView. 

28.     */  

29.    private TextView mALbumNameTextView;  

30.      

31.    /** 

32.     * 图片的Bitmap. 

33.     */  

34.    private Bitmap mBitmap;  

35.      

36.    /** 

37.     * 要显示图片的JSONOBject类. 

38.     */  

39.    private JSONObject mObject;  

40.      

41.      

42.    public ViewPagerItemView(Context context){  

43.        super(context);  

44.        setupViews();  

45.    }  

46.      

47.    public ViewPagerItemView(Context context, AttributeSet attrs) {  

48.        super(context, attrs);  

49.        setupViews();  

50.    }  

51.      

52.    //初始化View.  

53.    private void setupViews(){  

54.        LayoutInflater inflater = LayoutInflater.from(getContext());  

55.        View view = inflater.inflate(R.layout.viewpager_itemview, null);  

56.          

57.        mAlbumImageView = (ImageView)view.findViewById(R.id.album_imgview);  

58.        mALbumNameTextView = (TextView)view.findViewById(R.id.album_name);   

59.        addView(view);  

60.    }  

61.

62.    /** 

63.     * 填充数据,共外部调用. 

64.     * @param object 

65.     */  

66.    public void setData(JSONObject object){  

67.        this.mObject = object;  

68.        try {  

69.            int resId = object.getInt("resid");  

70.            String name = object.getString("name");  

71.            //实战中如果图片耗时应该令其一个线程去拉图片异步,不然把UI线程卡死.  

72.            mAlbumImageView.setImageResource(resId);  

73.            mALbumNameTextView.setText(name);  

74.        } catch (JSONException e) {  

75.            e.printStackTrace();  

76.        }  

77.          

78.    }  

79.          

80.    /** 

81.     * 这里内存回收.外部调用. 

82.     */  

83.    public void recycle(){  

84.        mAlbumImageView.setImageBitmap(null);  

85.        if ((this.mBitmap == null) || (this.mBitmap.isRecycled()))  

86.            return;  

87.        this.mBitmap.recycle();  

88.        this.mBitmap = null;  

89.    }  

90.      

91.      

92.    /** 

93.     * 重新加载.外部调用. 

94.     */  

95.    public void reload(){  

96.        try {  

97.            int resId = mObject.getInt("resid");  

98.            //实战中如果图片耗时应该令其一个线程去拉图片异步,不然把UI线程卡死.  

99.            mAlbumImageView.setImageResource(resId);  

100.        }catch (JSONException e) {  

101.            e.printStackTrace();  

102.        }  

103.    }  

104.      

105. }  

 

其中ViewPagerItemView使用的xml文件viewpager_itemView.xml代码如下:

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  

2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  

3.    android:layout_width="fill_parent"  

4.    android:layout_height="fill_parent"  

5.    >  

6.      

7.    <ImageView   

8.        android:id="@+id/album_imgview"  

9.        android:layout_width="fill_parent"  

10.        android:layout_height="fill_parent"  

11.        android:contentDescription="@string/app_name"  

12.        android:scaleType="fitXY"  

13.        />  

14.      

15.    <TextView  

16.        android:id="@+id/album_name"  

17.        android:layout_width="wrap_content"  

18.        android:layout_height="wrap_content"  

19.        android:layout_gravity="bottom|center_horizontal"   

20.        android:textColor="#B2191919"  

21.        />  

22. </FrameLayout>  

 

第三步:新建一个ViewPagerAdapter.java继承与PagerAdapter,代码如下:

[java] view plain copy

1. package com.tutor.viewpager;  

2.

3. import java.util.HashMap;  

4.

5. import org.json.JSONArray;  

6. import org.json.JSONException;  

7. import org.json.JSONObject;  

8.

9. import android.content.Context;  

10. import android.os.Parcelable;  

11. import android.support.v4.view.PagerAdapter;  

12. import android.support.v4.view.ViewPager;  

13. import android.view.View;  

14.

15. /** 

16. * @author frankiewei 

17. * 相册的适配器. 

18. */  

19. public class ViewPagerAdapter extends PagerAdapter {  

20.

21.    /** 

22.     * 上下文 

23.     */  

24.    private Context mContext;  

25.      

26.    /** 

27.     * 数据源,这里是JSONARRAY 

28.     */  

29.    private JSONArray mJsonArray;  

30.      

31.    /** 

32.     * Hashmap保存相片的位置以及ItemView. 

33.     */  

34.    private HashMap<Integer, ViewPagerItemView> mHashMap;  

35.      

36.    public ViewPagerAdapter(Context context,JSONArray arrays) {  

37.        this.mContext = context;  

38.        this.mJsonArray = arrays;  

39.        mHashMap = new HashMap<Integer, ViewPagerItemView>();  

40.    }  

41.      

42.    //这里进行回收,当我们左右滑动的时候,会把早期的图片回收掉.  

43.    @Override  

44.    public void destroyItem(View container, int position, Object object) {  

45.        ViewPagerItemView itemView = (ViewPagerItemView)object;  

46.        itemView.recycle();  

47.    }  

48.      

49.    @Override  

50.    public void finishUpdate(View view) {  

51.

52.    }  

53.

54.    //这里返回相册有多少条,和BaseAdapter一样.  

55.    @Override  

56.    public int getCount() {  

57.        return mJsonArray.length();  

58.    }  

59.

60.    //这里就是初始化ViewPagerItemView.如果ViewPagerItemView已经存在,  

61.    //重新reload,不存在new一个并且填充数据.  

62.    @Override  

63.    public Object instantiateItem(View container, int position) {     

64.        ViewPagerItemView itemView;  

65.        if(mHashMap.containsKey(position)){  

66.            itemView = mHashMap.get(position);  

67.            itemView.reload();  

68.        }else{  

69.            itemView = new ViewPagerItemView(mContext);  

70.            try {  

71.                JSONObject dataObj = (JSONObject) mJsonArray.get(position);  

72.                itemView.setData(dataObj);  

73.            } catch (JSONException e) {  

74.                e.printStackTrace();  

75.            }  

76.            mHashMap.put(position, itemView);  

77.            ((ViewPager) container).addView(itemView);  

78.        }  

79.          

80.        return itemView;  

81.    }  

82.

83.    @Override  

84.    public boolean isViewFromObject(View view, Object object) {  

85.        return view == object;  

86.    }  

87.

88.    @Override  

89.    public void restoreState(Parcelable arg0, ClassLoader arg1) {  

90.          

91.    }  

92.

93.    @Override  

94.    public Parcelable saveState() {  

95.        return null;  

96.    }  

97.

98.    @Override  

99.    public void startUpdate(View view) {  

100.

101.    }  

102. }  

 

第四步:修改主Activity类ViewPagerDemoActivity.java代码如下:

[java] view plain copy

1. package com.tutor.viewpager;  

2.

3. import org.json.JSONArray;  

4. import org.json.JSONException;  

5. import org.json.JSONObject;  

6.

7. import android.app.Activity;  

8. import android.os.Bundle;  

9. import android.support.v4.view.ViewPager;  

10.

11. /** 

12. * @author frankiewei 

13. * ViewPager控件使用的Demo. 

14. */  

15. public class ViewPagerDemoActivity extends Activity {  

16.      

17.    /** 

18.     * 这里定义了相册的总数100条. 

19.     */  

20.    private static final int ALBUM_COUNT = 100;  

21.      

22.    /** 

23.     * 相册的资源,实战开发中都是网络数据或者本地相册. 

24.     */  

25.    private static final int ALBUM_RES[] = {  

26.        R.drawable.test1,R.drawable.test2,R.drawable.test3,  

27.        R.drawable.test4,R.drawable.test5,R.drawable.test6  

28.    };  

29.      

30.    private ViewPager mViewPager;  

31.      

32.    /** 

33.     * 适配器. 

34.     */  

35.    private ViewPagerAdapter mViewPagerAdapter;  

36.      

37.    /** 

38.     * 数据源. 

39.     */  

40.    private JSONArray mJsonArray;  

41.      

42.      

43.    @Override  

44.    public void onCreate(Bundle savedInstanceState) {  

45.        super.onCreate(savedInstanceState);  

46.        setContentView(R.layout.main);  

47.          

48.        setupViews();  

49.    }  

50.      

51.    private void setupViews(){      

52.        //初始化JSonArray,给ViewPageAdapter提供数据源用.  

53.        mJsonArray = new JSONArray();  

54.        for(int i = 0;i<ALBUM_COUNT; i++){  

55.            JSONObject object = new JSONObject();  

56.            try {  

57.                object.put("resid", ALBUM_RES[i % ALBUM_RES.length]);  

58.                object.put("name", "Album " + i);  

59.                mJsonArray.put(object);  

60.            } catch (JSONException e) {  

61.                e.printStackTrace();  

62.            }  

63.              

64.        }         

65.        mViewPager = (ViewPager)findViewById(R.id.viewpager);  

66.        mViewPagerAdapter = new ViewPagerAdapter(this, mJsonArray);  

67.        mViewPager.setAdapter(mViewPagerAdapter);  

68.    }  

69. }  

其中main.xml布局代码如下:

[java] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  

3.    android:layout_width="fill_parent"  

4.    android:layout_height="fill_parent"  

5.    android:orientation="vertical" >  

6.

7.    <android.support.v4.view.ViewPager  

8.        android:id="@+id/viewpager"  

9.        android:layout_width="fill_parent"  

10.        android:layout_height="fill_parent"  

11.         />  

12.

13. </LinearLayout>  

 

第五步运行查看效果:

     

                     运行效果1        

                     运行效果2

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

  • 北京

    010-82600385/6

    北京市海淀区西三旗悦秀路北京明园大学校内

  • 上海

    021-54485127

    上海市徐汇区漕溪路250号银海大楼11层

  • 深圳

    0755-25590506

    深圳市龙华新区人民北路美丽AAA大厦15层

  • 成都

    028-85405115

    成都武侯区科华北路99号科华大厦2层

  • 南京

    025-86551900

    南京市白下区汉中路185号鸿运大厦11层

  • 武汉

    027-87804688

    武汉工程大学卓刀泉校区科技孵化器大楼11层

  • 西安

    029-88756251

    西安市高新区高新1路12号天公大厦3层

  • 广州

    020-38342087

    广州市天河软件园柯木塱园5栋三层

  • 沈阳

    024-24349000

    沈阳市沈河区北顺城路137号锦峰大厦7层

  • 济南

    0531-88898293

    济南市高新区舜华路三庆世纪财富中心B3座6层

  • 重庆

    023-68064704

    重庆市九龙坡区渝州路87号双薪时代九楼

  • 长沙

    15010390966

    长沙市开福区芙蓉中路海东青大厦B座11楼

Copyright © 2004-2017 华清远见教育集团 版权所有,沪ICP备10038863号-3,京公海网安备110108001117号