CenterImageSpan

最新推荐文章于 2024-08-15 18:00:36 发布

mjlong123123

最新推荐文章于 2024-08-15 18:00:36 发布

阅读量909

点赞数

分类专栏：自定义Span 文章标签： android html5 html

本文链接：https://blog.csdn.net/mjlong123123/article/details/103589076

版权

自定义Span 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、背景

在实际的app开发过程中，我们经常需要在文本中插入图标。Android系统已经封装了ImageSpan，我们可以使用这个类实现文本插入的功能。如果ui设计师对插入图标的对齐方式有明确要求，那么用系统的ImageSpan就不能灵活的应对了。所以在这种情况下，我们需要通过自定义ImageSpan来满足ui设计师的各种要求。

二、ImageSpan的使用

ImageSpan支持三种对齐方式：

ALIGN_BASELINE，与text描绘的baseline对齐。
ALIGN_BOTTOM，与text行的bottom对齐。
ALIGN_CENTER，与text行的中间位置对齐。
我们使用这三种设置方式测试下效果。测试过程中，我们设置了lineSpacingExtra属性用于控制行间距。

ALIGN_BASELINE

在这里插入图片描述
第一行image显示没有和baseline对齐，第二行与baseline对齐。可以看出设置lineSpacingExtra影响了第一行的对齐位置。

ALIGN_BOTTOM

在这里插入图片描述
两行image都能与bottom对齐，但是在两行中与text的相对位置变化较大。

ALIGN_CENTER

在这里插入图片描述
第一行image能够与行的中间位置对齐，但是不一定与text的中间对齐。第二行image显示的位置完全错误，ALIGN_CENTER的实现应该没有考虑到换行的情况。

ImageSpan总结

三种对齐方式中只有ALIGN_BOTTOM能够很好的支持换行和lineSpacingExtra属性，但是他相对于text的显示位置不固定，实用性不大。另外的两种对齐方式有明显的显示问题，所以他们也没有应用价值。

三、CenterImageSpan实现图片居中

在这里插入图片描述
CenterImageSpan实现了与text居中对齐，通过了解它的实现方式使我们掌握自定义ImageSpan位置的技巧。
首先，ImageSpan显示的内容是bitmap，但是由于它被插入到TextView中显示，所以它也要按照text的显示规则进行显示。
在这里插入图片描述
baseline对于text描绘位置控制十分的重要，它定义了text的基准位置。还有其他的一些重要的位置信息，他们包括top（负值）、ascent（负值）、descent（正值）、bottom（正值）等，这些信息都被保存到FontMetricsInt中。图片被插入到text中后，由于图片的大小多种多样，所以图片的大小影响了每一行的FontMetricsInt信息。

 override fun getSize(
        paint: Paint,
        text: CharSequence?,
        start: Int,
        end: Int,
        fm: Paint.FontMetricsInt?//ImageSpan的FontMetricsInt信息
    ): Int {
        fm?.let {
        //paint中取出的是text的FontMetricsInt信息
 		//计算text的高度
            val fontHeight = paint.fontMetricsInt.descent - paint.fontMetricsInt.ascent
            //获取Bitmap的高度
            val imageHeight = drawable.bounds.height()
            //计算与文字居中对齐的情况下上端的位置，根据上端位置和Bitmap高度计算下端位置。
            it.ascent = paint.fontMetricsInt.ascent - ((imageHeight - fontHeight) / 2.0f).toInt()
            it.top = it.ascent
            it.descent = it.ascent + imageHeight
            it.bottom = it.descent
        }
        return drawable.bounds.right
    }

Image 的FontMetricsInt设置完后就要考虑描绘位置了，

    override fun draw(
        canvas: Canvas,
        text: CharSequence?,
        start: Int,
        end: Int,
        x: Float,
        top: Int,		//line top,It is the largest top in line.
        y: Int,			//baseline y position
        bottom: Int,	//line bottom,contain lineSpacingExtra if there is more than one line.
        paint: Paint
    ) {
    	//获取text的高度
        val fontHeight = paint.fontMetricsInt.descent - paint.fontMetricsInt.ascent
        //计算image的Ascent
        val imageAscent = paint.fontMetricsInt.ascent - ((drawable.bounds.height() - fontHeight) / 2.0f).toInt()
        canvas.save()
        //由于y代表的当前行的baseline 的坐标，所以基于baseline计算bitmap描绘位置。
        canvas.translate(x, (y + imageAscent).toFloat())
        drawable.draw(canvas)
        canvas.restore()
    }