用户界面View（十二）　　　　来源 　网友

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

源代码下载：Lesson45_ImageSwitcher,Lesson45_TextSwitcher

一、ImageSwitcher 图片切换器

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

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

1、新建一个项目：Lesson45_ImageSwitcher

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

 

 

 

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

view source
 
print?
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:id="@+id/imageSwitcher1" android:layout_width="wrap_content" android:layout_height="wrap_content">
4 </imageswitcher>
5 </linearlayout>

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

view source
 
print?
01 package basic.android.lesson45;
02  
03 import android.app.Activity;
04 import android.os.Bundle;
05 import android.view.View;
06 import android.view.Window;
07 import android.view.WindowManager;
08 import android.view.animation.AnimationUtils;
09 import android.widget.ImageSwitcher;
10 import android.widget.ImageView;
11 import android.widget.ViewSwitcher.ViewFactory;
12  
13 public class MainActivity extends Activity {
14  
15 //当前显示的图片索引
16 private int index;
17  
18 //图片数组
19 private int[] images = { R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4,
20 R.drawable.image5 };
21  
22 /** Called when the activity is first created. */
23 @Override
24 public void onCreate(Bundle savedInstanceState) {
25  
26 super.onCreate(savedInstanceState);
27  
28 //全屏设置
29 requestWindowFeature(Window.FEATURE_NO_TITLE);
30 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
31  
32 setContentView(R.layout.main);
33  
34 //得到ImageSwitcher对象
35 final ImageSwitcher is = (ImageSwitcher) findViewById(R.id.imageSwitcher1);
36  
37 //实现并设置工厂内部接口的makeView方法，用来显示视图。
38 is.setFactory(new ViewFactory() {
39 @Override
40 public View makeView() {
41 return new ImageView(MainActivity.this);
42 }
43 });
44  
45 //设置图片来源
46 is.setImageResource(images[index]);
47  
48 //设置点击监听器
49 is.setOnClickListener(new View.OnClickListener() {
50  
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 });
61  
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));
66  
67 }
68 }

5、编译并运行程序，查看结果：

抱歉我抓不到切换图片瞬间的截图。

 

 

二、TextSwitcher 文本切换器

文本的切换动画也是有一个叫TextSwitcher的类可以做到，它的使用方法和ImageSwitcher类似。至于为什么用法如此相似，还是看下面两张继承关系图吧：

 

 

下面直接上例子：

1、新建一个项目：Lesson45_TextSwitcher

2、在main.xml中添加一个TextSwitcher组件：

view source
 
print?
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:id="@+id/textSwitcher1" android:layout_width="match_parent" android:layout_height="wrap_content">
4 </textswitcher>
5 </linearlayout>

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

view source
 
print?
01 package basic.android.lesson45;
02  
03 import android.app.Activity;
04 import android.graphics.Color;
05 import android.os.Bundle;
06 import android.view.View;
07 import android.view.animation.AnimationUtils;
08 import android.widget.TextSwitcher;
09 import android.widget.TextView;
10 import android.widget.ViewSwitcher.ViewFactory;
11  
12 public class MainActivity extends Activity {
13  
14 // 索引
15 private int index;
16 // 文本数组
17 private String[] poemArray = { "去年今日栽", "临去见花开", "好住守空院", "夜间人不来" };
18  
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);
24  
25 //定义文字切换器
26 final TextSwitcher ts = (TextSwitcher) findViewById(R.id.textSwitcher1);
27  
28 //定义视图显示工厂，并设置
29 ts.setFactory(new ViewFactory() {
30  
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 });
39  
40 // 设置图片来源
41 ts.setText(poemArray[index]);
42  
43 // 设置点击监听器
44 ts.setOnClickListener(new View.OnClickListener() {
45  
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 });
56  
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));
61  
62 }
63 }

4、编译并运行程序，查看结果：

 

 

关联文档