Android學習筆記26：圖片切換控制項ImageSwitcher的使用

　　在Windows作業系統中，要查看多張圖片，可以通過使用“Windows相片檢視器”在“上一張”和“下一張”之間切換，進行多張圖片的瀏覽。

　　在Android中，可以通過使用圖片切換控制項ImageSwitcher來實現瀏覽多張圖片的功能。下面我們就通過一個實際的例子來說明圖片切換控制項ImageSwitcher的使用方法。

 

1.介面布局

　　在xml布局檔案中，我們使用LinearLayout對整個介面進行垂直布局。在介面的頂端設定了一個水平置中的ImageSwitcher控制項，用來顯示多張圖片。在ImageSwitcher控制項的下面使用LinearLayout水平布局設定四個ImageButton按鈕，在點擊這些按鈕時分別用於實現右旋圖片、顯示上一張圖片、顯示下一張圖片、左旋圖片效果。整個布局檔案很簡單，具體源碼如下：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2     xmlns:tools="http://schemas.android.com/tools" 3     android:orientation="vertical" 4     android:layout_width="match_parent" 5     android:layout_height="match_parent" > 6  7     <ImageSwitcher 8         android:id="@+id/imageSwitcher" 9         android:layout_marginTop="5dp"10         android:layout_gravity="center"11         android:layout_width="wrap_content"12         android:layout_height="wrap_content"    ></ImageSwitcher>13 14     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"15         xmlns:tools="http://schemas.android.com/tools"16         android:orientation="horizontal"17         android:layout_marginTop="5dp"18         android:layout_width="match_parent"19         android:layout_height="match_parent"     >20     21         <!-- 右旋箭頭 -->22         <ImageButton23             android:id="@+id/rightrotatearrow"24             android:layout_marginLeft="30dp"25             android:layout_width="wrap_content"26             android:layout_height="wrap_content"27             android:src="@drawable/rightrotatearrow"    ></ImageButton>28         29         <!-- 前一個箭頭 -->30         <ImageButton31             android:id="@+id/forwardarrow"32             android:layout_width="wrap_content"33             android:layout_height="wrap_content"34             android:src="@drawable/forwardarrow"    ></ImageButton>35     36         <!-- 下一個箭頭 -->37         <ImageButton38             android:id="@+id/nextarrow"39             android:layout_width="wrap_content"40             android:layout_height="wrap_content"41             android:src="@drawable/nextarrow"    ></ImageButton>42         43         <!-- 左旋箭頭 -->44         <ImageButton45             android:id="@+id/liftrotatearrow"46             android:layout_width="wrap_content"47             android:layout_height="wrap_content"48             android:src="@drawable/liftrotatearrow"    ></ImageButton>49         50     </LinearLayout>51     52 </LinearLayout>

　　程式運行後的效果1所示。

圖1 主介面

 

2.ViewFactory介面

　　要將圖片顯示在ImageSwitcher控制項中，必須為ImageSwitcher類設定一個ViewFactory，用來將顯示的圖片和父視窗區分開來。這可以通過如下方法來實現：

　　mImageSwitcher.setFactory();

　　此外，我們還需要實現ViewSwitcher.ViewFactory介面中的makeView()抽象方法，通過該方法可以返回一個ImageView對象，所有圖片都將通過該ImageView對象來進行顯示。具體實現方法如下：

1     /*2      * Function   :    makeView()3      * Describe      :      將所有圖片通過ImageView來顯示4      * Author       :    部落格園-依舊淡然5      */6     public View makeView() {7         return new ImageView(this);8     }

 

3.儲存圖片資源

　　在《Android學習筆記25：畫廊控制項Gallery的使用》（http://www.cnblogs.com/menlsh/archive/2013/02/26/2934434.html）中，我們是通過使用一個繼承自BaseAdapter類的衍生類別ImageAdapter來儲存圖片資源的。 

　　在該執行個體中，我們將建立一個ArrayList對象來儲存圖片資源，方法如下：

　　List<Drawable> list = new ArrayList<Drawable>();

　　然後，可以使用list.add()方法將圖片資源載入到該ArrayList對象中，具體方法如下：

1     //將圖片資源載入到ArrayList中2     list.add(getResources().getDrawable(R.drawable.image1));3     list.add(getResources().getDrawable(R.drawable.image2));4     list.add(getResources().getDrawable(R.drawable.image3));5     list.add(getResources().getDrawable(R.drawable.image4));

　　在該執行個體中，我們往ArrayList中載入了4張資源圖片。

 

4.擷取圖片資源

　　當我們點擊“上一張”和“下一張”按鈕時，需要擷取圖片資源進行顯示，這該如何?呢？

　　通過查看ImageSwitcher的API協助文檔（http://developer.android.com/reference/android/widget/ImageSwitcher.html），我們可以看出向ImageSwitcher載入圖片有以下三種方式：

　　（1）public void setImageDrawable(Drawable drawable);

　　（2）public void setImageResource(int resid);

　　（3）public void setImageURI(Uri uri);

　　其中，setImageDrawable()方法通過Drawable對象來擷取圖片資源；setImageResource()方法通過圖片資源Id來擷取圖片資源；setImageURI()方法通過圖片的Uri路徑來擷取圖片資源。

　　在該執行個體中，我們選擇使用setImageDrawable()方法來擷取圖片資源，這也就是為什麼我們往ArrayList對象中儲存圖片時使用Drawable對象的原因。

 

5.按鍵處理

　　在該執行個體中，我們還需要實現OnClickListener介面的onClick()方法，對四個按鍵進行事件監聽，具體實現方法如下：

 1     /* 2      * Function   :    事件監聽處理 3      * Author       :    部落格園-依舊淡然 4      */ 5     public void onClick(View v) { 6         switch (v.getId()) { 7         case R.id.forwardarrow:           //向前箭頭按鈕按鍵處理 8             index--; 9             if (index < 0) {10                 index = list.size() - 1;11             }12             mImageSwitcher.setImageDrawable(list.get(index));13             break;14         case R.id.nextarrow:              //向後箭頭按鈕按鍵處理15             index++;16             if (index >= list.size()) {17                 index = 0;18             }19             mImageSwitcher.setImageDrawable(list.get(index));20             break;21         case R.id.liftrotatearrow:        //左旋箭頭按鈕按鍵處理22             //TO DO23             break;24         case R.id.rightrotatearrow:    　　//右旋箭頭按鈕按鍵處理25             //TO DO26             break;27         }28     }

　　其中，變數index用於對圖片進行索引，實現圖片的迴圈顯示，即當顯示到最後一張圖片時，再次點擊“下一張”，則將圖片索引號重設為0，然後重新顯示第一張圖片；當顯示第一張圖片時，再次點擊“上一張”，則將圖片的索引號重設為最大，然後顯示最後一張圖片。

　　在該執行個體中，並未對“左旋”和“右旋”按鈕進行按鍵處理。要實現圖片的旋轉效果，請見博文《Android學習筆記11：映像的平移、旋轉及縮放》（http://www.cnblogs.com/menlsh/archive/2012/12/02/2798802.html）。