android+即刻点赞,Android开发仿即刻点赞文字部分的自定义View
有一个项目是仿即刻的点赞,后来原作者在点评中提到,需要将文字和图片分开来写,并且模仿者的动画实现由点杂乱。所以决定重现实现下文字部分的效果。并拓展了更多功能。最后说一句本文基于kotlin实现。不明白的地方请在评论区指出。 即刻原效果: 个人效果
有一个项目是仿即刻的点赞,后来原作者在点评中提到,需要将文字和图片分开来写,并且模仿者的动画实现由点杂乱。所以决定重现实现下文字部分的效果。并拓展了更多功能。最后说一句本文基于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()
android+即刻点赞,Android开发仿即刻点赞文字部分的自定义View相关推荐
- Android官方开发文档Training系列课程中文版:创建自定义View之View的交互
写在前面的话:这一章很有价值,想要提升安卓知识的一定要读一读.不做安卓的也可以得到其它方面的提升. 原文地址:http://android.xsoftlab.net/training/custom-v ...
- Android官方开发文档Training系列课程中文版:创建自定义View之View的创建
原文地址:http://android.xsoftlab.net/training/custom-views/index.html 引言 Android框架含有大量的View类,这些类用来显示各式各样 ...
- android 点赞源码,android仿即刻点赞文字部分的自定义View的示例代码
概述:在学习HenCoder的过程中,有一期是模仿优秀自定义View,有一个项目是仿即刻的点赞,后来原作者在点评中提到,需要将文字和图片分开来写,并且模仿者的动画实现由点杂乱.所以决定重现实现下文字部 ...
- 自定义Android聊天气泡ChatView。仿微信聊天气泡,能自定义边框,颜色,点击特效。
原博客地址:https://blog.csdn.net/weixin_40400031/article/details/90755036 引言:最近公司准备做一款即时通讯的APP,就照着微信的功能模块 ...
- Android 仿微信刷新旋转小风车 自定义view
不太会录像,没办法,智能截图了 不多说了,直接上代码 package com.shipneg.demoysp.demo;import android.content.Context; import a ...
- android新闻项目、饮食助手、下拉刷新、自定义View进度条、ReactNative阅读器等源码...
Android精选源码 Android仿照36Kr官方新闻项目课程源码 一个优雅美观的下拉刷新布局,众多样式可选 安卓版本的VegaScroll滚动布局 android物流详情的弹框 健身饮食记录助手 ...
- Android官方开发文档Training系列课程中文版:创建自定义View之View的优化
原文地址:http://android.xsoftlab.net/training/custom-views/optimizing-view.html 现在已经完成了一个拥有良好设计的View,它即可 ...
- Android官方开发文档Training系列课程中文版:创建自定义View之View的绘制
原文地址:http://android.xsoftlab.net/training/custom-views/custom-drawing.html#draw 自定义View最重要的部分就是它的样子了 ...
- android版本更新框架、新闻客户端、音乐播放器、自定义View、Github客户端、指南针等源码...
Android精选源码 XUpdate 一个轻量级.高可用性的Android版本更新框架 Android一个可定制的圆形进度条 Android自定义View分享 打钩动画源码 android音乐文件播 ...
- 一个炫酷的仿雷达扫描和扩散效果——自定义View就是这么简单
高仿雷达扫描效果和仿水波纹中心扩散效果,手把手教你撸一个炫酷的自定义view. 于亚豪的博客地址: blog.csdn.net/androidstar- 我们先看效果图吧 Markdown Markd ...
最新文章
- HDU 1425 sort(堆排序)
- (Excel)常用函数公式及操作技巧之四:文本与页面设置(二)
- linux chkconfig 添加服务 开机启动
- 原 水质监测系统解决方案
- lnmp环境脚本自动配置
- 苹果Xcode帮助文档阅读指南
- MVC webuploader 图片
- 显示catispecobject_CATIA CAA 二次开发 详细教程
- hhkb mac设置_把 HHKB 放在 MacBook 上使用的解决方案
- Spring Boot 2.0 都更新了什么
- java非负数校验_JavaScript正则表达式校验非负整数实例
- Ajax Beta 2.0 中 AtlasToolKit Library 控件 Accordion 后台添加
- 和好几天又开战!AMD显卡老大跳槽,要帮英特尔进军GPU
- linux内核循环,模仿Linux内核kfifo实现的循环缓存
- 事业单位计算机常识PPT,计算机基础知识:PPT常用操作(六)
- 一个强大的 JS 代码混淆工具
- 根据后缀名/扩展名获取content-type/Mime类型
- 如何快速统计考勤(bushi)
- 2D物理引擎--谁碰了我的奶酪
- 使用YOLOv5实现多路摄像头实时目标检测