自定义轮播消息控件（自定义属性，onDraw，重写Animation等）
最近，项目要求，在大屏中，显示推送的消息，在原声不支持的情况下，只好自定义了，现在把自己定义的一些基本信息整理出来，方便以后的查看和给各位开发人员提供方便，如果有什么写的不对的地方希望大家提出来，共同学习。好了废话不多说我先把实现的界面以demo的形式给大家展示出来。有兴趣的同学可以继续往下面看。（由于gif上次不成功，上传了一个图片，里面的消息可以上下轮播的）
Paste_Image.png
想看下效果图的的看下此篇文章。
http://www.jianshu.com/p/f9396f23a0c4
2首先需要定义下属性代码如下
<declare-styleable name="VerticalRollingTextView">
<!--文字颜色-->
<attr name="android:textColor"/>
<!--文字大小-->
<attr name="android:textSize"/>
<!--滚动动画时长-->
<attr name="android:duration"/>
<!--两次动画之间的间隔-->
<attr name="animInterval" format="integer"/>
</declare-styleable>
此处定义的目的可以在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 方法，此处用到了估值器，所以才使消息缓慢的上升
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;
}
}
细心地人一经发现在这里有个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();
}
}
其实工作了大家的心情都理解，能自己少写点就少写点，不想自己写的完全可以拷贝我的代码，我会详细代码放在我的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();
网友评论