自定义轮播消息控件（自定义属性，onDraw，重写Animation等）

自定义轮播消息控件（自定义属性，onDraw，重写Animation等）

最近，项目要求，在大屏中，显示推送的消息，在原声不支持的情况下，只好自定义了，现在把自己定义的一些基本信息整理出来，方便以后的查看和给各位开发人员提供方便，如果有什么写的不对的地方希望大家提出来，共同学习。好了废话不多说我先把实现的界面以demo的形式给大家展示出来。有兴趣的同学可以继续往下面看。（由于gif上次不成功，上传了一个图片，里面的消息可以上下轮播的）


2首先需要定义下属性代码如下

此处定义的目的可以在xml文件中使用，但是使用必须在xml加入 xmlns:app=”http://schemas.android.com/apk/res-auto” 要不然自定义的 属性就没法识别，切记。
3下一步我们就写控件了，让我们集成view此处实现了一个构造方法，由于自定义了属性所以选择第二个在此处可以初始化，paint对象，以及一些自定义参数的初始化，以及动画，代码如下里面注释很清楚了不一一解释了

public VerticalRollingTextView(Context context, AttributeSet attrs) {
super(context, attrs);
/去除锯齿的作用/
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.BLACK);
mPaint.setTypeface(Typeface.DEFAULT);
/初始化定义的参数/
parseAttrs(context, attrs);

    Paint.FontMetricsInt metricsInt = mPaint.getFontMetricsInt();
    /*此处是计算文字顶部和ascent的差距不明白的可以查看此篇博客 http://blog.csdn.net/aigestudio/article/details/41447349*/
    mTextTopToAscentOffset = metricsInt.ascent - metricsInt.top;
    Log.d("measure-->", "mTextTopToAscentOffset" + mTextTopToAscentOffset);
    //设置动画时间
    mAnimation.setDuration(mDuration);
}

private void parseAttrs(Context context, AttributeSet attrs) {
    /*屏幕密度设置默认的字体大小*/
    float density = getResources().getDisplayMetrics().density;
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.VerticalRollingTextView);
    mPaint.setColor(typedArray.getColor(R.styleable.VerticalRollingTextView_android_textColor, Color.BLACK));
    mPaint.setTextSize(typedArray.getDimensionPixelOffset(R.styleable.VerticalRollingTextView_android_textSize, (int) (density * 14)));
    mDuration = typedArray.getInt(R.styleable.VerticalRollingTextView_android_duration, mDuration);
    mAnimInterval = typedArray.getInt(R.styleable.VerticalRollingTextView_animInterval, mAnimInterval);
    /*注意回收*/
    typedArray.recycle();
}

画笔都已经准备好了，下一步就是需要我们进行绘制了 也就是onDraw方法了

protected void onDraw(Canvas canvas) {
    // 为了安全起见先判断adapter是否为空
    if (mDataSetAdapter == null || mDataSetAdapter.isEmpty()) {
        return;
    }

    String text1 = mDataSetAdapter.getText(mCurrentIndex);
    String text2 = mDataSetAdapter.getText(mNextIndex);

    //只需要进行一次测量
    if (mOrgOffsetY == -1) {
        mPaint.getTextBounds(text1, 0, text1.length(), bounds);
        mOffset = (getHeight() + bounds.height()) * 0.5f;
        Log.d("measure-->", "mOffset" + mOffset);
        mOrgOffsetY = mCurrentOffsetY = mOffset - mTextTopToAscentOffset;
        Log.d("measure-->", "mOrgOffsetY" + mOrgOffsetY);
        if (mDataSetAdapter.getItemCount() == 1) {

        } else {
            mAnimation.updateValue(mOrgOffsetY, -2 * mTextTopToAscentOffset);
        }

    }

    canvas.drawText(text1, 0, mCurrentOffsetY, mPaint);
    Log.d("size-->", "size" + mDataSetAdapter.getItemCount());

    //判断是否一条数据
    if (mDataSetAdapter.getItemCount() == 1) {
        Log.d("size-->", "size" + mDataSetAdapter.getItemCount());
        stop();
    } else {
        canvas.drawText(text2, 0, mCurrentOffsetY + mOffset + mTextTopToAscentOffset, mPaint);

    }

}

图示轮播的消息，怎么实现呢 ，无非就是开启一个线程不断地进行更新数据，此处轮播的那么优雅运用的平移动画

/开启线程实现轮播/
Runnable mRollingTask = new Runnable() {
@Override
public void run() {
mAnimationEnded = false;
startAnimation(mAnimation);
postDelayed(this, mAnimInterval);
}
};

为了方便在外面调用此处我写了一个run方法，可以直接调用run就可以轮播了

 public void run() {
        if (isRunning) {
            return;
        }

        isRunning = true;
        Log.d("measure-->", "mCurrentOffsetYrun" + mCurrentOffsetY);
        Log.d("measure-->", "mTextTopToAscentOffsetrun" + mTextTopToAscentOffset);
        if (mDataSetAdapter.getItemCount() == 1) {

        } else {
            mAnimation.updateValue(mCurrentOffsetY, -2 * mTextTopToAscentOffset);
        }

        /*调用View.post()可以保证指定方法的执行是在之前调用的方法处理完成之后的 而不仅仅是方法调用已经返回。*/
        post(mRollingTask);
    }
    ```
## 在说下动画，我重写了，Animation 实现了里面applyTransformation 方法，此处用到了估值器，所以才使消息缓慢的上升 ##
```java
    float evaluate(float fraction, float startValue, float endValue) {
        return startValue + fraction * (endValue - startValue);
    }
    class InternalAnimation extends Animation {

        float startValue;
        float endValue;

        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            if (mAnimationEnded) return;
            mCurrentOffsetY = evaluate(interpolatedTime, startValue, endValue);
            Log.d("measure-->", "startValue" + startValue);
            Log.d("measure-->", "endValue" + endValue);
            Log.d("measure-->", "mCurrentOffsetY" + mCurrentOffsetY);
            if (mCurrentOffsetY == endValue) {
                animationEnd();
            }
            postInvalidate();
        }

        public void updateValue(float startValue, float endValue) {
            this.startValue = startValue;
            this.endValue = endValue;
        }

    }




<div class="se-preview-section-delimiter"></div>

细心地人一经发现在这里有个adapter会怀疑为啥有这个呢这个是自定义的一个方便对数据的管理，也就是一个抽象的一个类，此处里面一个泛型，所以你不管传入的是数组还是list都可以

/**
 * 作者：Harry.kong
 * 邮箱：kongpengcheng@aliyun.com
 * 描述：VerticalRollingTextView的数据适配器
 */
public abstract class DataSetAdapter<T> {

    List<T> data = new ArrayList<>();

    public DataSetAdapter() {
    }

    public DataSetAdapter(List<T> data) {
        this.data = data;
    }

    /**
     * @param index 当前角标
     * @return 待显示的字符串
     */
    final public String getText(int index) {
        return text(data.get(index));
    }

    protected abstract String text(T t);

    public int getItemCount() {
        return null == data || data.isEmpty() ? 0 : data.size();
    }

    public void setData(List<T> data) {
        this.data = data;
    }

    public boolean isEmpty() {
        return null == data || data.isEmpty();
    }
}




<div class="se-preview-section-delimiter"></div>

其实工作了大家的心情都理解，能自己少写点就少写点，不想自己写的完全可以拷贝我的代码，我会详细代码放在我的github上面，下面我就说下具体的如何使用

1，首先在xml里面引入我们刚才定义的那个view，很简单不贴代码了，别忘记在xml加入我前面的提醒的那句话要不然自定义属性不起作用

2， 实现adapter传入数据

vertical_rolling_textview.setDataSetAdapter(new DataSetAdapter<MessageBean>(messageTrue) {

            @Override
            protected String text(MessageBean s) {
                return s.getMessagName();
            }
        });`

3，调用run方便这时候消息就可以开始轮播了，vertical_rolling_textview.run();
4，停止轮播调用vertical_rolling_textview.stop();
5，如果消息是一条数据不需要轮播vertical_rolling_textview.setOne(false);需要轮播传入true
6，如果需要点击消息实现此接口 vertical_rolling_textview.setOnItemClickListener();

本人第一次写文章，如果觉得可以希望大家多多支持，送大家一句话，代码是死的，需求是活的，我们要学会改变别人的代码，同事也要学会自己定义