简介一份Android自定义View源码实现歌词风格的文字颜色渐变效果面向需要为TextView添加动态渐变文字的移动开发者。项目通过GradientTextView对文本着色以两种颜色平滑过渡适合音乐播放器歌词、字幕强调等场景基础与进阶Android学习者均可参考。压缩包共39个文件包含13个xml布局与配置、6个java核心逻辑、5张png示意图、4个gradle构建脚本等整体仅101KB结构轻量。已有494人学习下载。资源内附完整Gradle配置方式支持通过JitPack引入依赖同时提供源码工程、ProGuard规则及使用示例便于直接整合到自己的项目也可作为自定义View与梯度绘制的学习范本。1. 歌词风格歌词逐行滚动显示用渐变画出一条“时间线”先聊点实际的。做音乐类App或者K歌类项目时歌词展示是绕不开的模块。常规做法是整段文字堆上去当前句子高亮一下顶多再做个滚动动画。但用户真正要的是“歌词感”正在唱的那一句亮起来唱过的句子慢慢变暗未唱到的句子还在下面等着最好还有一条视觉上的时间轴让人一眼就知道进度。这个需求如果只靠TextView换个颜色效果很生硬。我做这类组件时习惯用Gradient渐变来做核心的视觉区分原理很简单让歌词文字本身带上一段从左到右或从上到下的颜色渐变再用滚动进度去控制渐变的位置这样唱到哪、唱了多少都能通过颜色过渡直观表达出来。说白了就是把歌词当成一条有颜色的“进度条”来画文字只是这条进度条的可视化载体。这篇文章就围绕“歌词风格的TextView Gradient渐变”展开适合正在做播放器界面、K歌歌词页、或者单纯想给TextView加点视觉表现力的Android开发者。你不需要额外引入复杂的三方库原生Canvas LinearGradient就能搞定我会从原理讲到完整实现最后把我在真机调试中踩过的坑一并列出来。2. 整体设计思路与其用遮罩不如让文字自带渐变2.1 为什么不用传统的“裁剪/遮罩”方案我早期做歌词高亮时用的是最常见的“双层TextView叠加遮罩”方案底层文字全亮色上层文字灰色再用一个裁切区域clipRect按进度把上层露出来。逻辑上没问题实际效果却很死板——高亮和未高亮之间是一条硬边看起来像两段文字硬拼在一起完全没有“逐渐唱完”的顺滑感。后来换成“文字颜色本身做渐变”之后效果完全不一样。核心思路是不再把歌词高亮视为“两个状态的切换”而是当成一段连续的颜色过渡。唱到30%那这行字就从左到右渐变出30%的亮色唱到80%亮色的比例随之右移。这个过程是像素级的没有任何跳变。2.2 Gradient选型LinearGradient最适合做时间轴Android里可用的渐变方式有好几种比如 RadialGradient辐射渐变、SweepGradient扫描渐变但歌词进度这种需求LinearGradient线性渐变是最对口的。原因有两个。第一歌词阅读方向是固定的要么从左到右要么从上到下线性渐变天然贴合这种方向性第二LinearGradient支持通过矩阵变换去“移动”渐变的位置而我们监控播放进度时只需要把渐变起始位置和结束位置当作变量传进去即可更新成本极低。// 构造一个从左到右的线性渐变 Shader shader new LinearGradient( 0, 0, viewWidth, 0, // 起点到终点 new int[]{highlightColor, normalColor}, // 颜色数组 new float[]{0f, 1f}, // 颜色分布位置 Shader.TileMode.CLAMP );这里的核心在于把渐变颜色数组设定成“高亮色”和“普通色”的组合字母越靠左越接近高亮色越靠右越接近普通色。再通过Matrix把整个渐变整体平移就实现了“进度感”。2.3 核心计算公式进度如何映射成渐变偏移量要真正做出歌词效果我们需要把播放进度转换成渐变在文字上的偏移距离。先定义几个变量progress当前播放进度范围 0f ~ 1f。viewWidth控件可视区域宽度。highlightWidth高亮区段的宽度这个可以按文字长度或控件宽度计算。渐变偏移量的计算方式如下float translateX -viewWidth * (1 - progress); Matrix matrix new Matrix(); matrix.setTranslate(translateX, 0); linearGradient.setLocalMatrix(matrix);这里为什么要乘以viewWidth因为LinearGradient的默认范围是整个控件宽度假设进度为0时渐变完全在可视区域左侧进度为1时渐变右移了整个宽度。这样当前唱到哪个字哪个字位置的颜色就恰好是高亮色。如果你希望高亮段只是一个固定宽度比如一行歌词的前30%那可以调整计算逻辑// 高亮区宽度 控件宽度 * 单行高亮比例 float highlightWidth viewWidth * 0.3f; // 渐变起始点偏移 进度 * (控件宽度 - 高亮区宽度) float startOffset progress * (viewWidth - highlightWidth); Shader shader new LinearGradient( startOffset, 0, startOffset highlightWidth, 0, new int[]{highlightColor, normalColor}, new float[]{0f, 1f}, Shader.TileMode.CLAMP );这种写法对“卡拉OK逐字高亮”很实用每个字的颜色从左到右逐渐变亮并且高亮段的右边缘就是当前进度。3. 完整实现打造一个LrcTextView光说原理容易下面给出一个可直接用的自定义View支持单行歌词的渐变进度效果也预留了多行歌词的扩展空间。3.1 自定义属性定义先在res/values/attrs.xml里声明自定义属性方便布局中直接配置颜色和进度。resources declare-styleable nameGradientLrcTextView attr namelrc_highlight_color formatcolor / attr namelrc_normal_color formatcolor / attr namelrc_progress formatfloat / attr namelrc_highlight_width_ratio formatfloat / /declare-styleable /resourceslrc_highlight_color高亮歌词颜色。lrc_normal_color未高亮歌词颜色。lrc_progress当前进度0f ~ 1f。lrc_highlight_width_ratio高亮区段占控件宽度的比例卡拉OK模式建议设 0.3 左右。3.2 自定义View核心代码public class GradientLrcTextView extends AppCompatTextView { private int highlightColor Color.WHITE; private int normalColor Color.GRAY; private float progress 0f; private float highlightWidthRatio 0.5f; private Paint paint; private LinearGradient linearGradient; private int viewWidth; public GradientLrcTextView(Context context) { this(context, null); } public GradientLrcTextView(Context context, AttributeSet attrs) { super(context, attrs); TypedArray ta context.obtainStyledAttributes(attrs, R.styleable.GradientLrcTextView); highlightColor ta.getColor(R.styleable.GradientLrcTextView_lrc_highlight_color, Color.WHITE); normalColor ta.getColor(R.styleable.GradientLrcTextView_lrc_normal_color, Color.GRAY); progress ta.getFloat(R.styleable.GradientLrcTextView_lrc_progress, 0f); highlightWidthRatio ta.getFloat(R.styleable.GradientLrcTextView_lrc_highlight_width_ratio, 0.5f); ta.recycle(); paint getPaint(); paint.setShader(createShader()); } Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); viewWidth w; paint.setShader(createShader()); } Override protected void onDraw(Canvas canvas) { // 使用设置了渐变的paint绘制文本 canvas.drawText(getText().toString(), getPaddingLeft(), getBaseline(), paint); } private Shader createShader() { float highlightWidth viewWidth * highlightWidthRatio; float startOffset progress * (viewWidth - highlightWidth); return new LinearGradient( startOffset, 0, startOffset highlightWidth, 0, new int[]{highlightColor, normalColor}, new float[]{0f, 1f}, Shader.TileMode.CLAMP ); } public void setProgress(float progress) { this.progress Math.max(0f, Math.min(1f, progress)); paint.setShader(createShader()); invalidate(); } }有几点提醒一下首先我没有使用super.onDraw(canvas)而是自己调canvas.drawText原因在于TextView默认的绘制流程会重新生成Shader导致自定义渐变被覆盖。直接用paint的shader去drawText是确保渐变生效的最稳妥方式。其次onSizeChanged里必须重新创建Shader因为渐变范围依赖控件真实宽度。如果在构造函数里就创建此时控件宽度还是0渐变效果会消失。3.3 在播放器中的用法布局文件中配置com.yourpackage.GradientLrcTextView android:idid/lrc_text android:layout_widthmatch_parent android:layout_heightwrap_content android:gravitycenter android:textSize18sp android:text这首歌是我对你的全部记忆 app:lrc_highlight_color#FFCC00 app:lrc_normal_color#666666 app:lrc_progress0 /播放进度回调里调用GradientLrcTextView lrcText findViewById(R.id.lrc_text); // 播放器进度回调中计算百分比 player.addProgressListener(progress - { float percent progress / player.getDuration(); lrcText.setProgress(percent); });这里有个小细节如果你用的是MediaPlayer进度回调频率是系统自带的通常几百毫秒一次视觉上已经足够流畅。但如果你在自定义编解码器里回调过快建议在setProgress里做一下进度差值判断相同值直接 return避免无意义的重绘开销。4. 常见问题与排查技巧实录4.1 TextView文本垂直居中偏移用canvas.drawText()自绘后很多人会碰到文字往上偏或往下偏的问题。原因是drawText的基准线是baseline不是文字中心。处理办法是手动计算baselineFontMetrics fm paint.getFontMetrics(); float baseline (getHeight() - fm.bottom - fm.top) / 2; canvas.drawText(text, paddingLeft, baseline, paint);4.2 渐变颜色数组是“从高亮到普通”还是“从普通到高亮”这个特别容易写反。线性渐变的颜色数组顺序是从起点到终点。如果想让进度越往右颜色越亮起点必须是普通色终点是高亮色。我上面的写法其实是反过来的渐变起点位置随进度移动渐变内部是从“高亮到普通”高亮色始终紧贴进度边缘的左侧。这符合卡拉OK那种“唱过的部分亮着、没唱的部分暗着”的直觉。具体用哪种顺序取决于你想表达的风格唱过变亮渐变数组new int[]{normalColor, highlightColor}。唱过变暗渐变数组new int[]{highlightColor, normalColor}。唱过从亮到暗、当前字最亮可以加三个颜色的渐变中间色作为峰值。4.3 歌词对不齐文字宽度如果你把LinearGradient的范围设为整个View宽度但文字并没有撑满整个View会出现渐变提前结束的情况导致后半段文字全部变成同一个颜色。解决办法有两种第一种在创建Shader前测量文本真实宽度Rect bounds new Rect(); paint.getTextBounds(text, 0, text.length(), bounds); float textWidth bounds.width();然后把LinearGradient的终点设成textWidth。但要注意后续平移计算也要基于textWidth而不是viewWidth。第二种直接让TextView宽度等于内容宽度配合Gravity.CENTER。这种方式简单但在长歌词换行时会比较麻烦。4.4 性能优化避免每帧重建Shader一开始的版本里我在setProgress中直接new LinearGradient高频回调时会频繁触发对象创建GC压力不小。优化方式是复用Shader只更新矩阵private LinearGradient gradient; private Matrix matrix new Matrix(); private void updateGradient() { float highlightWidth viewWidth * highlightWidthRatio; float startOffset progress * (viewWidth - highlightWidth); if (gradient null) { gradient new LinearGradient( 0, 0, viewWidth, 0, new int[]{highlightColor, normalColor}, new float[]{0f, 1f}, Shader.TileMode.CLAMP ); } matrix.setTranslate(startOffset, 0); gradient.setLocalMatrix(matrix); paint.setShader(gradient); invalidate(); }这里有个前提渐变颜色不随进度变化只移动位置所以Shader本身只用创建一次后续只改矩阵。实测后真机上帧率稳定连续滑动进度条也没有掉帧。4.5 多行歌词怎么处理上面的实现是单行歌词。多行歌词通常有两种场景一种是当前行和其他行的颜色对比另一种是当前行内部逐字高亮。如果是第一种更推荐用RecyclerView 每行一个歌词TextView当前行用渐变色其他行固定普通色。这样做滚动回收都很自然。如果是当前行内部逐字高亮可以实时计算每个文字的起始坐标循环drawText每个文字单独设置透明度或颜色。这种方法控制粒度更细能做出“一字一句”的卡拉OK效果但开销比Shader大需要控制歌词文本长度。5. 歌词渐变的细节打磨与进阶玩法5.1 渐变过渡带宽度怎么调如果想要更自然的过渡效果可以把渐变的颜色数组增加一个中间过渡色new int[]{normalColor, middleColor, highlightColor}, new float[]{0f, 0.7f, 1f}0.7f位置之前保持普通色最后30%的区域完成渐变过渡。这样歌词看起来不是生硬地从暗变亮而是有一条柔和的过渡光带视觉效果更像专业音乐App。5.2 字体大小适配屏幕歌词字体会直接影响渐变可视效果。字体过大时一行文字可能超出屏幕宽度导致进度还没到一半就已经跑出可视区域。我的经验是高亮区宽度比例不要写死综合考虑字体大小和最长歌词字数。float highlightWidth Math.min(textWidth * 0.3f, viewWidth);这样既保证高亮区足够醒目又不会在超长歌词时溢出。5.3 锁屏页歌词与桌面歌词的交互如果你做的App需要锁屏歌词或桌面悬浮窗歌词这套渐变TextView同样适用唯一要注意的是WindowManager添加View时不走正常的LayoutInflater流程必须手动设置宽度。WindowManager.LayoutParams params new WindowManager.LayoutParams( WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.WRAP_CONTENT, ...); GradientLrcTextView lrcView new GradientLrcTextView(context); lrcView.setLayoutParams(new FrameLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT ));在onSizeChanged回调前viewWidth还是0这时如果恰好有进度回调进来Shader会创建失败。可以加个判断if (viewWidth 0) return;等布局稳定后再走正常流程。6. 亲自踩坑后的一些经验总结歌词渐变看起来高级实现逻辑本身不复杂真正的坑全在细节里。我这里把容易栽跟头的地方再集中说一遍。第一不要在主线程里频繁做new LinearGradient。你以为一行歌词最多几十个字性能无关紧要但配上Activity转场动画或列表滑动时重绘频率会成倍放大老机型能明显感受到卡顿。复用Shader Matrix平移是性价比最高的方案。第二自定义View后一定要处理onSizeChanged和onDraw的生命周期。绕开TextView的默认draw流程意味着你失去了TextView自带的一部分能力比如行间距、字体阴影、自动换行的绘制优化。如果发现渐变出现在错误的位置先从View的实际宽度入手排查。第三渐变效果和字体颜色透明度有很大关系。如果你的普通色和高亮色都是半透明颜色叠加在不同背景上视觉差异会缩小甚至看不清渐变边界。实际上深色背景用#FFCC00这类亮色做高亮、#666666做普通色是视觉上最安全、最不踩雷的方案。最后分享一个我个人比较喜欢的小技巧给歌词TextView加一个微弱的上下边缘渐隐——用Paint的maskfilter叠加一个垂直方向的LinearGradient让歌词上下边缘自然淡出。和进度方向的渐变叠加在一起歌词页的质感会提升一个档次而且实现成本很低就是再多加两层LinearGradient的绘制性能影响几乎可以忽略。这一套Gradient歌词TextView我从最初的双层遮罩方案优化到现在线上项目跑了大半年没有出现过绘制异常或明显掉帧的情况。有需要的朋友可以直接拿去改按你自己的音乐风格调整颜色组合。如果后面有遇到更复杂的歌词语义分段需求这个View也能再往上叠加一个歌词解析器把每行文本拆成字段时间轴配合逐字渐变播放那就是正儿八经的演唱级歌词方案了。本文还有配套的精品资源点击获取