Android 竖滚加横滚的跑马灯（自定义 MarqueeView ）

一.效果图

没错，就是要做一个能竖屏滚动+横屏滚动的花式跑马灯。

 

二.思路

竖屏滚动首先想到的肯定是ViewFlipper,那么竖屏滚动的ViewFlipper加上自定义的横屏滚动跑马灯岂不是就大功告成。来，开始操作：

1.自定义一个横向滚动的TexHorizontalView：

具体步骤：

a.计算需要展示文字的宽度textWidth和控件的宽度viewWitdh，判断文字的宽度textWidth是否大于控件控件宽度viewWitdh，如果大于则需要滚动。

b.设置值动画同时计算应到滚动的坐标，然后根据计算出的坐标用postInvalidate进行重绘。

c.postInvalidate会调用onDraw方法，然后在onDraw中根据坐标进行drawText绘制文本。

d.当值动画完毕设置横向滚动完毕事件的回调给外部使用。

2.自定义竖屏滚动的MarqueeView：

具体步骤：

a.自定义MarqueeView继承ViewFlipper,并在MarqueeView中addView添加对应个数的TexHorizontalView。

b.开启TexHorizontalView的横向滚动；当MarqueeView中的子TexHorizontalView横向滚动完毕，在TexHorizontalView滚动完毕的回调中开启MarqueeView的竖向滚动，从而展示下一个子TexHorizontalView。

c.当MarqueeView的竖向滚动动画完毕后，在动画完毕的监听开启当前TexHorizontalView开始横滚。

 

三.代码

1.TextHorizontalView

public class TextHorizontalView extends View {
    /**
     * 文字颜色,默认黑色
     */
    private int mTextColor = Color.BLACK;
    /**
     * 文字大小
     */
    private int mTextSize = 12;
    /**
     * 文本的x坐标
     */
    private float mXLocation = 0;
    /**
     * 滚动每个字的时间
     */
    private int mScrollSpeedTime = 300;
    /**
     * 画笔
     */
    private TextPaint mPaint;
    private Rect mRect;
    /**
     * 内容
     */
    private String mContent;
    /**
     * 文字高度
     */
    private float mTextHeight;
    /**
     * 值动画，配合postInvalidate刷新界面
     */
    private ValueAnimator verticalSwitchAnimator;
    /**
     * 开启动画
     */
    private boolean startRoll;

    /**
     * 滚动完毕的监听
     */
    public interface OnTextScrollFinishListener {
        void scrollFinish();
    }

    private OnTextScrollFinishListener onTextScrollFinishListener;

    public void setOnTextScrollFinishListener(OnTextScrollFinishListener onTextScrollFinishListener) {
        this.onTextScrollFinishListener = onTextScrollFinishListener;
    }

    public TextHorizontalView(Context context) {
        this(context, null);
    }

    public TextHorizontalView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TextHorizontalView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initAttrs(attrs);
        initPaint();
    }

    @SuppressLint("RestrictedApi")
    private void initAttrs(AttributeSet attrs) {
        TintTypedArray tta = TintTypedArray.obtainStyledAttributes(getContext(), attrs, R.styleable.TextHorizontalView);
        mTextColor = tta.getColor(R.styleable.TextHorizontalView_text_color, mTextColor);
        mTextSize = tta.getInt(R.styleable.TextHorizontalView_text_size, mTextSize);
        mScrollSpeedTime = tta.getInt(R.styleable.TextHorizontalView_text_scroll_speed_time, mScrollSpeedTime);
        tta.recycle();
    }

    private void initPaint() {
        mRect = new Rect();
        //初始化文本画笔
        mPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
        //文字颜色值,可以不设定
        mPaint.setColor(mTextColor);
        //文字大小
        mPaint.setTextSize(mTextSize);