实现上下滚动的TextView

先看一下效果图吧:

一 说明

这里主要使用类 AutoTextView,这是一个自定义的类,继承至TextSwitcher,下面对 AutoTextView类做简要说明:

1. 该类使用的重点,在于设置两个动画, setInAnimation(…)  和 setOutAnimation(…),分别是文字进入的动画和文字退出的动画;

2. 类中定义了一个内部类-Rotate3dAnimation,主要靠该类实现文字进出动画,该内部类继承至Animation。说来巧合,这个恰好是在apiDemo中看到了,自定义Animation我还是第一次使用,动画逻辑均在void applyTransformation(float interpolatedTime, Transformation t)中实现,代码相当犀利,我在原来的基础上,更改了一下,实现了上述的效果,

二 代码部分:

 1.AutoTextView.java

 

[java] view plaincopy

  1. package com.example.animtextview;
  2. import android.content.Context;
  3. import android.content.res.TypedArray;
  4. import android.graphics.Camera;
  5. import android.graphics.Matrix;
  6. import android.util.AttributeSet;
  7. import android.view.Gravity;
  8. import android.view.View;
  9. import android.view.animation.AccelerateInterpolator;
  10. import android.view.animation.Animation;
  11. import android.view.animation.Transformation;
  12. import android.widget.TextSwitcher;
  13. import android.widget.TextView;
  14. import android.widget.ViewSwitcher;
  15. public class AutoTextView extends TextSwitcher implements
  16.         ViewSwitcher.ViewFactory {
  17.     private float mHeight;
  18.     private Context mContext;
  19.     //mInUp,mOutUp分别构成向下翻页的进出动画
  20.     private Rotate3dAnimation mInUp;
  21.     private Rotate3dAnimation mOutUp;
  22.     //mInDown,mOutDown分别构成向下翻页的进出动画
  23.     private Rotate3dAnimation mInDown;
  24.     private Rotate3dAnimation mOutDown;
  25.     public AutoTextView(Context context) {
  26.         this(context, null);
  27.         // TODO Auto-generated constructor stub
  28.     }
  29.     public AutoTextView(Context context, AttributeSet attrs) {
  30.         super(context, attrs);
  31.         // TODO Auto-generated constructor stub
  32.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.auto3d);
  33.         mHeight = a.getDimension(R.styleable.auto3d_textSize, 36);
  34.         a.recycle();
  35.         mContext = context;
  36.         init();
  37.     }
  38.     private void init() {
  39.         // TODO Auto-generated method stub
  40.         setFactory(this);
  41.         mInUp = createAnim(-90, 0 , true, true);
  42.         mOutUp = createAnim(0, 90, false, true);
  43.         mInDown = createAnim(90, 0 , true , false);
  44.         mOutDown = createAnim(0, -90, false, false);
  45.         //TextSwitcher主要用于文件切换,比如 从文字A 切换到 文字 B,
  46.         //setInAnimation()后,A将执行inAnimation,
  47.         //setOutAnimation()后,B将执行OutAnimation
  48.         setInAnimation(mInUp);
  49.         setOutAnimation(mOutUp);
  50.     }
  51.     private Rotate3dAnimation createAnim(float start, float end, boolean turnIn, boolean turnUp){
  52.         final Rotate3dAnimation rotation = new Rotate3dAnimation(start, end, turnIn, turnUp);
  53.         rotation.setDuration(800);
  54.         rotation.setFillAfter(false);
  55.         rotation.setInterpolator(new AccelerateInterpolator());
  56.         return rotation;
  57.     }
  58.     //这里返回的TextView,就是我们看到的View
  59.     @Override
  60.     public View makeView() {
  61.         // TODO Auto-generated method stub
  62.         TextView t = new TextView(mContext);
  63.         t.setGravity(Gravity.CENTER);
  64.         t.setTextSize(mHeight);
  65.         t.setMaxLines(2);
  66.         return t;
  67.     }
  68.     //定义动作,向下滚动翻页
  69.     public void previous(){
  70.         if(getInAnimation() != mInDown){
  71.             setInAnimation(mInDown);
  72.         }
  73.         if(getOutAnimation() != mOutDown){
  74.             setOutAnimation(mOutDown);
  75.         }
  76.     }
  77.     //定义动作,向上滚动翻页
  78.     public void next(){
  79.         if(getInAnimation() != mInUp){
  80.             setInAnimation(mInUp);
  81.         }
  82.         if(getOutAnimation() != mOutUp){
  83.             setOutAnimation(mOutUp);
  84.         }
  85.     }
  86.      class Rotate3dAnimation extends Animation {
  87.             private final float mFromDegrees;
  88.             private final float mToDegrees;
  89.             private float mCenterX;
  90.             private float mCenterY;
  91.             private final boolean mTurnIn;
  92.             private final boolean mTurnUp;
  93.             private Camera mCamera;
  94.             public Rotate3dAnimation(float fromDegrees, float toDegrees, boolean turnIn, boolean turnUp) {
  95.                 mFromDegrees = fromDegrees;
  96.                 mToDegrees = toDegrees;
  97.                 mTurnIn = turnIn;
  98.                 mTurnUp = turnUp;
  99.             }
  100.             @Override
  101.             public void initialize(int width, int height, int parentWidth, int parentHeight) {
  102.                 super.initialize(width, height, parentWidth, parentHeight);
  103.                 mCamera = new Camera();
  104.                 mCenterY = getHeight() / 2;
  105.                 mCenterX = getWidth() / 2;
  106.             }
  107.             @Override
  108.             protected void applyTransformation(float interpolatedTime, Transformation t) {
  109.                 final float fromDegrees = mFromDegrees;
  110.                 float degrees = fromDegrees + ((mToDegrees – fromDegrees) * interpolatedTime);
  111.                 final float centerX = mCenterX ;
  112.                 final float centerY = mCenterY ;
  113.                 final Camera camera = mCamera;
  114.                 final int derection = mTurnUp ? 1: -1;
  115.                 final Matrix matrix = t.getMatrix();
  116.                 camera.save();
  117.                 if (mTurnIn) {
  118.                     camera.translate(0.0f, derection *mCenterY * (interpolatedTime – 1.0f), 0.0f);
  119.                 } else {
  120.                     camera.translate(0.0f, derection *mCenterY * (interpolatedTime), 0.0f);
  121.                 }
  122.                 camera.rotateX(degrees);
  123.                 camera.getMatrix(matrix);
  124.                 camera.restore();
  125.                 matrix.preTranslate(-centerX, -centerY);
  126.                 matrix.postTranslate(centerX, centerY);
  127.             }
  128.      }
  129. }

 

2. MainActivity.java

 

[java] view plaincopy

  1. package com.example.animtextview;
  2. import android.os.Bundle;
  3. import android.app.Activity;
  4. import android.view.View;
  5. import android.view.View.OnClickListener;
  6. import android.widget.Button;
  7. public class MainActivity extends Activity implements OnClickListener {
  8.     private Button mBtnNext;
  9.     private Button mBtnPrev;
  10.     private AutoTextView mTextView02;
  11.     private static int sCount = 10;
  12.     @Override
  13.     protected void onCreate(Bundle savedInstanceState) {
  14.         super.onCreate(savedInstanceState);
  15.         setContentView(R.layout.activity_main);
  16.         init();
  17.     }
  18.     private void init() {
  19.         // TODO Auto-generated method stub
  20.         mBtnNext = (Button) findViewById(R.id.next);
  21.         mBtnPrev = (Button) findViewById(R.id.prev);
  22.         mTextView02 = (AutoTextView) findViewById(R.id.switcher02);
  23.         mTextView02.setText(“Hello world!”);
  24.         mBtnPrev.setOnClickListener(this);
  25.         mBtnNext.setOnClickListener(this);
  26.     }
  27.     @Override
  28.     public void onClick(View arg0) {
  29.         // TODO Auto-generated method stub
  30.         switch (arg0.getId()) {
  31.         case R.id.next:
  32.             mTextView02.next();
  33.             sCount++;
  34.             break;
  35.         case R.id.prev:
  36.             mTextView02.previous();
  37.             sCount–;
  38.             break;
  39.         }
  40.         mTextView02.setText(sCount%2==0 ?
  41.                 sCount+”AAFirstAA” :
  42.                 sCount+”BBBBBBB”);
  43.         System.out.println(“getH: [“+mTextView02.getHeight()+”]”);
  44.     }
  45. }

3. activity_main.xml

 

 

[java] view plaincopy

  1. <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
  2.     xmlns:auto3d=”http://schemas.android.com/apk/res/com.example.animtextview”
  3.     android:layout_width=”match_parent”
  4.     android:layout_height=”match_parent”
  5.     android:orientation=”vertical” >
  6.     <RelativeLayout
  7.         android:layout_width=”match_parent”
  8.         android:layout_height=”wrap_content” >
  9.         <Button
  10.             android:id=”@+id/next”
  11.             android:layout_width=”wrap_content”
  12.             android:layout_height=”wrap_content”
  13.             android:layout_alignParentLeft=”true”
  14.             android:layout_alignParentTop=”true”
  15.             android:text=”@string/next” />
  16.         <Button
  17.             android:id=”@+id/prev”
  18.             android:layout_width=”wrap_content”
  19.             android:layout_height=”wrap_content”
  20.             android:layout_alignParentRight=”true”
  21.             android:layout_alignParentTop=”true”
  22.             android:text=”@string/prev” />
  23.     </RelativeLayout>
  24.     <com.example.animtextview.AutoTextView
  25.         android:id=”@+id/switcher02″
  26.         android:layout_width=”match_parent”
  27.         android:layout_height=”wrap_content”
  28.         android:background=”@android:color/holo_green_dark”
  29.         auto3d:textSize=”30sp” />
  30. </LinearLayout>

 

 

代码中没写太多注释,不过结构还算清晰,应该不难看懂!

三 小结

我认为该控件实现的难点在于 动画文件的编写,即Rotate3dAnimation中applyTransformation(…)方法的实现,通过控制camara在Y方向上移动和在X方向上的旋转,从而造成上下翻滚的视觉感,然后将该值转换到matrix上,从而改变了参数(..,Transformation t).有兴趣的朋友可以直接改写该方法,即可得到不同动画效果的TextSwitcher.

标签