仿即刻点赞文字部分的自定义View

原创 2017年11月14日 17:06:02

概述:在学习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地址:源码点我直达,希望喜欢的通信start一下,也欢迎提出不同见解和批评。

说明

文中关于计算改变部分和未改变部分的算法借鉴了模仿者的源代码,这里提出感谢,模仿者源码。说实话有点乱。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33553515/article/details/78532546

自定义view 仿即刻APP炫酷的点赞效果

前一段时间在掘金里看到有网友仿写了即刻APP的点赞效果,感觉很炫酷,刚好公司的项目中也用到了点赞功能,于是乎就自己动手撸了一个,在原来的基础上增加了一些配置属性。先来看看效果图:如何使用首先添加依赖:...
  • huawuque183
  • huawuque183
  • 2017-11-27 17:13:20
  • 270

Android点赞+1效果,支持文本和图像。

如何使用: public void good(View view) { ((ImageView) view).setImageResource(R.drawable.good_chec...
  • qq_35549248
  • qq_35549248
  • 2017-05-23 16:15:39
  • 503

仿即刻点赞文字部分的自定义View

概述:在学习HenCoder的过程中,有一期是模仿优秀自定义View,有一个项目是仿即刻的点赞,后来原作者在点评中提到,需要将文字和图片分开来写,并且模仿者的动画实现由点杂乱。所以决定重现实现下文字部...
  • qq_33553515
  • qq_33553515
  • 2017-11-14 17:06:02
  • 1105

简单定制Android控件(2) - 点赞列表控件

国际惯例,先放github: https://github.com/razerdp/PraiseWidget 很多时候我们都看到点赞列表这个东东的存在,最典型的就是微信的赞。而最近我司也在做圈,无...
  • mkfrank
  • mkfrank
  • 2015-11-21 13:19:13
  • 2486

仿即刻APP点赞桃心的效果

仿即刻APP点赞桃心的效果 2016-12-5更新 修改测量逻辑添加了对齐方式添加了一个评论图形的GraphAdapter修改了已知BUG 先看效果图 likeview.gif ...
  • a214024475
  • a214024475
  • 2016-12-19 10:19:10
  • 712

自定义View-仿即刻点赞效果

LikeView-仿即刻点赞效果先上效果 说下思路 1、点赞效果的小手指是先缩小有点,然后再放大,使用OvershootInterpolator插值器达到bulingbuling的效果,手指上方的...
  • u013502807
  • u013502807
  • 2017-10-27 11:53:27
  • 246

如丝般顺滑的微信朋友圈(<em>点赞</em>,评论,图文混排表情,<em>点击文字</em>链接等)

jQuery<em>点赞文字</em>放大特效代码 立即下载 上传者: struggleby 时间: 2014-08-28...<em>Android</em> QQ自动点赞脚本 立即下载 上传者: 0x3E6 时间: 2017-05-11 综合评分...
  • 2018年04月13日 00:00

6.9学习内容 设置相机参数,android古怪的bug,仿微信可点击的点赞文字

上一篇文章中,说相机设置参数无效是错误的,内疚ing。。。。 正确的设置方法是这样的: parameters = camera.getParameters(); // 获取各项参数 ...
  • u010499721
  • u010499721
  • 2015-06-09 00:16:48
  • 432

Android仿即刻APP点赞桃心的效果

仿即刻APP点赞桃心的效果
  • it_zouxiang
  • it_zouxiang
  • 2016-12-04 19:46:45
  • 910

关注我就能达到大师级水平,这话我终于敢说了

这句话我真的憋了好久。Android 工程师只要关注我,我就能让你达到大师级水平,不是面试时的吹牛逼水平,不是自我欺骗的了解皮毛的水平,是真正的开发实力。以前我有这个自信,没这个证据。但现在,证据我也...
  • LSpQ35k7O5AJ21l1H9o
  • LSpQ35k7O5AJ21l1H9o
  • 2017-10-23 00:00:00
  • 3366
收藏助手
不良信息举报
您举报文章:仿即刻点赞文字部分的自定义View
举报原因:
原因补充:

(最多只允许输入30个字)