textswitcher_Android TextSwitcher和ImageSwitcher示例教程

textswitcher

Android TextSwitcher and ImageSwitcher are classes used to add animations to texts and images as they are being displayed on the screen to make them visually appealing. In this tutorial we’ll implement each of these.

Android TextSwitcher和ImageSwitcher是用于在文本和图像在屏幕上显示时向其添加动画的类，以使它们具有视觉吸引力。 在本教程中，我们将实现所有这些。

Android TextSwitcher和ImageSwitcher概述 (Android TextSwitcher and ImageSwitcher Overview)

The TextSwitcher and ImageSwitcher provide us a simple way to add animated transitions. These classes are used for a smooth transition animation in android view. Some usages of these are:

TextSwitcher和ImageSwitcher为我们提供了一种添加动画过渡的简单方法。 这些类用于android视图中的平滑过渡动画。 这些的一些用法是：

• Navigating through a list of dates with Left and Right buttons
  使用向左和向右按钮浏览日期列表
• Changing numbers in a date picker
  在日期选择器中更改数字
• Countdown timer clock
  倒数计时器时钟
• Smooth transition for a news headlines slider
  新闻标题滑块的平滑过渡

Android TextSwitcher (Android TextSwitcher)

A TextSwitcher is a specialised form of ViewSwitcher that contains only children of type TextView. TextSwitcher is used to animate a TextView when the text changes. Two types of animations are required to switch between texts:

一个TextSwitcher是ViewSwitcher的一种特殊形式，它包含唯一类型的TextView的孩子。 当文本更改时，TextSwitcher用于为TextView设置动画。 在文本之间切换需要两种动画：

• In Animation: with which Text come in the Screen
  在动画中 ：屏幕上出现的文本
• Out Animation: with which Text goes out from the Screen
  动画 ：文字从屏幕上消失

Android ImageSwitcher (Android ImageSwitcher)

As you might have noticed in the previous tutorials containing ImageViews that the loading and rendering of images was abrupt and not smooth. Here ImageSwitcher comes to the rescue since it supports some form of transitions from one image to another. The implementation is given below.

正如您在包含ImageViews的以前的教程中可能已经注意到的那样，图像的加载和渲染是突然且不平滑的。 ImageSwitcher之所以能够解决这个问题，是因为它支持某种形式的从一个图像到另一个图像的过渡。 下面给出了实现。

imageSwitcher.setImageResource(R.drawable.ic_launcher);
imageSwitcher.setFactory(new ViewFactory() {
   public View makeView() {
      ImageView myView = new ImageView(getApplicationContext());
      return myView;
   }
}

The only thing left now is to add the Animation as given in the below snippet:

现在剩下的唯一一件事就是添加以下片段中给出的Animation：

Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_up);
imageSwitcher.setInAnimation(in);
imageSwitcher.setOutAnimation(out);

In short the following steps need to be implemented to use these classes:

简而言之，需要执行以下步骤才能使用这些类：

• Get the view reference using findViewById() method
  使用findViewById（）方法获取视图引用
• Set a factory using switcher.setFactory()
  使用switcher.setFactory（）设置工厂
• Set an in-animation using switcher.setInAnimation()
  使用switcher.setInAnimation（）设置动画
• Set an out-animation using switcher.setOutAnimation()
  使用switcher.setOutAnimation（）设置动画

• setFactory() is used to create new views
  setFactory（）用于创建新视图
• setText() on TextSwitcher works as follows:
  • It first removes the old text by using setOutAnimation()
  • It inserts the new text using setInAnimation()
  TextSwitcher上的setText（）的工作方式如下：
  • 它首先使用setOutAnimation()删除旧文本。
  • 它使用setInAnimation()插入新文本

项目结构 (Project Structure)

码 (Code)

The layout for the MainActivity contains an ImageSwitcher, TextSwitcher and a Button in a RelativeLayout as shown below.

MainActivity的布局在RelativeLayout中包含一个ImageSwitcher，TextSwitcher和一个按钮，如下所示。

main.xml

main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageSwitcher
        android:id="@+id/imageSwitcher"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true" >
    </ImageSwitcher>

    <TextSwitcher
        android:id="@+id/textSwitcher"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:padding="10dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="10dp"
        android:onClick="onSwitch"
        android:text="Next Image >>" />

</RelativeLayout>

The MainActivity consists of the Text an Image Switchers with their views created using setFactory(). The animations used are built in animations present in the android sdk. The application consists of three TextViews and ImageViews which are switched in cyclic order on each button click. The MainActivity.java is given below :

MainActivity包括“文本和图像切换器”，以及使用setFactory()创建的视图。 所使用的动画是内置在android sdk中的动画中的。 该应用程序由三个TextView和ImageView组成，它们在每次单击按钮时都以循环顺序切换。 MainActivity.java如下所示：

package com.journaldev.switchers;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.TextSwitcher;
import android.widget.TextView;
import android.widget.ViewSwitcher;

public class MainActivity extends Activity {

    private static final String[] TEXTS = { "Background", "XP", "Sky" };
    private static final int[] IMAGES = { R.drawable.background, R.drawable.sample,
            R.drawable.sample_2 };
    private int mPosition = 0;
    private TextSwitcher mTextSwitcher;
    private ImageSwitcher mImageSwitcher;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mTextSwitcher = (TextSwitcher) findViewById(R.id.textSwitcher);
        mTextSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                TextView textView = new TextView(MainActivity.this);
                textView.setTextSize(18);
                textView.setGravity(Gravity.CENTER);
                return textView;
            }
        });

        mTextSwitcher.setInAnimation(this, android.R.anim.fade_in);
        mTextSwitcher.setOutAnimation(this, android.R.anim.fade_out);

        mImageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
        mImageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(MainActivity.this);
                return imageView;
            }
        });
        mImageSwitcher.setInAnimation(this, android.R.anim.slide_in_left);
        mImageSwitcher.setOutAnimation(this, android.R.anim.slide_out_right);

        onSwitch(null);
    }

    public void onSwitch(View view) {
        mTextSwitcher.setText(TEXTS[mPosition]);
        mImageSwitcher.setBackgroundResource(IMAGES[mPosition]);
        mPosition = (mPosition + 1) % TEXTS.length;
    }
}

The onSwitch() method is invoked on button click. Below is our application in execution.

单击按钮时将调用onSwitch()方法。 以下是我们正在执行的应用程序。

This brings an end to this tutorial. You can download the final Android Switchers Project from the link given below.

本教程到此结束。 您可以从下面给出的链接下载最终的Android Switchers项目 。

Download Android Switchers Example Project 下载Android切换器示例项目

翻译自: https://www.journaldev.com/9555/android-textswitcher-and-imageswitcher-example-tutorial

textswitcher