Android ViewPager相册横向移动的实现方法

当我们第一次下载qq并且打开的时候，会有一个新手引导，引导是几张图片，再加上一些文字说明，向右滑动，直到结束，今天一大早起来研究了一下关于此种效果的实现之viewpager控件。

下面这个例子将用viewpager实现横向移动相册，viewpager有一个对应的pageradapter，用于绑定数据；我们需要继承此类并实现自己的功能。

1、首先定义一个显示项所需要使用的数据对象imageitem

复制代码 代码如下:

public class imageitem {
 private int id;// 资源id
 private string name;// 显示的名称
 public string getname() {
  return name;
 }
 public void setname(string name) {
  this.name = name;
 }
 public imageitem(int id, string name) {
  super();
  this.id = id;
  this.name = name;
 }
 public int getid() {
  return id;
 }
 public void setid(int id) {
  this.id = id;
 }
}

 

2、viewpager中每一面为一个item，所以在layout目录下定义一个viewpager的每一页的item，名为pageritem.xml

复制代码 代码如下:

<framelayout xmlns:android="http://schemas.android.com/apk/res/android"
　　android:layout_width="match_parent"
　　android:layout_height="match_parent" >

 

　　<imageview
　　　　android:id="@+id/imgview"
　　　　android:layout_width="fill_parent"
　　　　android:layout_height="fill_parent"
　　　　android:contentdescription="@string/app_name"
　　　　android:scaletype="fitxy" />

　　<textview
　　　　android:id="@+id/textview"
　　　　android:layout_width="wrap_content"
　　　　android:layout_height="wrap_content"
　　　　android:layout_gravity="bottom|center_horizontal" />

</framelayout>

 

3、新建一个java文件，对应viewpager的每一项item

复制代码 代码如下:

public class viewpageritem extends framelayout {
 private imageview imageview;// 显示图片的imageview
 private textview textview;
 private bitmap bitmap;// 图片对应的bitmap
 private imageitem imageitem;// 每一个图片项对象

 

 public viewpageritem(context context) {
  super(context);
  setviews();
 }
 public viewpageritem(context context, attributeset attrs) {
  super(context, attrs);
  setviews();
 }

 public void setdata(imageitem item) {// 用imageitem填充数据
  this.imageitem = item;
  int resid = item.getid();
  string name = item.getname();
  imageview.setimageresource(resid);
  textview.settext(name);
 }

 public void reload() {// 重新载入数据
  int resid = imageitem.getid();
  imageview.setimageresource(resid);
 }

 public void recycle() {// 回收数据
  imageview.setimagebitmap(null);
  if (this.bitmap == null || this.bitmap.isrecycled()) {
   return;
  }
  this.bitmap.recycle();
  this.bitmap = null;
 }

 public void setviews() {
  layoutinflater infalter = layoutinflater.from(getcontext());
  view view = infalter.inflate(r.layout.pageritem, null);
  textview = (textview) view.findviewbyid(r.id.textview);
  imageview = (imageview) view.findviewbyid(r.id.imgview);

  addview(view);
 }
}

 

4、新建一个数据填充器pageritemadapter，继承自pageradapter

复制代码 代码如下:

public class pageritemadapter extends pageradapter {
 private context context;
 private imageitem[] image;

 

 public pageritemadapter(context context, imageitem[] image) {
  this.context = context;
  this.image = image;
  hashmap = new hashmap<integer, viewpageritem>();
 }

 private hashmap<integer, viewpageritem> hashmap;// 保存相片的id以及对应的viewpageritem

 @override
 public int getcount() {
  return image.length;
 }

 @override
 public boolean isviewfromobject(view arg0, object arg1) {
  return arg0 == arg1;
 }

 @override
 public void finishupdate(viewgroup container) {
  super.finishupdate(container);
 }

 @override// 初始化一个viewpageritem，如果已经存在就重新载入，没有的话new一个
 public object instantiateitem(viewgroup container, int position) {
  viewpageritem item;
  if (hashmap.containskey(position)) {
   item = hashmap.get(position);
   item.reload();
  } else {
   item = new viewpageritem(context);
   imageitem itemimg = image[position];
   item.setdata(itemimg);
   hashmap.put(position, item);
   ((viewpager) container).addview(item);
  }
  return item;
 }

 @override// 当我们左右滑动图片的时候会将图片回收掉
 public void destroyitem(view container, int position, object object) {
  viewpageritem item = (viewpageritem) object;
  item.recycle();
 }
}

 

5、在main.xml文件中添加一个viewpager控件

复制代码 代码如下:

<android.support.v4.view.viewpager
　　android:id="@+id/viewpager"
　　android:layout_width="fill_parent"
　　android:layout_height="fill_parent" />

 

6、修改mainactivity如下：

复制代码 代码如下:

public class mainactivity extends activity {
 private final static int res[] = { r.drawable.p1, r.drawable.p2 };// p1,p2为drawable文件夹下的两张图片
 private viewpager viewpager;
 private pageritemadapter adapter;
 private imageitem[] item;

 

 private void setview(){
  item = new imageitem[2];
  item[0] = new imageitem(res[0], "page1");
  item[1] = new imageitem(res[1], "page2");
  viewpager = (viewpager) findviewbyid(r.id.viewpager);
  adapter = new pageritemadapter(getapplicationcontext(), item);
  viewpager.setadapter(adapter);
 }

 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  setcontentview(r.layout.activity_main);
  setview();
 }
}

 

 运行程序，左右滑动屏幕出现如下效果！