【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】android如何實(shí)現(xiàn)仿即刻點(diǎn)贊文字部分的自定義View

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】android如何實(shí)現(xiàn)仿即刻點(diǎn)贊文字部分的自定義View

在下給大家分享一下android如何實(shí)現(xiàn)仿即刻點(diǎn)贊文字部分的自定義View，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！概述：在學(xué)習(xí)HenCoder的過(guò)程中，有一期是模仿優(yōu)秀自定義View，有一個(gè)項(xiàng)目是仿即刻的點(diǎn)贊，后來(lái)原作者在點(diǎn)評(píng)中提到，需要將文字和圖片分開(kāi)來(lái)寫(xiě)，并且模仿者的動(dòng)畫(huà)實(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è)部分：左側(cè)大拇指動(dòng)畫(huà)右側(cè)的文字動(dòng)畫(huà)拓展的功能包括：文字變換模式（全部和部分）改變文字和未改變文字的間隔和顏色，文字始終位于中心位置。一文字的繪制對(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)畫(huà)的實(shí)現(xiàn)可以看到我們默認(rèn)是沒(méi)有點(diǎn)贊的，然后點(diǎn)一下就贊，再點(diǎn)一下取消點(diǎn)贊。所以思路是這樣的首先繪制居中文字，然后在控件看不到的下方再繪制一遍，然后根據(jù)平移動(dòng)畫(huà)完成這個(gè)效果，這個(gè)動(dòng)畫(huà)是通過(guò)屬性動(dòng)畫(huà)實(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)畫(huà)，那個(gè)這個(gè)值的最大值很明顯就是文字高度的一半加上控件高度的一半。halfOfTextHeight

=

(fontMetrics.bottom

-

fontMetrics.top)

/

2

textOffset

=

(halfOfTextHeight

+

height

/

2)自定義屬性動(dòng)畫(huà)必須添加的setget方法

@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,

-textOffse