android仿即刻点赞文字部分的自定义View的示例代码

更新时间：2017年11月15日 11:57:42 作者：杰克庹庹

本篇文章主要介绍了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软键盘这块从我入职到现在,是一个一直纠缠我的问题,这篇文章主要给大家介绍了关于Android自定义软键盘的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-08-08
Android性能优化方案详情
这篇文章主要给大家分享的是Android项目工程内的一些性能优化方式，文章围绕Android项目工程优化方式展开内容,需要的朋友可以参考一下文章的具体详情，希望对你有所帮助
2021-11-11
android针对json数据解析方法实例分析
这篇文章主要介绍了android针对json数据解析方法,以实例形式较为详细的分析了Android操作json格式数据的各种常用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
android studio更新gradle错误构建项目失败的解决方法
这篇文章主要介绍了android studio更新gradle错误构建项目失败的解决方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
Android实现简单的照相功能
这篇文章主要为大家详细介绍了Android实现简单的照相功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
android实现搜索功能并将搜索结果保存到SQLite中(实例代码)
这篇文章主要介绍了android实现搜索功能并将搜索结果保存到SQLite中,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
Android判断11位手机号码的方法(正则表达式)
项目里头需要做一个判断用户输入的号码是否是正确的手机号码，正确的手机号码应该是11位的，这里我们需要用一个正则表达式来进行判断，下面我把写法分享给大家
2016-12-12
Android自动测试工具Monkey的实现方法
本文主要介绍Android Monkey 实现方法,Monkey测试是一种为了测试软件的稳定性、健壮性的快速有效的方法,具有非常重要的参考价值,希望对小伙伴有所帮助
2016-07-07
Android 双击返回键退出程序的方法总结
这篇文章主要介绍了Android 双击返回键退出程序的方法总结的相关资料,需要的朋友可以参考下
2017-06-06
Android中通过view方式获取当前Activity的屏幕截图实现方法
这篇文章主要介绍了Android中通过view方式获取当前Activity的屏幕截图实现方法,本文方法相对简单,容易理解,需要的朋友可以参考下
2014-09-09

android仿即刻点赞文字部分的自定义View的示例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具