我是靠谱客的博主 甜美鞋垫,这篇文章主要介绍android 自定义view实现跑马灯效果,现在分享给大家,希望可以做个参考。

这个效果也就是 自定义view 然后再开启一个动画,每次刷新view。

说下baseLine的计算过程:

这里写图片描述

看下自定义view:

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
package com.app.test.horseproject; import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.View; /** * Created by ${liumengqiang} on 2017/7/18. */ public class HorseView extends View { private String textString;//跑马灯的内容 private float measureWidth; //view的宽度 private float measureHeight;//view的高度 private float textWidth ;//跑马灯内容的宽度 private float baseLine;//textString的基线 private Paint paint;//画笔 private float textX = 0;//每次刷新view时 textString的X坐标 private ValueAnimator valueAnimator;//动画 private int textColor = Color.BLUE;//字体颜色 private int textSize = 30;//字体大小 public HorseView(Context context) { super(context); } public HorseView(Context context, AttributeSet attrs) { super(context, attrs); } public HorseView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); measureWidth = getMeasuredWidth(); measureHeight = getMeasuredHeight(); paint = new Paint(); paint.setStyle(Paint.Style.FILL); paint.setColor(textColor); paint.setAntiAlias(true); paint.setTextSize(textSize); textWidth = paint.measureText(textString); Paint.FontMetrics fontMetrics = paint.getFontMetrics(); baseLine = measureHeight / (float)2 + (-fontMetrics.top + fontMetrics.bottom)/(float)2 - fontMetrics.bottom; } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); /** * 判断是否为null 方式initView不设置时崩溃 */ if( null == textString || measureHeight == 0){ return; } canvas.drawText(textString, textX,baseLine,paint); } /** * 需要传入参数 * @param textString * @param duration 播放一次动画时长 */ public void initView(String textString,int duration){ this.textString = textString; setAnimationFirst(duration); } private void setAnimationFirst(int duration){ valueAnimator = ValueAnimator.ofFloat(0,textWidth + measureWidth); valueAnimator.setDuration(duration); valueAnimator.setRepeatCount(-1);//设置-1为无限循环 valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { textX = measureWidth - animation.getCurrentPlayTime() * (textWidth + measureWidth)/valueAnimator.getDuration(); postInvalidate(); } }); valueAnimator.start(); } public int getTextColor() { return textColor; } public void setTextColor(int textColor) { this.textColor = textColor; } }

可以看出 动画和view是通过textX 的值连接起来的。 关于字体颜色和字体大小可以通过相应的方法设置。我在解释两行代码

复制代码
1
valueAnimator = ValueAnimator.ofFloat(0,textWidth + measureWidth);

第二个参数的计算看下图:
这里写图片描述

实际上字符串要完全通过屏幕,需要走textWidth + measureWidth 的路程。

最近也在研究双缓冲技术。

附上跑马灯源码地址:http://download.csdn.net/detail/lmq121210/9902881

最后

以上就是甜美鞋垫最近收集整理的关于android 自定义view实现跑马灯效果的全部内容,更多相关android内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(82)

评论列表共有 0 条评论

立即
投稿
返回
顶部