TextView实现自动上下滚动的效果（TextSwitcher）

对于TextView这个控件使我们在熟悉不过的了，但是有时候可能会有这样的需求：

1、假如有10个文本内容，这些文本内容需要每隔几秒钟显示下一个；

2、文本内容切换的时候需要有动画过渡效果，比如滚动效果，新的文字从下面进入，并从透明逐渐过渡到不透明，旧的文字从上面出去，并从不透明逐渐过渡到全透明。

上面就是我们要实现的效果，那要如何来实现呢？要实现这个效果，如果你知道TextSwitcher这个类，那就是so easy了。下面就用代码来搞一波：

public class SwitchTextView extends TextSwitcher {


    public SwitchTextView(Context context) {
        super(context);
    }

    public SwitchTextView(final Context context, AttributeSet attrs) {
        super(context, attrs);
        setFactory(new ViewFactory() {
            @Override
            public View makeView() {
                //设置显示文字的TextView，内部实际会调用这个方法两次，进入和出去的textview就是从这里创建的
                TextView tv = new TextView(context);
                tv.setTextColor(Color.parseColor("#FF0000"));
                tv.setTextSize(TypedValue.COMPLEX_UNIT_SP,23);
                return tv;
            }
        });

        TranslateAnimation translateIn = new TranslateAnimation(0, 0, 50, 0);
        TranslateAnimation translateOut = new TranslateAnimation(0, 0, 0, -50);

        AlphaAnimation alphaIn = new AlphaAnimation(0, 1);
        AlphaAnimation alphaOut = new AlphaAnimation(1, 0);

        AnimationSet animatorSetIn = new AnimationSet(true);
        animatorSetIn.addAnimation(translateIn);
        animatorSetIn.addAnimation(alphaIn);
        animatorSetIn.setDuration(2000);

        AnimationSet animatorSetOut = new AnimationSet(true);
        animatorSetOut.addAnimation(translateOut);
        animatorSetOut.addAnimation(alphaOut);
        animatorSetOut.setDuration(2000);

        //设置文字进入和出去的动画
        setInAnimation(animatorSetIn);
        setOutAnimation(animatorSetOut);

    }

    int position = 0;
    int len;
    //这里将所有需要滚动的文字传进来，并设置循环显示的时间
    public void startPlay(final List<String> data) {
        if (data == null || data.size() == 0) {
            return;
        }
        len = data.size();
        //设置下一个显示的文字
        setText(data.get(position));
        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                position++;
                post(new Runnable() {
                    @Override
                    public void run() {
                        setText(data.get(position%len));
                    }
                });
            }
        }, 3000, 3000);
    }
}

这里写完后，xml中在布局一下就ok了：

<com.example.ubt.proguardtest.view.SwitchTextView
    android:id="@+id/switch_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toTopOf="@+id/img_zoom"
    app:layout_constraintBottom_toBottomOf="@id/text">

</com.example.ubt.proguardtest.view.SwitchTextView>

最后在调用一下startPlay()方法就欧了，是不是特简单。

这里主要分为三步：

1、setFactory()设置显示文字的view，内部实际会用这个方法创建两个view，进入和出去的view；

扫描二维码关注公众号，回复： 1519411 查看本文章

2、设置动画，通过setInAnimation()和setOutAnimation()两个方法设置进入和出去的动画；

3、view和动画设置完后，最后就是调用setText()设置文字，这样就ok了。

TextView实现自动上下滚动的效果（TextSwitcher）

猜你喜欢