android 图片跑马灯动画,【Android自定义View】- 文本跑马灯效果
简介
有些时候,文字过长,或者有多条需要展示的文本时,我们需要将文本进行左右滚动,多条文本时,还得上下滚动以实现展示不同的文本内容。这时候就需要我们自定义view来实现文本跑马灯效果了。
效果图
jjj.gif
Android文本参数 - FontMetrics
当我们要自己绘制文本的时候,怎么去计算文字的宽高,有些时候将本文的绘制起点设置为文本控件的中心点,却发现绘制的文本并不是居中的,下面讲解Android中文本是怎么样确定文本的绘制起点的。基准点是baseline
Ascent是baseline之上至字符最高处的距离
Descent是baseline之下至字符最低处的距离
Leading文档说的很含糊,其实是上一行字符的descent到下一行的ascent之间的距离
Top指的是指的是最高字符到baseline的值,即ascent的最大值
bottom指的是最下字符到baseline的值,即descent的最大值
详情图
204735397.png
简化版图
ll.gif
在Android中,文字的绘制都是从Baseline处开始的,Baseline往上至字符最高处的距离我们称之为ascent(上坡度),Baseline往下至字符最底处的距离我们称之为descent(下坡度),而leading(行间距)则表示上一行字符的descent到该行字符的ascent之间的距离,top和bottom文档描述地很模糊,其实这里我们可以借鉴一下TextView对文本的绘制,TextView在绘制文本的时候总会在文本的最外层留出一些内边距,为什么要这样做?因为TextView在绘制文本的时候考虑到了类似读音符号,可能大家很久没写过拼音了已经忘了什么叫读音符号了吧……下图中的A上面的符号就是一个拉丁文的类似读音符号的东西:
gg.png
文本居中绘制:// 计算Baseline绘制的起点X轴坐标baseX = (int) (canvas.getWidth() / 2 - textPaint.measureText(TEXT) / 2);// 计算Baseline绘制的Y坐标baseY = (int) ((canvas.getHeight() / 2) - ((textPaint.descent() + textPaint.ascent()) / 2));
canvas.drawText(TEXT, baseX, baseY, textPaint);
思路单条文本private void doSingleLineText(Canvas canvas){
viewHeight = getMeasuredHeight() + 10;
viewWidth = getMeasuredWidth();
contentBound.set(0,0,0,0);
contentPaint.getTextBounds(singleText, 0, singleText.length(), contentBound);
xOffset = contentBound.width() - viewWidth;
Paint.FontMetrics fontMetrics = contentPaint.getFontMetrics(); int textHeight = (int) ((-fontMetrics.ascent - fontMetrics.descent) / 2);
yStartPos = viewHeight / 2 + maxContentHeight / 4 + textHeight / 4; if (!hasInited) {
hasInited = true;
currentX = 0;
xStartPos = currentX;
} if (xOffset > 0) {
xOffset += contentTextSize * 2; if (!isHorizontalRunning) {
isHorizontalRunning = true; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
startHorizontalLoop();
}
}
}
canvas.drawText(singleText, currentX, yStartPos, contentPaint);
} private void startHorizontalLoop() {
ValueAnimator horizontalScrollAnimator; if (horizontalOriLeft) {
horizontalScrollAnimator = ValueAnimator.ofFloat(0, 1);
} else {
horizontalScrollAnimator = ValueAnimator.ofFloat(0, -1);
} if (horizontalScrollSpeed * xOffset / contentTextSize
isHorizontalRunning = false; return;
}
horizontalScrollAnimator.setDuration(horizontalLoopSpeed * xOffset / contentTextSize);
horizontalScrollAnimator.setInterpolator(mLinearInterpolator);
horizontalScrollAnimator.start();
horizontalScrollAnimator.addUpdateListener(mHorizontalLoopUpdateListener);
horizontalScrollAnimator.addListener(mHorizontalLoopListenerAdapter);
}
上面的逻辑其实很简单,可以自己查看,我这里随便说一下,Android文本相关的知识多条文本private void doMultiLineText(Canvas canvas){ if (currentIndex >= contentList.size()) {
currentIndex = 0;
}
viewHeight = getMeasuredHeight();
viewWidth = getMeasuredWidth();
String currentString = contentList.get(currentIndex); int nextIndex = currentIndex + 1; if (currentIndex + 1 >= contentList.size()) {
nextIndex = 0;
}
String nextString = contentList.get(nextIndex);
contentBound.set(0,0,0,0);
contentPaint.getTextBounds(currentString, 0, currentString.length(), contentBound);
xOffset = contentBound.width() - viewWidth;
Paint.FontMetrics fontMetrics = contentPaint.getFontMetrics(); int textHeight = (int) ((-fontMetrics.ascent - fontMetrics.descent) / 2);
yStartPos = viewHeight / 2 + maxContentHeight / 4 + textHeight / 4; if (!hasVerticalInited) {
hasVerticalInited = true;
currentY = yStartPos;
} if (xOffset > 0) { //另外加点留白.设留白两个字宽
xOffset += contentTextSize * 2; if (!isHorizontalRunning && !isVerticalRunning) {
isHorizontalRunning = true; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
startHorizontalScroll();
}
currentX = 0;
}
} else { if (!isVerticalRunning) {
isVerticalRunning = true; if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
startVerticalInterval();
}
currentX = 0;
}
}
canvas.drawText(currentString, currentX, currentY, contentPaint);
canvas.drawText(nextString, 0, currentY + viewHeight, contentPaint);
}
多条文本,其实是在单条文本的基础上,加了一个向上滚动的动画,当像左滚动结束后,开启向上滚动动画,同时,当前滚动动画的文本index加一,详细代码请查看源码,下面会给出完成的源码地址。
作者:奔跑的平头哥
链接:https://www.jianshu.com/p/2274c401dea9
android 图片跑马灯动画,【Android自定义View】- 文本跑马灯效果相关推荐
- android 清空canvas部分内容_Android自定义View实现圆形头像效果
在我们的APP中通常会遇到,展示圆形头像的需求,一般通过Glide就能实现,但是让我们做一个圆形头像,如果让我们自定义实现这种效果,该怎样做呢? 好,接下来本文通过三种方式来实现这种效果! 注意:这是 ...
- android 图片预览动画,Android实现仿Windows7图片预览窗格效果
本实例将显示类似于windows7提供的图片预览窗格效果,单击任意一张图片,可以在右侧显示该图片的预览效果. 效果如图所示: 具体实现方法: res/layout/main.xml: android: ...
- android图片做平移动画,Android中用Matrix实现ImageView里的图片平移和缩放动画
注: 这里说的图片的平移和缩放不是对ImageView整个view进行的,而是对ImageView里面的图片进行的(view本身没有什么变化),所以Android自带的动画效果不能满足需求. 功能点: ...
- android 图片预览动画,Android图片上传实现预览效果
首先具体分析一下,实现的功能,其中需求分析是必不可少的,需求.逻辑清除之后,再上手写代码,思路会很清晰. 1.多图上传首先得选择图片(这里项目需求是既可以拍照上传也可以从相册中选择) 2.拍照上传很简 ...
- Android 抖音爱心动画,Android自定义View实现抖音飘动红心效果
本文实例为大家分享了Android自定义View实现抖音飘动红心效果的具体代码,供大家参考,具体内容如下 自定义View--抖音飘动红心 效果展示 动画效果 使用自定义view完成红心飘动效果 Vie ...
- Android属性动画与自定义View——实现vivo x6更新系统的动画效果
晚上好,现在是凌晨两点半,然后我还在写代码.电脑里播放着<凌晨两点半>,晚上写代码,脑子更清醒,思路更清晰. 今天聊聊属性动画和自定义View搭配使用,前面都讲到自定义View和属性动画, ...
- Android 气泡动画(自定义View类)
Android 气泡动画(自定义View类) 一.前言 二.代码 1. 随机移动的气泡 2.热水气泡 一.前言 最近有需求制作一个水壶的气泡动画,首先在网上查找了一番,找到了一个文章. https:/ ...
- Android绘图机制(二)——自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解
Android绘图机制(二)--自定义View绘制形, 圆形, 三角形, 扇形, 椭圆, 曲线,文字和图片的坐标讲解 我们要想画好一些炫酷的View,首先我们得知道怎么去画一些基础的图案,比如矩形,圆 ...
- android 高仿ios开关,Android自定义view仿IOS开关效果
本文主要讲解如何在 Android 下实现高仿 iOS 的开关按钮,并非是在 Android 自带的 ToggleButton 上修改,而是使用 API 提供的 onDraw.onMeasure.Ca ...
- Android安卓仿IOS音量调节-自定义view系列(4)
Android安卓仿IOS音量调节-自定义view系列 功能简介 主要实现步骤 xml相关属性设置 java代码 Android技术生活交流 更多其他页面-自定义View-实用功能合集:点击查看 Gi ...
最新文章
- AI一分钟|阿里AI鉴黄师或将取代人类;特斯拉私有化空头潜在利润超10亿美元
- c3p0和jdbctemplate配置oracle集群rac,C3P0连接池、DRUID连接池和JdbcTemplate
- 满城尽带比特币:程序员如何发布自己的 ICO?
- 为什么选择Netty作为基础通信组件?
- 阿里云PolarDB重大更新:两大技术突破,传统数据库一键迁移上云
- python列表对应元素合并为列表及判断一个列表是几维
- idea加载lombok插件
- C/C++编程(尾积相乘)
- WordPress缓存插件WP-Super-Cache安装使用
- 《Ext JS权威指南》节选:树的动态加载及节点维护
- 对比学习(Contrastive Learning) (1)
- 如何用vrml技术实现虚拟计算机组装实验,虚拟现实技术在计算机组装教学中的应用研究...
- css文字向右对齐_css怎么设置右对齐?
- 内存诊断工程搭建及demo测试
- 关于360与腾讯QQ之争 IT人士的看法
- 俄勒冈大学计算机科学专业,俄勒冈大学计算机与信息科学详解 热门专业还等什么...
- Google中国(谷歌)汉化大事记
- 武汉旅游攻略(部分)
- 【例8-13】用字符指针操作字符串
- Linux下C编程入门和总结