Android ViewPager相簿橫向移動的實現方法

Android ViewPager相簿橫向移動的實現方法
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

當我們第一次下載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();
 }
}

 執行程式,左右滑動螢幕出現如下效果!

您可能感興趣的文章:

Android啟動引導頁使用ViewPager實現Android開發實戰之漂亮的ViewPager引導頁Android控制元件ViewPager實現帶有動畫的引導頁Android UI設計與開發之使用ViewPager實現歡迎引導頁面Android UI設計與開發之ViewPager仿微信引導介面以及動畫效果Android UI設計與開發之ViewPager介紹和簡單實現引導介面Android利用ViewPager實現使用者引導介面效果的方法Android利用ViewPager實現滑動廣告板例項原始碼android教程viewpager自動迴圈和手動迴圈Android開發實現的ViewPager引導頁功能(動態載入指示器)詳解

相關文章

Android 開發 最新文章