Android自定义标签LabelView详细思路及过程

最新推荐文章于 2026-05-14 09:07:42 发布

原创

最新推荐文章于 2026-05-14 09:07:42 发布 · 3.8k 阅读

标签

#android #标签 #自定义View #详细流程

本文介绍如何在Android中自定义一个名为LabelTextView的View，实现圆角矩形加标签的效果。主要难点包括标签文字斜向显示、圆角矩形与三角形混合绘制以及API兼容性问题。解决方案涉及画布旋转、Path的混合模式和裁剪，以及对文字位置的精确调整。同时，文章提到不能直接使用drawable资源，因此选择让自定义View继承TextView。完整代码和示例可在GitHub找到。

自定义LabelTextView

项目需要，实现一个圆角矩形加上标签的自定义View。大概的效果是这样的

难点

标签页的范围需要贴合圆角矩形的范围
标签内的字体需要和和线平行
以及各种坑

遇到问题和解决方式

标签文字

问题

按照需求，标签的文字需要斜着展示，而默认的方式只有水平展示

解决方式

标签文字的显示之前走了不少弯路，开始想到使用画布的旋转以及计算角度来实现文字的斜着显示.。
但是效果都不好。
后来发现一个更简单的方法，通过下面方法轻松实现

canvas.drawTextOnPath(@NonNull String text, @NonNull Path path, float hOffset,
            float vOffset, @NonNull Paint paint)

圆角矩形和三角形混合绘制

问题

绘制不规则图形，像是一个圆角矩形和一个三角形的超集在减去三角形不相交的那部分

解决方式

而圆角矩形的绘制，我采取了混合模式。

先通过path绘制一个三角形，再通过混合模式将三角形和圆角矩形重合区域之外给遮盖。
我称之为混合模式其实就是使用了方法。

path.op(Path path, Path.Op op)

借用一张图展示混合模式

以及小结

         android.graphics.PorterDuff.Mode.SRC:只绘制源图像
         android.graphics.PorterDuff.Mode.DST:只绘制目标图像
         android

最低0.47元/天解锁文章