TextView添加标签

  • 内容
  • 评论
  • 相关

前言

在开发过程中,我们经常会遇到在下面的样式需求,如果只有一行的话,我们使用ImageView+TextView可以很快的实现,但是如果有多行文字,那就需要进行一下特殊处理了。

ImageSpan的使用

ImageSpan可以用来给TextView实现图文混排,使用方式如下

效果如下

更多可以查看:https://blog.csdn.net/qq_16430735/article/details/50427978

TextView添加标签

首先我们先定义一个Tag的布局,一个非常简单的TextView

既然我们要进行图文混排,那么就需要将TextView转换为bitmap然后使用ImageSpan来替换

完整代码如上,首先加载tag布局,然后转换为Bitmap。

没有其他问题了吗?

当我们的Tag的文字大小与间距和TextView的一样的时候是非常完美的,但是当我们的Tag文字大小比较大,或者比较小的时候,Tag就无法进行居中对齐了。

ImageSpan居中对齐

我们可以继承ImageSpan并重写draw方法,然后加入自己的绘制逻辑。

几个参数的介绍

y:替换文字的基线坐标。

top:替换改行文字的最顶部位置。

bottom:替换改行文字的最底部位置,行间距属于上一行,因而bottom是行间距的底部位置。

参数中的y代表TextView中文字的基线位置,通过FontMetricsInt我们可以算出文字在TextView的中间位置,然后我们让图片的中间位置与TextView的中间位置对齐即可,因为图片的默认绘制是从上到下,顶部贴着TextView的顶部,所以图片的中间位置则是图片高度的一半。

具体计算逻辑

y +fontMetricsInt.descent得到字体的descent线坐标

y + fontMetricsInt.ascent得到字体的ascent线坐标

两者相加除以2,得到改行文字的中线坐标

drawable.getBounds().bottom/2得到图片中线坐标

然后两者相减,即可获得图片需要移动多长的距离可以居中

最后将相减得到的距离传给canvas.translate(x,transY)即可

参考链接:

https://www.jianshu.com/p/04fbfe2b73cf

https://juejin.im/post/5b0ed4286fb9a009f02a9a64#heading-5

https://blog.csdn.net/qq_16430735/article/details/50427978

评论

0条评论

发表评论

电子邮件地址不会被公开。