Android TextSwitcher和ImageSwitcher示例教程

时间:2020-02-23 14:29:20  来源:igfitidea点击:

Android TextSwitcher和ImageSwitcher是用于在文本和图像在屏幕上显示时将动画添加到文本和视觉上的类。
在本教程中,我们将实现所有这些。

Android TextSwitcher和ImageSwitcher概述

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

  • 使用向左和向右按钮浏览日期列表
  • 在日期选择器中更改数字
  • 倒数计时器时钟
  • 新闻标题滑块的平滑过渡

Android TextSwitcher

" TextSwitcher"是ViewSwitcher的一种特殊形式,仅包含TextView类型的子代。
当文本更改时,TextSwitcher用于为TextView设置动画。
在文本之间切换需要两种动画:

  • 在动画中:屏幕上出现的文本
  • 输出动画:文本从屏幕上消失的方式

Android ImageSwitcher

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

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

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

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

简而言之,需要使用以下步骤来使用这些类:

  • 使用findViewById()方法获取视图引用

  • 使用switcher.setFactory()设置工厂

  • 使用switcher.setInAnimation()设置动画

  • 使用switcher.setOutAnimation()设置动画

  • setFactory()用于创建新视图

  • TextSwitcher上的setText()的工作方式如下:首先使用setOutAnimation()删除旧文本。

  • 它使用setInAnimation()插入新文本。

代码

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

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>

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

package com.theitroad.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;
  }
}

单击按钮时会调用onSwitch()方法。