ImageSwitcher 图片切换器 和 TextSwitcher 文本切换器

本文将介绍如何在Android应用中使用ImageSwitcher和TextSwitcher组件进行图片和文本的轮播展示,包括创建项目、布局设计、代码实现及动画效果设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、ImageSwitcher 图片切换器

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

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

1、新建一个项目:Lesson45_ImageSwitcher

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

B4OIKY@`0}$[~WNZ`5U32%S

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中的代码如下:

01package basic.android.lesson45;
02 
03import android.app.Activity;
04import android.os.Bundle;
05import android.view.View;
06import android.view.Window;
07import android.view.WindowManager;
08import android.view.animation.AnimationUtils;
09import android.widget.ImageSwitcher;
10import android.widget.ImageView;
11import android.widget.ViewSwitcher.ViewFactory;
12 
13public classMainActivityextends Activity {
14 
15    //当前显示的图片索引
16    privateintindex;
17 
18    //图片数组
19    privateint[] 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    publicvoidonCreate(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        finalImageSwitcher is = (ImageSwitcher) findViewById(R.id.imageSwitcher1);
36 
37        //实现并设置工厂内部接口的makeView方法,用来显示视图。
38        is.setFactory(newViewFactory() {
39            @Override
40            publicView makeView() {
41                returnnewImageView(MainActivity.this);
42            }
43        });
44 
45        //设置图片来源
46        is.setImageResource(images[index]);
47 
48        //设置点击监听器
49        is.setOnClickListener(newView.OnClickListener() {
50 
51            @Override
52            publicvoidonClick(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、编译并运行程序,查看结果:

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

image

 

二、TextSwitcher 文本切换器

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

N3%MDM$VVF84~G$A3~N8ZQ4

S68{~P6)CT)$OZ5BF@(UWY6

下面直接上例子:

1、新建一个项目:Lesson45_TextSwitcher

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

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

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

01package basic.android.lesson45;
02 
03import android.app.Activity;
04import android.graphics.Color;
05import android.os.Bundle;
06import android.view.View;
07import android.view.animation.AnimationUtils;
08import android.widget.TextSwitcher;
09import android.widget.TextView;
10import android.widget.ViewSwitcher.ViewFactory;
11 
12public classMainActivityextends Activity {
13 
14    // 索引
15    privateintindex;
16    // 文本数组
17    privateString[] poemArray = {"去年今日栽","临去见花开","好住守空院","夜间人不来"};
18 
19    /** Called when the activity is first created. */
20    @Override
21    publicvoidonCreate(Bundle savedInstanceState) {
22        super.onCreate(savedInstanceState);
23        setContentView(R.layout.main);
24 
25        //定义文字切换器
26        finalTextSwitcher ts = (TextSwitcher) findViewById(R.id.textSwitcher1);
27 
28        //定义视图显示工厂,并设置
29        ts.setFactory(newViewFactory() {
30 
31            @Override
32            publicView makeView() {
33                TextView tv =newTextView(MainActivity.this);
34                tv.setTextSize(32);
35                tv.setTextColor(Color.GREEN);
36                returntv;
37            }
38        });
39 
40        // 设置图片来源
41        ts.setText(poemArray[index]);
42 
43        // 设置点击监听器
44        ts.setOnClickListener(newView.OnClickListener() {
45 
46            @Override
47            publicvoidonClick(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、编译并运行程序,查看结果:

image 

抱歉还是没法截取到切换时的场景#_#

好吧,本讲就到这里,各位下次再见。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值