自定义轮播消息控件（自定义属性，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 * 邮箱：[e-mail] * 描述：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();

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