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

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

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

 

1.界面布局

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_marginTop="5dp"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"    ></ImageSwitcher>

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:orientation="horizontal"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"     >
    
        <!-- 右旋箭頭 -->
        <ImageButton
            android:id="@+id/rightrotatearrow"
            android:layout_marginLeft="30dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/rightrotatearrow"    ></ImageButton>
        
        <!-- 前一個箭頭 -->
        <ImageButton
            android:id="@+id/forwardarrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/forwardarrow"    ></ImageButton>
    
        <!-- 下一個箭頭 -->
        <ImageButton
            android:id="@+id/nextarrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/nextarrow"    ></ImageButton>
        
        <!-- 左旋箭頭 -->
        <ImageButton
            android:id="@+id/liftrotatearrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/liftrotatearrow"    ></ImageButton>
        
    </LinearLayout>
    
</LinearLayout>

　　程序運行后的效果如圖1所示。

圖1 主界面

 

2.ViewFactory接口

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

　　mImageSwitcher.setFactory();

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

    /*
     * Function   :    makeView()
     * Describe      :      將所有圖片通過ImageView來顯示
     * Author       :    博客園-依舊淡然
     */
    public View makeView() {
        return new ImageView(this);
    }

 

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對象中，具體方法如下：

    //將圖片資源加載到ArrayList中
    list.add(getResources().getDrawable(R.drawable.image1));
    list.add(getResources().getDrawable(R.drawable.image2));
    list.add(getResources().getDrawable(R.drawable.image3));
    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()方法，對四個按鍵進行事件監聽，具體實現方法如下：

    /*
     * Function   :    事件監聽處理
     * Author       :    博客園-依舊淡然
     */
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.forwardarrow:           //向前箭頭按鈕按鍵處理
            index--;
            if (index < 0) {
                index = list.size() - 1;
            }
            mImageSwitcher.setImageDrawable(list.get(index));
            break;
        case R.id.nextarrow:              //向后箭頭按鈕按鍵處理
            index++;
            if (index >= list.size()) {
                index = 0;
            }
            mImageSwitcher.setImageDrawable(list.get(index));
            break;
        case R.id.liftrotatearrow:        //左旋箭頭按鈕按鍵處理
            //TO DO
            break;
        case R.id.rightrotatearrow:    　　//右旋箭頭按鈕按鍵處理
            //TO DO
            break;
        }
    }

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

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