android 渐变字体,Android 仿今日头条文字渐变效果

概述

本文主要分享仿今日头条文字渐变效果，效果图如下：

Screenrecorder-2020-07-15-15-47-30-244.gif

实现要点：

绘制水平垂直居中的文本

采用画布裁剪实现渐变效果

绘制水平垂直居中的文本

文本水平居中

文本水平居中有两种方式：

调用Paint的setTextAlign(Paint.Align.CENTER)方法

控件宽度 / 2 - 文字宽度 / 2计算文本的x轴坐标

文本垂直居中

文本垂直居中重点在于计算基准线，大致过程如下：

获取View的中心位置

中心位置下移半个字体的高度

上移descent，达到文字的最终位置即BaseLine的位置

代码实现如下：

Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();

float baseLine = (getHeight() + fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent;

为了方便理解，baseLine的计算，可参考下图：

966618-20170921162908009-1156220555.png

画布裁剪实现渐变效果

文字渐变主要是通过画布裁剪实现的，裁剪渐变部分与不变部分再进行叠加，从而达到渐变的效果，这种实现方式有一个好处是防止过度绘制。

关键代码如下：

//渐变部分

private void drawGradientText(Canvas canvas) {

//保存当前画布

canvas.save();

//文字水平居中方案二：x = getWidth() / 2 - 文字宽度 / 2

float textWidth = mTextPaint.measureText(mText, 0, mText.length());

float x = (getWidth() - textWidth) / 2;

//文字垂直居中：BaseLine的计算 = getHeight() / 2 + 文字高度 / 2 - descent

Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();

float textHeight = fontMetrics.descent - fontMetrics.ascent;

float