快捷導(dǎo)航

Android ViewPager相冊(cè)橫向移動(dòng)的實(shí)現(xiàn)方法

更新時(shí)間：2013年04月18日 17:47:00 作者：

本篇文章小編為大家介紹，Android ViewPager相冊(cè)橫向移動(dòng)的實(shí)現(xiàn)方法。需要的朋友參考下

當(dāng)我們第一次下載QQ并且打開(kāi)的時(shí)候，會(huì)有一個(gè)新手引導(dǎo)，引導(dǎo)是幾張圖片，再加上一些文字說(shuō)明，向右滑動(dòng)，直到結(jié)束，今天一大早起來(lái)研究了一下關(guān)于此種效果的實(shí)現(xiàn)之ViewPager控件。

下面這個(gè)例子將用ViewPager實(shí)現(xiàn)橫向移動(dòng)相冊(cè)，ViewPager有一個(gè)對(duì)應(yīng)的PagerAdapter，用于綁定數(shù)據(jù)；我們需要繼承此類并實(shí)現(xiàn)自己的功能。

1、首先定義一個(gè)顯示項(xiàng)所需要使用的數(shù)據(jù)對(duì)象ImageItem

復(fù)制代碼代碼如下:

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中每一面為一個(gè)Item，所以在layout目錄下定義一個(gè)ViewPager的每一頁(yè)的Item，名為pageritem.xml

復(fù)制代碼代碼如下:

</FrameLayout>

3、新建一個(gè)java文件，對(duì)應(yīng)ViewPager的每一項(xiàng)Item

復(fù)制代碼代碼如下:

public class ViewpagerItem extends FrameLayout {
private ImageView imageview;// 顯示圖片的ImageView
private TextView textview;
private Bitmap bitmap;// 圖片對(duì)應(yīng)的Bitmap
private ImageItem imageitem;// 每一個(gè)圖片項(xiàng)對(duì)象

public ViewpagerItem(Context context) {
  super(context);
  setViews();
}
public ViewpagerItem(Context context, AttributeSet attrs) {
  super(context, attrs);
  setViews();
}

public void setData(ImageItem item) {// 用ImageItem填充數(shù)據(jù)
  this.imageitem = item;
  int resid = item.getId();
  String name = item.getName();
  imageview.setImageResource(resid);
  textview.setText(name);
}

public void reload() {// 重新載入數(shù)據(jù)
int resid = imageitem.getId();
imageview.setImageResource(resid);
}

public void recycle() {// 回收數(shù)據(jù)
  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、新建一個(gè)數(shù)據(jù)填充器PagerItemAdapter，繼承自PagerAdapter

復(fù)制代碼代碼如下:

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以及對(duì)應(yīng)的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// 初始化一個(gè)ViewpagerItem，如果已經(jīng)存在就重新載入，沒(méi)有的話new一個(gè)
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// 當(dāng)我們左右滑動(dòng)圖片的時(shí)候會(huì)將圖片回收掉
public void destroyItem(View container, int position, Object object) {
ViewpagerItem item = (ViewpagerItem) object;
item.recycle();
}
}

5、在main.xml文件中添加一個(gè)ViewPager控件

復(fù)制代碼代碼如下:

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

6、修改MainActivity如下：

復(fù)制代碼代碼如下:

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();
}
}

運(yùn)行程序，左右滑動(dòng)屏幕出現(xiàn)如下效果！