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         <ImageButton
23             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         <ImageButton
31             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         <ImageButton
38             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         <ImageButton
45             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 DO
23             break;
24         case R.id.rightrotatearrow:    　　//右旋箭头按钮按键处理
25             //TO DO
26             break;
27         }
28     }

　　其中，变量index用于对图片进行索引，实现图片的循环显示，即当显示到最后一张图片时，再次点击“下一张”，则将图片索引号重置为0，然后重新显示第一张图片；当显示第一张图片时，再次点击“上一张”，则将图片的索引号重置为最大，然后显示最后一张图片。

　　在该实例中，并未对“左旋”和“右旋”按钮进行按键处理。要实现图片的旋转效果，请见博文《Android学习笔记11：图像的平移、旋转及缩放》（http://www.cnblogs.com/menlsh/archive/2012/12/02/2798802.html）。