android跑马灯效果横向,Android 通过自定义View实现纵向跑马灯效果
录制的gif有点卡,真实的效果还是很流畅的。
跑马灯在我们日常使用的app中还是很常见的,以前做外卖app的时候商家公告就使用了此效果,但是它是横向滚动的,横向滚动多适用于单条信息;但凡涉及到多条信息的滚动展示,用纵向滚动效果会有更好的用户体验,今天我们通过自定义View来看看如何实现纵向跑马灯效果。
思路
通过上面的gif图可以得出结论,其实它就是同时绘制两条文本信息,然后通过动画不断的改变两条文本信息距离顶部的高度,以此来实现滚动的效果。
具体实现
首先定义一些要用到的属性
动画开始延迟时间
动画重复延迟时间
单个动画的执行时间
接下来解析属性值
private void init(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MarqueeViewStyle);
mTextColor = typedArray.getColor(R.styleable.MarqueeViewStyle_textColor, Color.BLACK);
mTextSize = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_textSize, 45);
mPaddingLeft = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_paddingLeft, 15);
mPaddingTop = mPaddingBottom = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_paddingTopBottom, 25);
mPaddingTop = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_paddingTop, mPaddingTop);
mPaddingBottom = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_paddingBottom, mPaddingBottom);
itemAnimationTime = typedArray.getInteger(R.styleable.MarqueeViewStyle_itemAnimationTime, 1000);
reRepeatDelayTime = typedArray.getInteger(R.styleable.MarqueeViewStyle_reRepeatDelayTime, 1000);
startDelayTime = typedArray.getInteger(R.styleable.MarqueeViewStyle_startDelayTime, 500);
typedArray.recycle();
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setTextSize(mTextSize);
mPaint.setColor(mTextColor);
mPaint.setTextAlign(Paint.Align.LEFT);}
重写onMeasure方法
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if(mTextArray == null || mTextArray.length == 0) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} else {
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
ViewGroup.LayoutParams lp = getLayoutParams();
setMeasuredDimension(getViewWidth(lp, width), getViewHeight(lp, height));
}
}
数据为空时调用父类的方法,设置数据以后根据不同的布局计算宽高。
设置数据
public void setTextArray(String[] textArray) {
if(textArray == null || textArray.length <= 1) return;
mTextArray = textArray;
initTextRect();
setTextCurrentOrNextStatus(0, 1, true);
startAnimation();}
initTextRect()方法是计算出单个文本的高度和数组中最大文本的宽度,文本的高度用来计算绘制文本时的位置,文本的最大宽度在onMeasure()方法的时候会用到。
setTextCurrentOrNextStatus()方法设置当前的position,文本以及下一个position,文本。还有文本距离顶部的初始化高度。
startAnimation() 方法 开始执行动画。
动画实现
private void startAnimation() {
va = ValueAnimator.ofFloat(0, 1);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mProgress = (float) animation.getAnimatedValue();
. int moveOffset = (int) (mTextMoveOffset * mProgress);
mCurrentTextMoveMarginTop = mCurrentTextInitMarginTop - moveOffset;
mNextTextMoveMarginTop = mNextTextInitMarginTop - moveOffset;
postInvalidate();
}
});
va.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationRepeat(Animator animation) {
va.pause();
setTextCurrentOrNextStatus(mNextTextPosition, mNextTextPosition + 1, false);
handler.postDelayed(new Runnable() {
@Override
public void run() {
if(!mIsPause) {
va.resume();
}
}
}, reRepeatDelayTime);
}
});
va.setRepeatCount(-1);
va.setDuration(itemAnimationTime);
va.setStartDelay(startDelayTime);
va.start();
}
va.setRepeatCount(-1); 设置动画无限重复
onAnimationUpdate() 方法得到动画执行的进度,计算出text距离顶部的距离,调用postInvalidate()方法刷新界面。
onAnimationRepeat() 方法,通过handler延迟reRepeatDelayTime时间,再重新执行动画。
绘制
protected void onDraw(Canvas canvas) {
if(mTextArray == null || mTextArray.length == 0) {
super.onDraw(canvas);
} else {
canvas.drawText(mCurrentText, mPaddingLeft, mCurrentTextMoveMarginTop, mPaint);
canvas.drawText(mNextText, mPaddingLeft, mNextTextMoveMarginTop, mPaint);
}
}
结束
至此所有的代码已经分析完毕,其实实现这个效果还有很多种方法,通过继承ViewGroup等等都可以实现,大家有兴趣可以自己尝试。
android跑马灯效果横向,Android 通过自定义View实现纵向跑马灯效果相关推荐
- android跑马灯效果横向,Android自定义View实现纵向跑马灯效果详解
首先看看效果图(录制的gif有点卡,真实的效果还是很流畅的) 实现思路 通过上面的gif图可以得出结论,其实它就是同时绘制两条文本信息,然后通过动画不断的改变两条文本信息距离顶部的高度,以此来实现滚动 ...
- android自定义拱形,Android自定义View实现圆弧进度的效果
前言 Android开发中,常常自定义View实现自己想要的效果,当然自定义View也是Android开发中比较难的部分,涉及到的知识有Canvas(画布),Paint(画笔)等,自定义控件分为三种: ...
- Android绘制竖直虚线完美解决方案—自定义View
Android绘制竖直虚线完美解决方案-自定义View 开发中我们经常会遇到绘制虚线的需求,一般我们使用一个drawable文件即可实现,下面我会先列举常规drawable文件的实现方式. 使用dra ...
- android 自定义view xml ,Android实现在xml文件中引用自定义View的方法分析
本文实例讲述了Android实现在xml文件中引用自定义View的方法.分享给大家供大家参考,具体如下: 在xml中引用自定义view 方法一: android:layout_width=" ...
- android 图片跑马灯动画,【Android自定义View】- 文本跑马灯效果
简介 有些时候,文字过长,或者有多条需要展示的文本时,我们需要将文本进行左右滚动,多条文本时,还得上下滚动以实现展示不同的文本内容.这时候就需要我们自定义view来实现文本跑马灯效果了. 效果图 jj ...
- android自定义计步器形状,Android自定义View仿QQ运动步数效果
本文实例为大家分享了Android QQ运动步数的具体代码,供大家参考,具体内容如下 今天我们实现下面这样的效果: 首先自定义属性: 自定义View代码如下: /** * Created by Mic ...
- Android自定义View(广告栏上下滚动效果)
需求中涉及到的广告栏变化千变万化,这里,我们综合取材,有了下面的这篇文章. 开始的时候,我们使用的是MarqueeView,继承的ViewFlipper,但是会有一些bug,比如刷新数据时的重叠阴影等 ...
- android卡包动画,自定义View实现银行卡卡包动画效果
本来不想自己造轮子的,但奈何没找动相应效果的轮子,所以只能自己写了,其实还是白嫖来的轻松,哈哈 先看效果 这个是完成的效果,还可以吧!关键也不难一个自定义View搞定 先说一下思路,继承一个Relat ...
- Android自定义View,跟随手指滑动效果
Android自定义View,实现跟随手指滑动效果, 效果如下: 一,重写onTouchEvent方法 最后返回true 二,在MotionEvent.ACTION_MOVE情况下改变自定义view ...
- Android自定义View实现滴滴验证码输入框效果
先上效果图让大家看看 1.VerficationCodeInput.Java /** * 輸入验证码的自定义view * */ public class VerificationCodeInput e ...
最新文章
- js:深入prototype(下:原型重写)
- 免费短信猫开发包dll函数解析及下载
- 跨站请求伪造CSRF
- 商显行业高速发展,如何开启全新商务会议时代
- Oracle Vm VirtualBox中安装Ubantu
- react-native 热更新react-native-pushy集成遇到的问题
- linux内核Kconfig语法
- SpringBoot实战(五):配置健康检查与监控
- Java基础篇之什么是CharArrayReader
- Eclipse下PHP开发 插件安装
- IDEA 代码格式化设置
- cada0图纸尺寸_a0图纸尺寸
- 【机器人学】当前工业机器人应用中的机械结构设计方法分析
- 微信小程序 | 微信公众平台SpringBoot开发实例 │ 开发一个简易的个人微信公众号
- 酒店客房管理系统(JAVA,JSP,SERVLET,MYSQL)
- java bmp 变色_java怎么实现将 bmp图片黑底白字转换为白底黑字?将白色设置为透明色,谢谢...
- 线性代数学习笔记——第十八讲——抽象矩阵的可逆性
- 5月28-29日规模化敏捷联合作战沙盘之乌托邦计划—成都站
- loadrunner使用sitescope监测监控mysql数据库
- ARM A35 A53
热门文章
- Dplayer Html5 弹幕视频播放器的实现
- 每日数学-三角变换恒等式
- 在内存只有10M的空间中申请一块5M的数组空间,会导致OOM吗?
- 关于maven-jdocbook-plugin插件org.jboss.highlight.XhtmlRendererFactory does not indentify an extern的一个小问题
- nginx中的sub_filter
- Apache ab 测试使用指南
- web技术分享| 前端秘籍之“易容”术
- Parity(奇偶校验)和ECC(错误检查和纠正)
- 个人开发作品分享:iTab新标签页
- 打开jsp文件出现error错误,不能查看文件内容的解决方法,亲测有效