小編給大家分享一下android如何實(shí)現(xiàn)仿即刻點(diǎn)贊文字部分的自定義View，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)、果洛州網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)、果洛州網(wǎng)絡(luò)營(yíng)銷、果洛州企業(yè)策劃、果洛州品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供果洛州建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

概述：在學(xué)習(xí)HenCoder的過(guò)程中，有一期是模仿優(yōu)秀自定義View，有一個(gè)項(xiàng)目是仿即刻的點(diǎn)贊，后來(lái)原作者在點(diǎn)評(píng)中提到，需要將文字和圖片分開(kāi)來(lái)寫，并且模仿者的動(dòng)畫實(shí)現(xiàn)由點(diǎn)雜亂。所以決定重現(xiàn)實(shí)現(xiàn)下文字部分的效果。并拓展了更多功能。最后說(shuō)一句本文基于kotlin實(shí)現(xiàn)。不明白的地方請(qǐng)?jiān)谠u(píng)論區(qū)指出。

即刻原效果：個(gè)人效果：

分析

從效果圖容易看出，圖中的功能主要分為兩個(gè)部分：

1. 左側(cè)大拇指動(dòng)畫

2. 右側(cè)的文字動(dòng)畫

拓展的功能包括：文字變換模式（全部和部分） 改變文字和未改變文字的間隔和顏色，文字始終位于中心位置。

一 文字的繪制

對(duì)文字繪制還不熟悉的同學(xué)請(qǐng)參考HenCoder系列文章，這里只對(duì)怎么實(shí)現(xiàn)居中的作一下說(shuō)明。

1 水平居中

水平居中的繪制按文字變換模式分為兩種

全部改變時(shí)：

控件寬度的一半減去文字寬度的一半 即是文字開(kāi)始繪制的位置

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)

部分改變時(shí)

計(jì)算每部分文字起始位置

 // 獲取部分改變的模式時(shí)的繪制文字其實(shí)起始位置
 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 垂直居中

垂直居中的實(shí)現(xiàn)，最重要的是需要計(jì)算文字基線在垂直方向的位置 計(jì)算公式就不在這里解釋了

 var fontMetrics = mPaint.fontMetrics
// 文字基線y軸坐標(biāo) 為了 讓文字 垂直居中
val baseLineY = height / 2 - fontMetrics.top / 2 - fontMetrics.bottom / 2

二 動(dòng)畫的實(shí)現(xiàn)

可以看到 我們默認(rèn)是沒(méi)有點(diǎn)贊的，然后點(diǎn)一下就贊，再點(diǎn)一下 取消點(diǎn)贊。所以思路是這樣的 首先繪制居中文字，然后在控件看不到的下方再繪制一遍，然后根據(jù)平移動(dòng)畫完成這個(gè)效果，這個(gè)動(dòng)畫是通過(guò)屬性動(dòng)畫實(shí)現(xiàn)的。

 // 為了顯示效果 根據(jù)是否是全部改變 設(shè)置不同的繪制方式

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) {

/ 獲取部分改變的模式時(shí)的繪制文字其實(shí)起始位置
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)
    }

可以看到 在設(shè)置繪制垂直方向的位置的時(shí)候，都加入了一個(gè) yOffset 的變量，通過(guò)改變這個(gè)屬性的值也顯示動(dòng)畫，那個(gè)這個(gè)值的最大值很明顯就是 文字高度的一半加上控件高度的一半。

halfOfTextHeight = (fontMetrics.bottom - fontMetrics.top) / 2
textOffset = (halfOfTextHeight + height / 2)

自定義屬性動(dòng)畫必須添加的 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
    }
  }
 // 調(diào)用
 val tv: ThumbsView = findViewById(R.id.thumbsView1) as ThumbsView
 tv.show()

以上是“android如何實(shí)現(xiàn)仿即刻點(diǎn)贊文字部分的自定義View”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！