用户界面 View（十二）(转载)

本讲内容：ImageSwitcher 图片切换器 和 TextSwitcher 文本切换器

源代码下载：  Lesson45_ImageSwitcher.zip (727.41 KB, 下载次数: 229) Lesson45_TextSwitcher.zip (45.91 KB, 下载次数: 69)

一、ImageSwitcher 图片切换器

我们可以看到很多网站首页里的有个图片轮显控件，用来显示站内重点新闻等，在这些网站里很多采用了JQuery等JS框架提供的轮显插件，而在Android里也有这个ImageSwitcher提供了类似的功能。

那么我们就一起做一个例子感觉一下：

1、新建一个项目：Lesson45_ImageSwitcher

2、准备好5张看着顺眼的图片，放在res\drawable目录下：

3、在main.xml中添加一个ImageSwitcher组件：

1. <?xml version="1.0" encoding="utf-8"?>
2. <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
3.         <imageswitcher android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/imageSwitcher1">
4.         </imageswitcher>
5. </linearlayout>

复制代码

4、在MainActivity.java中的代码如下：

1. package basic.android.lesson45;
3. import android.app.Activity;
4. import android.os.Bundle;
5. import android.view.View;
6. import android.view.Window;
7. import android.view.WindowManager;
8. import android.view.animation.AnimationUtils;
9. import android.widget.ImageSwitcher;
10. import android.widget.ImageView;
11. import android.widget.ViewSwitcher.ViewFactory;
13. public class MainActivity extends Activity {
15.         //当前显示的图片索引
16.         private int index;
18.         //图片数组
19.         private int[] images = { R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4,
20.                         R.drawable.image5 };
22.         /** Called when the activity is first created. */
23.         @Override
24.         public void onCreate(Bundle savedInstanceState) {
26.                 super.onCreate(savedInstanceState);
28.                 //全屏设置
29.                 requestWindowFeature(Window.FEATURE_NO_TITLE);
30.                 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
32.                 setContentView(R.layout.main);
34.                 //得到ImageSwitcher对象
35.                 final ImageSwitcher is = (ImageSwitcher) findViewById(R.id.imageSwitcher1);
37.                 //实现并设置工厂内部接口的makeView方法，用来显示视图。
38.                 is.setFactory(new ViewFactory() {
39.                         @Override
40.                         public View makeView() {
41.                                 return new ImageView(MainActivity.this);
42.                         }
43.                 });
45.                 //设置图片来源
46.                 is.setImageResource(images[index]);
48.                 //设置点击监听器
49.                 is.setOnClickListener(new View.OnClickListener() {
51.                         @Override
52.                         public void onClick(View v) {
53.                                 //点击会切换图片
54.                                 index++;
55.                                 if (index >= images.length) {
56.                                         index = 0;
57.                                 }
58.                                 is.setImageResource(images[index]);
59.                         }
60.                 });
62.                 //设置切入动画
63.                 is.setInAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_in_left));
64.                 //设置切出动画
65.                 is.setOutAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_out_right));
67.         }
68. }

复制代码

5、编译并运行程序，查看结果：抱歉我抓不到切换图片瞬间的截图。 
二、TextSwitcher 文本切换器文本的切换动画也是有一个叫TextSwitcher的类可以做到，它的使用方法和ImageSwitcher类似。至于为什么用法如此相似，还是看下面两张继承关系图吧：
 
下面直接上例子：1、新建一个项目：Lesson45_TextSwitcher2、在main.xml中添加一个TextSwitcher组件：

1. <?xml version="1.0" encoding="utf-8"?>
2. <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">
3.         <textswitcher android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/textSwitcher1">
4.         </textswitcher>
5. </linearlayout>

复制代码

3、在MainActivity.java中的代码如下：

1. package basic.android.lesson45;
3. import android.app.Activity;
4. import android.graphics.Color;
5. import android.os.Bundle;
6. import android.view.View;
7. import android.view.animation.AnimationUtils;
8. import android.widget.TextSwitcher;
9. import android.widget.TextView;
10. import android.widget.ViewSwitcher.ViewFactory;
12. public class MainActivity extends Activity {
14.         // 索引
15.         private int index;
16.         // 文本数组
17.         private String[] poemArray = { "去年今日栽", "临去见花开", "好住守空院", "夜间人不来" };
19.         /** Called when the activity is first created. */
20.         @Override
21.         public void onCreate(Bundle savedInstanceState) {
22.                 super.onCreate(savedInstanceState);
23.                 setContentView(R.layout.main);
25.                 //定义文字切换器
26.                 final TextSwitcher ts = (TextSwitcher) findViewById(R.id.textSwitcher1);
28.                 //定义视图显示工厂，并设置
29.                 ts.setFactory(new ViewFactory() {
31.                         @Override
32.                         public View makeView() {
33.                                 TextView tv =new TextView(MainActivity.this);
34.                                 tv.setTextSize(32);
35.                                 tv.setTextColor(Color.GREEN);
36.                                 return tv;
37.                         }
38.                 });
40.                 // 设置图片来源
41.                 ts.setText(poemArray[index]);
43.                 // 设置点击监听器
44.                 ts.setOnClickListener(new View.OnClickListener() {
46.                         @Override
47.                         public void onClick(View v) {
48.                                 // 点击会切换图片
49.                                 index++;
50.                                 if (index >= poemArray.length) {
51.                                         index = 0;
52.                                 }
53.                                 ts.setText(poemArray[index]);
54.                         }
55.                 });
57.                 // 设置切入动画
58.                 ts.setInAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_in_left));
59.                 // 设置切出动画
60.                 ts.setOutAnimation(AnimationUtils.loadAnimation(getApplicationContext(), android.R.anim.slide_out_right));
62.         }
63. }

复制代码

4、编译并运行程序，查看结果：
 
抱歉还是没法截取到切换时的场景#_#好吧，本讲就到这里，各位下次再见。