Android之ImageSwitcher,Gallery用法

今天在做一個軟體介面時用到了ImageSwitcher和Gallery控制項，在看API時，感覺上面的例子講的不是很具體，效率並不高。在這裡我就以一個圖片瀏覽功能來具體說明這兩個控制項的用法。
首先看運行效果：

 
在這裡圖片我用的是API中的圖片。先說下這個圖片瀏覽的功能吧，首先，它要實現圖片的切換，當點擊上面的小圖時，下方會出現對象的大圖，其次就是實現中最上面的樣式，即一個圖片和一個文本。下來我們還要實現起始位置置中，滑動小圖的速率的控制，最上面小圖的無限迴圈等功能。下面我就將具體實現代碼附下，供大家參考。
main.xml：
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical">
 6     <cn.yj3g.gallery.MyGallery android:id="@+id/gallery"
 7         android:background="#55000000"
 8         android:layout_width="match_parent"
 9         android:layout_height="80dp"
10         android:gravity="center_vertical"
11         android:spacing="2dp"
12     />
13     <ImageSwitcher android:id="@+id/switcher"
14         android:layout_width="match_parent"
15         android:layout_height="match_parent"
16         android:layout_weight="1"
17     />
18 </LinearLayout>
在上面我是自訂視圖，引用自己定義的一個Gallery，在這個Gallery中我重新設定的滑動的速率，讓它滑動速度放慢，下面是我自訂的Gallery 代碼：
MyGallery.java：
 1 package cn.yj3g.gallery;
 2
 3 import android.content.Context;
 4 import android.util.AttributeSet;
 5 import android.view.MotionEvent;
 6 import android.widget.Gallery;
 7
 8 public class MyGallery extends Gallery {
 9     public MyGallery(Context context, AttributeSet attrs) {
10         super(context, attrs);
11     }
12     /**
13      * 重寫onFling方法，將滑動的速率降低
14      */
15     @Override
16     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
17         return super.onFling(e1, e2, velocityX/3, velocityY);
18     }
19 }
下面是在定義gallery布局檔案的代碼：
gallery_item.xml：
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical" android:layout_width="match_parent"
 4     android:layout_height="match_parent">
 5     <ImageView android:id="@+id/item_gallery_image"
 6         android:layout_width="fill_parent"
 7         android:layout_height="fill_parent"
 8         android:layout_weight="1"
 9         android:scaleType="fitXY"/>
10     <TextView android:id="@+id/item_gallery_text"
11         android:layout_width="fill_parent"
12         android:layout_height="wrap_content"
13         android:gravity="center"/>
14
15 </LinearLayout>
下面就是核心實現代碼：
PictrueChangeActivity：
  1 package cn.yj3g.PictrueChange;
  2
  3 import java.util.HashMap;
  4
  5 import android.app.Activity;
  6 import android.content.Context;
  7 import android.content.res.TypedArray;
  8 import android.os.Bundle;
  9 import android.util.Log;
 10 import android.view.LayoutInflater;
 11 import android.view.View;
 12 import android.view.ViewGroup;
 13 import android.view.Window;
 14 import android.view.animation.AnimationUtils;
 15 import android.widget.AdapterView;
 16 import android.widget.BaseAdapter;
 17 import android.widget.Gallery;
 18 import android.widget.Gallery.LayoutParams;
 19 import android.widget.ImageSwitcher;
 20 import android.widget.ImageView;
 21 import android.widget.TextView;
 22 import android.widget.ViewSwitcher;
 23
 24 public class PictrueChangeActivity extends Activity implements AdapterView.OnItemClickListener,
 25         ViewSwitcher.ViewFactory {
 26     //定義ImageSwitcher類對象
 27     private ImageSwitcher mSwitcher;
 28     //文本資源
 29     private String[] titles = {"標題1","標題2","標題3","標題4","標題5","標題6","標題7","標題8",};
 30     //大圖資源
 31     private Integer[] mThumbIds = { R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2,
 32             R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6,
 33             R.drawable.sample_7 };
 34     //大圖對應的小圖資源
 35     private Integer[] mImageIds = { R.drawable.sample_thumb_0, R.drawable.sample_thumb_1,
 36             R.drawable.sample_thumb_2, R.drawable.sample_thumb_3, R.drawable.sample_thumb_4,
 37             R.drawable.sample_thumb_5, R.drawable.sample_thumb_6, R.drawable.sample_thumb_7 };
 38     @Override
 39     public void onCreate(Bundle savedInstanceState) {
 40         super.onCreate(savedInstanceState);
 41         //設定表單無標題
 42         requestWindowFeature(Window.FEATURE_NO_TITLE);
 43         setContentView(R.layout.main);
 44         mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
 45         mSwitcher.setFactory(this);
 46         //設定圖片的滑動效果
 47         mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_in));
 48         mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this, android.R.anim.fade_out));
 49
 50         Gallery g = (Gallery) findViewById(R.id.gallery);
 51         //設定Gallery的適配器
 52         g.setAdapter(new ImageAdapter(this, mThumbIds.length));
 53         //Gallery中每個條目的點擊事件監聽
 54         g.setOnItemClickListener(this);
 55         //設定預設其實位置為第二張圖片
 56         g.setSelection(1);
 57     }
 58
 59     public void onItemSelected(AdapterView parent, View v, int position, long id) {
 60         mSwitcher.setImageResource(mThumbIds[position % mImageIds.length]);
 61     }
 62     public void onNothingSelected(AdapterView parent) {
 63     }
 64    
 65     @Override
 66     public View makeView() {
 67         ImageView i = new ImageView(this);
 68         i.setBackgroundColor(0xFF000000);
 69         i.setScaleType(ImageView.ScaleType.FIT_CENTER);
 70         i.setLayoutParams(new ImageSwitcher.LayoutParams(LayoutParams.MATCH_PARENT,
 71                 LayoutParams.MATCH_PARENT));
 72         return i;
 73     }
 74     //Gallery的適配器
 75     public class ImageAdapter extends BaseAdapter {
 76         private int mGalleryItemBackground;
 77         //定義map儲存划過的位置
 78         private HashMap<Integer, View> mViewMaps;
 79         private int mCount;
 80         //定義布局載入器
 81         private LayoutInflater mInflater;
 82
 83         public ImageAdapter(Context c, int count) {
 84             this.mCount = count;
 85             mViewMaps = new HashMap<Integer, View>(count);
 86             mInflater = LayoutInflater.from(PictrueChangeActivity.this);
 87             //定義圖片的背景樣式
 88             TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
 89             mGalleryItemBackground = a.getResourceId(
 90                     R.styleable.Gallery1_android_galleryItemBackground, 0);
 91             //定義可以重複使用.可回收
 92             a.recycle();
 93         }
 94
 95         public int getCount() {
 96             //設定迴圈的次數
 97             return Integer.MAX_VALUE;
 98         }
 99
100         public Object getItem(int position) {
101             return position;
102         }
103
104         public long getItemId(int position) {
105             return position;
106         }
107
108         public View getView(int position, View convertView, ViewGroup parent) {
109             Log.v("TAG", "getView() position=" + position + " convertView=" + convertView);
110             View viewGroup = mViewMaps.get(position%mCount);
111             ImageView imageView = null;
112             TextView textView = null;
113             if(viewGroup==null) {
114                 viewGroup = mInflater.inflate(R.layout.gallery_item, null);
115                 imageView = (ImageView) viewGroup.findViewById(R.id.item_gallery_image);
116                 textView = (TextView) viewGroup.findViewById(R.id.item_gallery_text);
117                 imageView.setBackgroundResource(mGalleryItemBackground);
118                 mViewMaps.put(position%mCount, viewGroup);
119                 imageView.setImageResource(mImageIds[position % mImageIds.length]);
120                 textView.setText(titles[position % mImageIds.length]);
121             }
122            
123             return viewGroup;
124         }
125     }
126     //記錄當前位置
127     private int curruntPos = -1;
128     @Override
129     public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
130         if (curruntPos == position) {
131             return;
132         } else
133             curruntPos = position;
134         mSwitcher.setImageResource(mThumbIds[position % mThumbIds.length]);
135     }
136 }
這裡要載入一個背景檔案，放在values目錄下，檔案名稱為attrs.xml，代碼如下：
 1 <?xml version="1.0" encoding="utf-8"?>
 2 <resources>
 3
 4     <!-- These are the attributes that we want to retrieve from the theme
 5          in view/Gallery1.java -->
 6     <declare-styleable name="Gallery1">
 7         <attr name="android:galleryItemBackground" />
 8     </declare-styleable>
 9  
10 </resources>
這樣顯示的圖片就有一個相框一樣的邊框。
在上面的代碼中，和API中不同的是做了四點改進：
1.實現滑動可以無限滑動，就是在上面的getCount（）中，返回的是一個Integer.MAX_VALUE，這樣可以做到無限滑動。
2.提高在滑動時大圖的顯示效率。就是在上面，我自訂了一個Map，將滑動過的位置全部記錄下來，等到下次滑到這個位置時，就不必再去載入圖片了，類似於緩衝。這樣提高了效率。
3.在點擊事件中，如果重複點擊同一張圖片，不會去載入圖片。在這裡我設定了一個標記位置，如果標記位置和當前位置一樣，那就不去載入圖片。
4.設定起始位置為第二位，這樣初始介面比較美觀，顯示的圖片兩邊都有圖片。

 摘自：青春流水指間