android 点赞源码,android仿即刻点赞文字部分的自定义View的示例代码
概述:在学习HenCoder的过程中,有一期是模仿优秀自定义View,有一个项目是仿即刻的点赞,后来原作者在点评中提到,需要将文字和图片分开来写,并且模仿者的动画实现由点杂乱。所以决定重现实现下文字部分的效果。并拓展了更多功能。最后说一句本文基于kotlin实现。不明白的地方请在评论区指出。
即刻原效果:
个人效果:
分析
从效果图容易看出,图中的功能主要分为两个部分:
左侧大拇指动画
右侧的文字动画
拓展的功能包括:文字变换模式(全部和部分) 改变文字和未改变文字的间隔和颜色,文字始终位于中心位置。
一 文字的绘制
对文字绘制还不熟悉的同学请参考HenCoder系列文章,这里只对怎么实现居中的作一下说明。
1 水平居中
水平居中的绘制按文字变换模式分为两种
全部改变时:
控件宽度的一半减去文字宽度的一半 即是文字开始绘制的位置
canvas.drawText(array[1], width / 2.toFloat() - halfTextWidth(array[1]), baseLineY + yOffset, mPaint)
canvas.drawText(array[2], width / 2.toFloat() - halfTextWidth(array[2]), baseLineY + height / 2 + +halfOfTextHeight + yOffset, mPaint)
部分改变时
计算每部分文字起始位置
// 获取部分改变的模式时的绘制文字其实起始位置
startX = width / 2.toFloat() - (2 * halfTextWidth(array[0]) + mTextSpace + 2 * halfTextWidth(array[1])) / 2
mPaint.color = mNoChangeTextColor
canvas.drawText(array[0], startX, baseLineY, mPaint)
mPaint.color = mChangedTextColor
canvas.drawText(array[1], startX + 2 * halfTextWidth(array[0]) + mTextSpace, baseLineY + yOffset, mPaint)
canvas.drawText(array[2], startX + 2 * halfTextWidth(array[0]) + mTextSpace, baseLineY + height / 2 + +halfOfTextHeight + yOffset, mPaint)
2 垂直居中
垂直居中的实现,最重要的是需要计算文字基线在垂直方向的位置 计算公式就不在这里解释了
var fontMetrics = mPaint.fontMetrics
// 文字基线y轴坐标 为了 让文字 垂直居中
val baseLineY = height / 2 - fontMetrics.top / 2 - fontMetrics.bottom / 2
二 动画的实现
可以看到 我们默认是没有点赞的,然后点一下就赞,再点一下 取消点赞。所以思路是这样的 首先绘制居中文字,然后在控件看不到的下方再绘制一遍,然后根据平移动画完成这个效果,这个动画是通过属性动画实现的。
// 为了显示效果 根据是否是全部改变 设置不同的绘制方式
if (mChangeMode === 0) {
mPaint.color = mChangedTextColor
canvas.drawText(array[1], width / 2.toFloat() - halfTextWidth(array[1]), baseLineY + yOffset, mPaint)
canvas.drawText(array[2], width / 2.toFloat() - halfTextWidth(array[2]), baseLineY + height / 2 + +halfOfTextHeight + yOffset, mPaint)
} else if (mChangeMode === 1) {
/ 获取部分改变的模式时的绘制文字其实起始位置
startX = width / 2.toFloat() - (2 * halfTextWidth(array[0]) + mTextSpace + 2 * halfTextWidth(array[1])) / 2
mPaint.color = mNoChangeTextColor
canvas.drawText(array[0], startX, baseLineY, mPaint)
mPaint.color = mChangedTextColor
canvas.drawText(array[1], startX + 2 * halfTextWidth(array[0]) + mTextSpace, baseLineY + yOffset, mPaint)
canvas.drawText(array[2], startX + 2 * halfTextWidth(array[0]) + mTextSpace, baseLineY + height / 2 + +halfOfTextHeight + yOffset, mPaint)
}
可以看到 在设置绘制垂直方向的位置的时候,都加入了一个 yOffset 的变量,通过改变这个属性的值也显示动画,那个这个值的最大值很明显就是 文字高度的一半加上控件高度的一半。
halfOfTextHeight = (fontMetrics.bottom - fontMetrics.top) / 2
textOffset = (halfOfTextHeight + height / 2)
自定义属性动画必须添加的 set get 方法
@Suppress("unused")
fun setYOffset(yOffset: Float) {
this.yOffset = yOffset
invalidate()
}
@Suppress("unused")
fun getYOffset() = yOffset
最后提供给外界跳用的方法
fun show() {
hasThumbs = if (hasThumbs) {
val animator = ObjectAnimator.ofFloat(this, "yOffset", -textOffset, 0f)
animator.duration = 500
animator.start()
false
} else {
val animator = ObjectAnimator.ofFloat(this, "yOffset", 0f, -textOffset)
animator.duration = 500
animator.start()
true
}
}
// 调用
val tv: ThumbsView = findViewById(R.id.thumbsView1) as ThumbsView
tv.show()
三 源码
github地址:源码点我直达
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
android 点赞源码,android仿即刻点赞文字部分的自定义View的示例代码相关推荐
- [Android精品源码] Android 仿美团网,探索ListView的A-Z字母排序功能实现选择城市
Material Design中文版Code4APPPHP100UI4APP 开启辅助访问设为首页收藏本站快捷导航切换到宽版切换风格 石刚 | |我的 |签到打卡 |设置 |消息 |提醒(2) |退出 ...
- android社交源码,原生仿微信社交社区即时通讯聊天双端APP源码开源 带PC客户端...
野火IM是一套跨平台.核心功能开源的即时通讯解决方案,主要包含以下内容. | 仓库 | ...
- android intent 源码,Android 基础之 IntentService 源码
Android 基础之 IntentService 源码 Android,IntentService,源码 IntentService 位于 android.app 包下面,是 Service 的一个 ...
- android 倒计时 源码,Android倒计时 Android仿京东倒计时 android电商app源码倒计时源码...
countdown 一个简单的计时器 提供了一些方法 设置margin public void setLinearLayoutMargin(int left, int top, int right, ...
- 怎么看android底层源码,Android 底层按键获取
与用户交互的输入设备(触摸屏,键盘等)是获取用户意图的来源.由于硬件本身的物理特性及由各大硬件厂商的标准不一,这将导致我们从设备上获取到的键值存在一定的差异性,为了让系统能够正确处理用户的操作,我们就 ...
- 怎么看android底层源码,Android底层有必定的认识,研究过相关的Android源码
1.系统架构:java 一).系统分层:(由下向上)[如图]android 一.安卓系统分为四层,分别是Linux内核层.Libraries层.FrameWork层,以及Applications层:g ...
- android面试 源码,Android面试题-onCreate源码都没看过,怎好意思说自己做android-Go语言中文社区...
自定义控件 联网 工具 数据库 源码分析相关面试题 Activity相关面试题 Service相关面试题 与XMPP相关面试题 与性能优化相关面试题 与登录相关面试题 与开发相关面试题 与人事相关面试 ...
- android 赛车 源码,android 3D风格赛车游戏源码
android 3D风格赛车游戏源码,基于Libgdx 框架开发,三维视觉,包含20量敌方车辆和10量我方车辆,支持Admob广告插件,带游戏排行榜和成就系统 ,兼容手机.平板电脑等多种屏幕尺寸 ,游 ...
- android snackbar源码,Android中Snackbar的使用方法及小技巧
前言 Snackbar和Toast相似,都是为了给用户提供交互信息,Snackbar是固定在底部的,显示时从下往上滑出 要使用Snackbar,需要在项目的build.gradle中添加依赖 depe ...
最新文章
- 线性代数 第一章 行列式
- php django mysql配置文件_Mysql学习Django+mysql配置与简单操作数据库实例代码
- Zero-shot Learning / One-shot Learning / Few-shot Learning
- bzoj 4827 [Hnoi2017]礼物——FFT
- Spring Boot : Spring Boot Slf4j 以及 log4j 以及门面日志
- jquery中的页面加载方法load()
- 几个交换问题的咨询?
- 使用Safari浏览器自带工具,查看页面中 css 样式的引用~
- 自定义TextView显示指定行数
- Idea的JShell Console
- VBS写出有趣的整人代码
- iOS开发雷达动画效果实现
- 如何将PDF分成每页单独的PDF?3种PDF拆分的方法
- Router+Redux学习总结
- 各类无次数限制的免费API接口,再也不怕找不到免费API了
- 快速将PDF转换为图片:免费的在线PDF转换器
- 汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具。
- Linux中修改或重置密码
- 骁龙778g相当于麒麟多少
- IntelliJ IDEA查看类层次结构图
热门文章
- 分治算法 求第k小元素 O(n) O(nlog2^n)
- 苹果手机投影到墙上_买家用投影仪必须知道的常识(去专业、简单易懂,绝对无广告)...
- 基于TCP的简单服务器
- 怎么样才能进入BAT公司的研发部门
- Mac中从pdf文件中提取指定页的方法
- idea maven添加子moudle父pom被覆盖
- Sky Hackthon比赛指北-基础篇
- mysql1062duplicate
- 计算机语言输入不见了,电脑输入法为什么不见了
- 影响Google Adsense广告单价高低的因素分析获取更高的收入