快捷導(dǎo)航

利用Android中的TextView實(shí)現(xiàn)逐字顯示動(dòng)畫(huà)

更新時(shí)間：2016年08月17日 08:44:46 投稿：daisy

在安卓程序啟動(dòng)的時(shí)候，想逐字顯示一段話(huà)，每個(gè)字都有一個(gè)從透明到不透明的漸變動(dòng)畫(huà)。那如何顯示這個(gè)效果，下面一起來(lái)看看。

前言

Android的TextView只能設(shè)置整個(gè)TextView的動(dòng)畫(huà)，而不能設(shè)置每個(gè)文字的動(dòng)畫(huà)。即使是使用TextSwitcher，也很難實(shí)現(xiàn)我想要的效果。

所以選擇自定義一個(gè)。大體思路是：繼承ViewGroup，設(shè)置Text的時(shí)候，每個(gè)文字為一個(gè)TextView，每隔一個(gè)固定時(shí)間，啟動(dòng)每個(gè)TextView的動(dòng)畫(huà)。

定義一個(gè)CTextView，繼承ViewGroup：

實(shí)現(xiàn)主要代碼：

public class CTextView extends ViewGroup { 
}

向外提供一個(gè)方法setText(String text, final Animation animation, int duration)，text為要顯示的字符串，animation為每個(gè)字符的動(dòng)畫(huà)，duration為字符動(dòng)畫(huà)的播放間隔。

該方法實(shí)現(xiàn)如下：

public void setText(String text, final Animation animation, int duration) { 
  int time = 0; 
  if(text != null && !text.isEmpty()) { 
    char[] characters = text.toCharArray(); 
    for(char c : characters) { 
      final TextView t = new TextView(context); 
      //遍歷傳入的字符串的每個(gè)字符，生成一個(gè)TextView，并設(shè)置它的動(dòng)畫(huà) 
      t.setText(String.valueOf(c)); 
      t.setTextSize(28); 
      Handler h = new Handler(); 
      //每隔duration時(shí)間，播放下一個(gè)TextView的動(dòng)畫(huà) 
      h.postDelayed(new Runnable() { 
        @Override 
        public void run() { 
          addView(t); 
          t.setAnimation(animation); 
        } 
      }, time); 
 
      time += duration; 
 
    } 
  } 
}

CTextView完整實(shí)現(xiàn)如下：

import android.content.Context; 
import android.os.Handler; 
import android.util.AttributeSet; 
import android.view.View; 
import android.view.ViewGroup; 
import android.view.animation.Animation; 
import android.widget.TextView; 
 
/** 
 * Created by cchen on 2014/9/2. 
 */ 
public class CTextView extends ViewGroup { 
  private Context context; 
 
  public CTextView(Context context) { 
    super(context); 
    this.context = context; 
  } 
 
  public CTextView(Context context, AttributeSet attrs) { 
    super(context, attrs); 
    this.context = context; 
  } 
 
  public CTextView(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 
    this.context = context; 
  } 
 
  public void setText(String text, final Animation animation, int duration) { 
    int time = 0; 
    if(text != null && !text.isEmpty()) { 
      char[] characters = text.toCharArray(); 
      for(char c : characters) { 
        final TextView t = new TextView(context); 
        //遍歷傳入的字符串的每個(gè)字符，生成一個(gè)TextView，并設(shè)置它的動(dòng)畫(huà) 
        t.setText(String.valueOf(c)); 
        t.setTextSize(28); 
        Handler h = new Handler(); 
        //每隔duration時(shí)間，播放下一個(gè)TextView的動(dòng)畫(huà) 
        h.postDelayed(new Runnable() { 
          @Override 
          public void run() { 
            addView(t); 
            t.setAnimation(animation); 
          } 
        }, time); 
 
        time += duration; 
 
      } 
    } 
  } 
 
  @Override 
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
    int measureWidth = measureWidth(widthMeasureSpec); 
    int measureHeight = measureHeight(heightMeasureSpec); 
    // 計(jì)算自定義的ViewGroup中所有子控件的大小 
    measureChildren(widthMeasureSpec, heightMeasureSpec); 
    // 設(shè)置自定義的控件MyViewGroup的大小 
    setMeasuredDimension(measureWidth, measureHeight); 
  } 
 
  @Override 
  protected void onLayout(boolean changed, int l, int t, int r, int b) { 
    int childLeft = 0; 
    // 遍歷所有子視圖 
    int childCount = getChildCount(); 
    for (int i = 0; i < childCount; i++) { 
      View childView = getChildAt(i); 
 
      // 獲取在onMeasure中計(jì)算的視圖尺寸 
      int measureHeight = childView.getMeasuredHeight(); 
      int measuredWidth = childView.getMeasuredWidth(); 
 
      //將他們橫向排列 
      childView.layout(childLeft, 0, childLeft + measuredWidth, measureHeight); 
 
      childLeft += measuredWidth; 
    } 
  } 
 
  private int measureWidth(int pWidthMeasureSpec) { 
    int result = 0; 
    int widthMode = MeasureSpec.getMode(pWidthMeasureSpec);// 得到模式 
    int widthSize = MeasureSpec.getSize(pWidthMeasureSpec);// 得到尺寸 
 
    switch (widthMode) { 
      /** 
       * mode共有三種情況，取值分別為MeasureSpec.UNSPECIFIED, MeasureSpec.EXACTLY, 
       * MeasureSpec.AT_MOST。 
       * 
       * 
       * MeasureSpec.EXACTLY是精確尺寸， 
       * 當(dāng)我們將控件的layout_width或layout_height指定為具體數(shù)值時(shí)如andorid 
       * :layout_width="50dip"，或者為FILL_PARENT是，都是控件大小已經(jīng)確定的情況，都是精確尺寸。 
       * 
       * 
       * MeasureSpec.AT_MOST是最大尺寸， 
       * 當(dāng)控件的layout_width或layout_height指定為WRAP_CONTENT時(shí) 
       * ，控件大小一般隨著控件的子空間或內(nèi)容進(jìn)行變化，此時(shí)控件尺寸只要不超過(guò)父控件允許的最大尺寸即可 
       * 。因此，此時(shí)的mode是AT_MOST，size給出了父控件允許的最大尺寸。 
       * 
       * 
       * MeasureSpec.UNSPECIFIED是未指定尺寸，這種情況不多，一般都是父控件是AdapterView， 
       * 通過(guò)measure方法傳入的模式。 
       */ 
      case MeasureSpec.AT_MOST: 
      case MeasureSpec.EXACTLY: 
        result = widthSize; 
        break; 
    } 
    return result; 
  } 
 
  private int measureHeight(int pHeightMeasureSpec) { 
    int result = 0; 
 
    int heightMode = MeasureSpec.getMode(pHeightMeasureSpec); 
    int heightSize = MeasureSpec.getSize(pHeightMeasureSpec); 
 
    switch (heightMode) { 
      case MeasureSpec.AT_MOST: 
      case MeasureSpec.EXACTLY: 
        result = heightSize; 
        break; 
    } 
    return result; 
  } 
}

然后在布局文件中使用該自定義組件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="vertical" 
  tools:context=".NetworkTestActivity"> 
 
  <com.network.cchen.network.CTextView 
    android:id="@+id/cTextView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
  </com.network.cchen.network.CTextView> 
 
</LinearLayout>

在Activity中，調(diào)用CTextView的setText方法，傳入相關(guān)參數(shù)即可：

import android.app.Activity; 
import android.os.Bundle; 
import android.view.animation.AnimationUtils; 
 
public class TestActivity extends Activity { 
 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
 
    setContentView(R.layout.activity_network_test); 
 
    CTextView cTextView = (CTextView) findViewById(R.id.cTextView); 
    cTextView.setText("Hello world", AnimationUtils.loadAnimation(this, R.anim.myanim), 300); 
  } 
}

其中的第二個(gè)參數(shù)為動(dòng)畫(huà)，我想要的效果是從透明到不透明，myanim.xml:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
  <alpha 
    android:duration="1000" 
    android:fromAlpha="0.0" 
    android:toAlpha="1.0" /> 
</set>

如果想實(shí)現(xiàn)文字逐個(gè)從右側(cè)飛入：

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
  <translate 
    android:duration="1000" 
    android:fillAfter="true" 
    android:fromXDelta="50%p" 
    android:interpolator="@android:anim/anticipate_interpolator" 
    android:toXDelta="0" /> 
</set>

總結(jié)

以上就是利用Android中的TextView實(shí)現(xiàn)逐字動(dòng)畫(huà)的全部?jī)?nèi)容，實(shí)現(xiàn)后效果還是很贊的，感興趣的小伙伴們自己動(dòng)手實(shí)踐起來(lái)吧。如果有疑問(wèn)可以留言討論。

您可能感興趣的文章: