前言

快过年了，对于大伙来说手头上的事情做完没有呢，马上也该让自己轻松一阵子了，哈哈哈。好，说正事，由于公司App这个版本首页的改版，新增了很多新的控件，类似于京东快报这种控件的话我在写之前也去找了一下轮子，但是遗憾的是并没有发现简单易用的哈，所以就琢磨自己来实现。

实现思路

快报功能其实也就文字上下滚动，然后给用户一个简单的文字提示，我并不想做太复杂，而且咱家的产品大大也不需要很复杂的快报功能，所以我就想做个极简的吧。
大致控件需要包括以下几点功能：
1. 文字能上下滚动（自动）
2. 能有点击事件
3. 貌似没了~~~
那先看看效果图

文字的滚动效果实现

首先的话，咱们先把文字画出来吧，用canvas.drawText固然没错，但是首先要解决一个问题就是说怎么让文字上下居中呢？（如果自己有经常用canvas.drawText的话那肯定熟悉）我们的思路是先画矩形，具体请看代码

mRect = new Rect(20, 20, getMeasuredWidth()-20, getMeasuredHeight()-20);
Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
mY = (mRect.bottom + mRect.top - fontMetrics.bottom - fontMetrics.top) / 2;

其实上面的mY就是我们绘制文字的Y坐标了。
那么然后让文字滚动起来，我这边是通过启动一个计时器，看代码：

@Overrideprotected void onDraw(final Canvas canvas) {if(data != null){if(mY == 0&&!isMove){mRect = new Rect(20, 20, getMeasuredWidth()-20, getMeasuredHeight()-20);Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();mY = (mRect.bottom + mRect.top - fontMetrics.bottom - fontMetrics.top) / 2;nY = mY;}Item item = data.get(mIndex);String text = item.getName();canvas.drawText(text,mRect.left, nY, textPaint);if(!isStart){isStart = true;Timer timer = new Timer();countingDown = mInterval+mDuration;timer.schedule(new TimerTask() {@Overridepublic void run() {countingDown -=20;if(countingDown<=0) {countingDown = mInterval + mDuration;isMove = true;}if(countingDown<=mInterval-40&&countingDown>0){isMove = false;drawTextStill();}if(isMove) {drawTextMove();}}},mInterval,20);}}}private void drawTextStill(){nY = mY;postInvalidate();}private void drawTextMove(){nY -=  getMeasuredHeight()/(mDuration/20);if(nY<0){mIndex++;if(mIndex == data.size())mIndex = 0;nY = getMeasuredHeight();}postInvalidate();}

点击事件实现

这个就更加简单啦~

@Overridepublic boolean onTouchEvent(MotionEvent event) {int action = event.getAction();switch (action) {case MotionEvent.ACTION_DOWN:if (onClickListener != null) {onClickListener.onClick(data.get(mIndex));}break;}return true;}

然后开放一些其余的接口

/*** 设置广告文字的停顿时间* */public void setIntervalTime(int mInterval) {this.mInterval = mInterval;}/*** 设置文字从出现到消失的时长* */public void setDurationTime(int mDuration) {this.mDuration = mDuration;}/*** 设置文字颜色* */public void setNoticeColor(int mFrontColor) {textPaint.setColor(mFrontColor);}

全部代码

最后贴一下全部代码，其实就一个自定义控件

public class ENoticeView extends View {private String TAG = "Blin ENoticeView";private List<Item> data; //显示文字的数据源private int mIndex = 0; //当前的数据下标private int mDuration = 400; //文字从出现到显示消失的时间private int mInterval = 3000; //文字停留在中间的时长切换的间隔private boolean isMove = false; //文字是否移动private boolean isStart = false; //是否开始private int mY = 0; //文字的初始Y坐标private int nY = 0; //文字的Y坐标private Paint textPaint;private final int TEXT_COLOR = 0xff333333;private final int TEXT_SIZE = 12;private Rect mRect;private TimerTask timerTask;public ENoticeView(Context context) {super(context);init();}public ENoticeView(Context context, AttributeSet attrs) {super(context, attrs);init();}public ENoticeView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init(){textPaint = new Paint();textPaint.setAntiAlias(true);textPaint.setDither(true);textPaint.setColor(TEXT_COLOR);DisplayMetrics metrics =  new DisplayMetrics();metrics.setToDefaults();textPaint.setTextSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,TEXT_SIZE,metrics));}@Overrideprotected void onDraw(final Canvas canvas) {if(data != null){if(mY == 0&&!isMove){mRect = new Rect(20, 20, getMeasuredWidth()-20, getMeasuredHeight()-20);Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();mY = (mRect.bottom + mRect.top - fontMetrics.bottom - fontMetrics.top) / 2;nY = mY;}Item item = data.get(mIndex);String text = item.getName();canvas.drawText(text,mRect.left, nY, textPaint);if(!isStart){isStart = true;Timer timer = new Timer();countingDown = mInterval+mDuration;timer.schedule(new TimerTask() {@Overridepublic void run() {countingDown -=20;if(countingDown<=0) {countingDown = mInterval + mDuration;isMove = true;}if(countingDown<=mInterval-40&&countingDown>0){isMove = false;drawTextStill();}if(isMove) {drawTextMove();}}},mInterval,20);}}}private long countingDown = 0;private void drawTextStill(){nY = mY;postInvalidate();}private void drawTextMove(){nY -=  getMeasuredHeight()/(mDuration/20);if(nY<0){mIndex++;if(mIndex == data.size())mIndex = 0;nY = getMeasuredHeight();}postInvalidate();}@Overridepublic boolean onTouchEvent(MotionEvent event) {int action = event.getAction();switch (action) {case MotionEvent.ACTION_DOWN:if (onClickListener != null) {onClickListener.onClick(data.get(mIndex));}break;}return true;}public interface OnNoticeClickListener {public void onClick(Item item);}private OnNoticeClickListener onClickListener;public void setOnNoticeClickListener(OnNoticeClickListener onClickListener) {this.onClickListener = onClickListener;}/*** 设置数据源* */public void setData(List<Item> data) {this.data = data;invalidate();}/*** 设置数据源,并且重置* */public void setData(List<Item> data,boolean isReStart) {this.data = data;if (isReStart)mIndex = 0;invalidate();}/*** 设置广告文字的停顿时间* */public void setIntervalTime(int mInterval) {this.mInterval = mInterval;}/*** 设置文字从出现到消失的时长* */public void setDurationTime(int mDuration) {this.mDuration = mDuration;}/*** 设置文字颜色* */public void setNoticeColor(int mFrontColor) {textPaint.setColor(mFrontColor);}
}

用法

eNoticeView = (ENoticeView) findViewById(R.id.noticeView);
ArrayList<Item> items = new ArrayList<>();
for(int i = 0;i<5;i++){Item item = new Item();item.setName("比比大哥测试:"+i);items.add(item);
}
eNoticeView.setData(items);
eNoticeView.setOnNoticeClickListener(new ENoticeView.OnNoticeClickListener() {@Overridepublic void onClick(Item item) {Toast.makeText(MainActivity.this,item.getName(),Toast.LENGTH_SHORT).show();}
});

总结

东西真的很简单，绘制的东西也非常少，难点在于上面的计时器绘制循环，这边需要仔细思考下的，然后控制一下子线程，经过测试应该没有什么大问题哈，唯一可能存在的问题就是如果你在RecyclerView中用到的话，如果控件被释放了，要怎么去取消timerTask的问题喽，思考一下呗。

传送门：https://github.com/Blincheng/ENoticeView2

最后可以去看看另一种实现思路【Android】App首页上下滚动快报控件通知控件类似京东快报控件（二）
http://blog.csdn.net/qq_25867141/article/details/54603248

【Android】App首页上下滚动快报控件通知控件类似京东快报控件（一）相关推荐

【Android】App首页上下滚动快报控件通知控件类似京东快报控件（二）
前言上一篇实现后,我就发现自己深深的受到了伤害,嗯,明明有这么好用的一个空间为什么不用呢?然后那么不服的我,马上开撸! 无图无真相实现思路这次实现的思路是主要运用ViewFlipper来实现我们 ...
【京东商城首页实战12】右侧：“京东快报”和“生活服务”
现在开始做右侧部分,效果图大致如下: 分析: 1.整个右侧属于一个大盒子,又分为上下两个盒子.上下盒子右再分为上下两个盒子. 2.特惠部分和红色图标部分都是用li标签做. 1."京东快报&q ...
Android之高仿京东APP首页“京东快报”自动向上滚动的广告条
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51013562 本文出自:[顾林海的博客] ##前言上次在京东APP上 ...
android横向滑动控件,Android学习——HorizontalScollview水平滚动控件
HorizatalScollView控件只是支持水平滚动,而且它只能包含一个控件,通常是在标签中定义一个标签并且在标签中android:orientation属性值设置为horization.然后在 ...
android 获取控件 id 工具,如何使用appium desktop 获取Android APP 控件的id
背景: 随着Android 版本的更新,你会发现我们之前用的最新的版本的Appium 1.5.3无法启动我们的 Android APP 在模拟器为7.0的设备上,所以我们有必要了解如何使用 appiu ...
2023-02-24 Android app java 模拟控件点击事件，使用performClick方法去实现
一.Android app java 模拟控件点击事件,使用performClick方法去实现. 二.实际使用 private TextView m_bt_connect ;m_bt_connect ...
仿京东首页的京东快报，自动向上滚动的广告条
向上滚动的广告条实现原理起初看到这个效果时,第一个想法就是向上移动动画+定时器,但当我准备写时发现,滚动时上下文字都是逐渐出来的(有点像滑动的),如果用动画的话不行,如果用滑动的话,那就是List ...
android高仿京东快报（垂直循环滚动新闻栏）
的android高仿京东快报(垂直循环滚动新闻栏) 标签: 机器人 2016年3月20日03:08 2676阅读人评论(15)收藏举报分类: 机器人(71) 版权声明:本文为博主原创文章, ...
Android 开发 -- 开发第一个安卓程序、Android UI开发（布局的创建：相对布局和线性布局、控件单位：px pt dp sp、常用控件、常见对话框、ListView）
文章目录 1. 开发第一个Hello World程序 1.1 开发程序 1.2 认识程序中的文件 1.3 Android程序结构 1.4 安卓程序打包 2. Android UI开发 2.1 布局的创 ...

【Android】App首页上下滚动快报控件通知控件类似京东快报控件（一）

前言

实现思路

文字的滚动效果实现

点击事件实现

然后开放一些其余的接口

全部代码

用法

总结

【Android】App首页上下滚动快报控件通知控件类似京东快报控件（一）相关推荐

最新文章

热门文章

【Android】App首页上下滚动快报控件 通知控件 类似京东快报控件（一）

前言

实现思路

文字的滚动效果实现

点击事件实现

然后开放一些其余的接口

全部代码

用法

总结

【Android】App首页上下滚动快报控件 通知控件 类似京东快报控件（一）相关推荐

最新文章

热门文章

【Android】App首页上下滚动快报控件通知控件类似京东快报控件（一）

【Android】App首页上下滚动快报控件通知控件类似京东快报控件（一）相关推荐