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）。