用ImageSwitcher实现图片动态切换

ImageSwitcher是系统提供的用于切换图片的UI控件，下面将用一个demo演示ImageSwitcher的用法。

ImageSwitcherDEMO简介

该demo使用ImageSwitcher和ImageView控件实现动态的图片切换，demo的效果如下图所示：

---

 
demo初始时

---

 
点击第九张图片

---

 
点击第三张图片

---

XML布局

由于Gallery已经不被推荐使用，可以用HorizontalScrollView和LinearLayout的组合替代Gallery。 
XML布局如下所示：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >

    <ImageSwitcher
        android:id="@+id/image_switcher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>
    </HorizontalScrollView>

</LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

该XML布局定义了一个ImageSwitcher和一个HorizontalScrollView，HorizontalScrollView中定义了一个LinearLayout，用于在代码中动态添加图片的略缩图。 
需要注意：HorizontalScrollView中的直接子控件只能有一个。

---

Activity逻辑实现

activity代码如下所示：

public class MainActivity extends Activity {
    private ImageSwitcher mImageSwitcher;
    private LinearLayout mLinearLayout;
    private int[] mImageSmall = new int[] { R.drawable.android_1,
            R.drawable.android_2, R.drawable.android_3, R.drawable.android_4,
            R.drawable.android_5, R.drawable.android_6, R.drawable.android_7,
            R.drawable.android_8, R.drawable.android_9, R.drawable.android_10 };

    private int[] mImage = new int[] { R.drawable.android1,
            R.drawable.android2, R.drawable.android3, R.drawable.android4,
            R.drawable.android5, R.drawable.android6, R.drawable.android7,
            R.drawable.android8, R.drawable.android9, R.drawable.android10 };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mLinearLayout = (LinearLayout) findViewById(R.id.linear_layout);

        mImageSwitcher = (ImageSwitcher) findViewById(R.id.image_switcher);
        mImageSwitcher.setFactory(new ViewFactory() {

            @Override
            public View makeView() {
                // TODO Auto-generated method stub
                ImageView imageView = new ImageView(MainActivity.this);
                return imageView;
            }
        });
        mImageSwitcher.setInAnimation(this, android.R.anim.fade_in);
        mImageSwitcher.setOutAnimation(this, android.R.anim.fade_out);
        mImageSwitcher.setImageResource(mImage[0]);
        for (int i = 0; i < mImageSmall.length; ++i) {
            mLinearLayout.addView(getView(i));

        }

    }

    private View getView(final int i) {
        // TODO Auto-generated method stub
        ImageView _imageView = new ImageView(this);
        _imageView.setImageResource(mImageSmall[i]);
        _imageView.setId(i);
        _imageView.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                mImageSwitcher.setImageResource(mImage[i]);
                Toast.makeText(MainActivity.this,
                        "您选择了第" + (v.getId() + 1) + "张图片", Toast.LENGTH_SHORT)
                        .show();

            }
        });

        return _imageView;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

---

代码中需注意以下几点：

1. 需要为ImageSwitcher控件设置setFactory方法，该方法中需要一个ViewFactory接口对象，在该接口的makeView方法中需要新建一个ImageView。
2. 为ImageSwitcher添加淡入的动画切换效果为ImageSwitcher的setInAnimation方法；添加淡出的动画切换效果为ImageSwitcher的setOutAnimation方法。