Android 从零编写一个带标签的 TagTextView

1,988 阅读5分钟

别忘了常来我的 GitHub 看看,有什么好玩的~

最近公司的项目升级到了 9.x,随之而来的就是一大波的更新,其中有个比较明显的改变就是很多板块都出了一个带标签的设计图,如下:

怎么实现

看到这个,大多数小伙伴都能想到这就是一个简单的图文混排,不由得会想到鸿洋大佬的图文并排控件 MixtureTextView,或者自己写一个也不麻烦,只需要利用 shape 背景文件结合 SpannableString 即可。

确实如此,利用 SpannableString 确实是最方便快捷的方式,但稍不注意这里可能会踩坑。

private fun convertViewToBitmap(view: View): Bitmap {
    view.isDrawingCacheEnabled = true
    view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))
    view.layout(0, 0, view.measuredWidth, view.measuredHeight)
    view.buildDrawingCache()
    val bitmap = view.drawingCache
    view.isDrawingCacheEnabled = false
    view.destroyDrawingCache()
    return bitmap
}

fun setTagText(style: Int, content: String) {
    val view = LayoutInflater.from(context).inflate(R.layout.layout_codoon_tag_textview, null)
    val tagView = view.findViewById<CommonShapeButton>(R.id.tvName)
    val tag = when (style) {
        STYLE_NONE -> {
            ""
        }
        STYLE_CODOON -> {
            tagView.setStrokeColor(R.color.tag_color_codoon.toColorRes())
            tagView.setTextColor(R.color.tag_color_codoon.toColorRes())
            "自营"
        }
        STYLE_JD -> {
            tagView.setStrokeColor(R.color.tag_color_jd.toColorRes())
            tagView.setTextColor(R.color.tag_color_jd.toColorRes())
            "京东"
        }
        STYLE_TM -> {
            tagView.setStrokeColor(R.color.tag_color_tm.toColorRes())
            tagView.setTextColor(R.color.tag_color_tm.toColorRes())
            "天猫"
        }
        STYLE_PDD -> {
            tagView.setStrokeColor(R.color.tag_color_pdd.toColorRes())
            tagView.setTextColor(R.color.tag_color_pdd.toColorRes())
            "拼多多"
        }
        STYLE_TB -> {
            tagView.setStrokeColor(R.color.tag_color_tb.toColorRes())
            tagView.setTextColor(R.color.tag_color_tb.toColorRes())
            "淘宝"
        }
        else -> {
            ""
        }
    }
    val spannableString = SpannableString("$tag$content")
    val bitmap = convertViewToBitmap(view)
    val drawable = BitmapDrawable(resources, bitmap)
    drawable.setBounds(0, 0, tagView.width, tagView.height)
    spannableString.setSpan(CenterImageSpan(drawable), 0, tag.length, Spannable.SPAN_INCLUSIVE_INCLUSIVE)
    text = spannableString
    gravity = Gravity.CENTER_VERTICAL
}

companion object {
    const val STYLE_NONE = 0
    const val STYLE_JD = 1
    const val STYLE_TB = 2
    const val STYLE_CODOON = 3
    const val STYLE_PDD = 4
    const val STYLE_TM = 5
}

xml 文件的样式就不必在这里贴了,很简单,就是一个带 shape 背景的 TextView,不过由于 shape 文件的极难维护性,在我们的项目中统一采用的是自定义 View 来实现这些圆角等效果。

详细参考作者 blog:Android 项目中 shape 标签的整理和思考

圆角 shape 等效果不是我们在这里主要讨论的东西,我们来看这个代码,思路也是很清晰简洁:首先利用 LayoutInflater 返回一个 View,然后对这个 View 经过一系列判断逻辑确认里面的显示文案和描边颜色等处理。然后通过 ViewbuildDrawingCache() 的方法生成一个 Bitmap 供 SpannableString 使用,然后再把 spannableString 设置给 textView 即可。

一些注意点

其中有个细节需要注意的是,利用 LayoutInflater 生成的 View 并没有经过 measure()layout() 方法的洗礼,所以一定没对它的 widthheight 等属性赋值。

所以我们在 buildDrawingCache() 前做了至关重要的两步操作:

view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))
view.layout(0, 0, view.measuredWidth, view.measuredHeight)

buildDrawingCache() 源码中我们可以看到,这个方法并不是一定会返回到正确的 Bitmap,在我们的 ViewCacheSize 大小超过了某写设备的默认值的时候,可能会返回 null。

系统给我了我们的默认最大的 DrawingCacheSize 为屏幕宽高乘积的 4 倍。

由于我们这里的 View 是极小的,所以暂时没有出现返回 null 的情况。

尽管上面的代码经过测试,基本上能在大部分机型上满足需求。但本着被标记 @Deprecated 的过时方法,我们坚决不用的思想,我们需要对生成 Bitmap 的方法进行小范围改造。

在最新的 SDK 中,我们发现 ViewbuildDrawingCache() 等一系列方法都已经被标记了 @Deprecated

/**
 * <p>Calling this method is equivalent to calling <code>buildDrawingCache(false)</code>.</p>
 *
 * @see #buildDrawingCache(boolean)
 *
 * @deprecated The view drawing cache was largely made obsolete with the introduction of
 * hardware-accelerated rendering in API 11. With hardware-acceleration, intermediate cache
 * layers are largely unnecessary and can easily result in a net loss in performance due to the
 * cost of creating and updating the layer. In the rare cases where caching layers are useful,
 * such as for alpha animations, {@link #setLayerType(int, Paint)} handles this with hardware
 * rendering. For software-rendered snapshots of a small part of the View hierarchy or
 * individual Views it is recommended to create a {@link Canvas} from either a {@link Bitmap} or
 * {@link android.graphics.Picture} and call {@link #draw(Canvas)} on the View. However these
 * software-rendered usages are discouraged and have compatibility issues with hardware-only
 * rendering features such as {@link android.graphics.Bitmap.Config#HARDWARE Config.HARDWARE}
 * bitmaps, real-time shadows, and outline clipping. For screenshots of the UI for feedback
 * reports or unit testing the {@link PixelCopy} API is recommended.
 */
@Deprecated	
public void buildDrawingCache() {
    buildDrawingCache(false);
}		

从官方注释中我们发现,使用视图渲染已经过时,硬件加速后中间缓存很多程度上都是不必要的,而且很容易导致性能的净损失。

所以我们采用 Canvas 进行简单改造一下:

private fun convertViewToBitmap(view: View): Bitmap? {
    view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))
    view.layout(0, 0, view.measuredWidth, view.measuredHeight)
    val bitmap = Bitmap.createBitmap(view.measuredWidth, view.measuredHeight, Bitmap.Config.ARGB_4444)
    val canvas = Canvas(bitmap)
    canvas.drawColor(Color.WHITE)
    view.draw(canvas)
    return bitmap
}

突如其来的崩溃

perfect,但很不幸,在上 4.x 某手机上测试的时候,发生了一个空指针崩溃。

一看日志,发现我们在执行 view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED)) 这句代码的时候抛出了系统层源码的 bug。

进入源码发现在 RelativeLayoutonMeasure() 中有这样一段代码。

if (isWrapContentWidth) {
    // Width already has left padding in it since it was calculated by looking at
    // the right of each child view
    width += mPaddingRight;

    if (mLayoutParams != null && mLayoutParams.width >= 0) {
        width = Math.max(width, mLayoutParams.width);
    }

    width = Math.max(width, getSuggestedMinimumWidth());
    width = resolveSize(width, widthMeasureSpec);
    // ...
    }
}

看起来没有任何问题,但对比 4.3 的源码,发现了一点端倪。

if (mLayoutParams.width >= 0) {
      width = Math.max(width, mLayoutParams.width);
}

原来空指针报的是这个 layoutParams。 再看看我们 inflate() 的代码。

val view = LayoutInflater.from(context).inflate(R.layout.layout_codoon_tag_textview, null)

对任何一位 Android 开发来讲,都是最熟悉的代码了,意思很简单,从 xml 中实例化 View 视图,但是父视图为 null,所以从 xml 文件实例化的 View 视图没办法 attachView 层次树中,所以导致了 layoutParams 这个参数为 null。 既然找到了原因,那么解决方案也就非常简单了。 只需要在 inflate() 后,再设置一下 params 就可以了。

view.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)

至此,基本已经实现,主要逻辑代码为:

/**
 * 电商专用的 TagTextView
 * 后面可以拓展直接设置颜色和样式的其他风格
 *
 * Author: nanchen
 * Email: liusl@codoon.com
 * Date: 2019/5/7 10:43
 */
class CodoonTagTextView @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : AppCompatTextView(context, attrs, defStyleAttr) {

    private var tagTvSize: Float = 0f

    init {
        val array = context.obtainStyledAttributes(attrs, R.styleable.CodoonTagTextView)
        val style = array.getInt(R.styleable.CodoonTagTextView_codoon_tag_style, 0)
        val content = array.getString(R.styleable.CodoonTagTextView_codoon_tag_content)
        tagTvSize = array.getDimension(R.styleable.CodoonTagTextView_codoon_tag_tv_size, 0f)
        content?.apply {
            setTagText(style, this)
        }
        array.recycle()
    }

    private fun convertViewToBitmap(view: View): Bitmap? {
//        view.isDrawingCacheEnabled = true
        view.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))
        view.layout(0, 0, view.measuredWidth, view.measuredHeight)
//        view.buildDrawingCache()
//        val bitmap = view.drawingCache
//        view.isDrawingCacheEnabled = false
//        view.destroyDrawingCache()
        val bitmap = Bitmap.createBitmap(view.measuredWidth, view.measuredHeight, Bitmap.Config.ARGB_4444)
        val canvas = Canvas(bitmap)
        canvas.drawColor(Color.WHITE)
        view.draw(canvas)
        return bitmap
    }

    fun setTagText(style: Int, content: String) {
        val view = LayoutInflater.from(context).inflate(R.layout.layout_codoon_tag_textview, null)
        view.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
        val tagView = view.findViewById<CommonShapeButton>(R.id.tvName)
        val tag = when (style) {
            STYLE_NONE -> {
                ""
            }
            STYLE_CODOON -> {
                tagView.setStrokeColor(R.color.tag_color_codoon.toColorRes())
                tagView.setTextColor(R.color.tag_color_codoon.toColorRes())
                "自营"
            }
            STYLE_JD -> {
                tagView.setStrokeColor(R.color.tag_color_jd.toColorRes())
                tagView.setTextColor(R.color.tag_color_jd.toColorRes())
                "京东"
            }
            STYLE_TM -> {
                tagView.setStrokeColor(R.color.tag_color_tm.toColorRes())
                tagView.setTextColor(R.color.tag_color_tm.toColorRes())
                "天猫"
            }
            STYLE_PDD -> {
                tagView.setStrokeColor(R.color.tag_color_pdd.toColorRes())
                tagView.setTextColor(R.color.tag_color_pdd.toColorRes())
                "拼多多"
            }
            STYLE_TB -> {
                tagView.setStrokeColor(R.color.tag_color_tb.toColorRes())
                tagView.setTextColor(R.color.tag_color_tb.toColorRes())
                "淘宝"
            }
            else -> {
                ""
            }
        }
        if (tag.isNotEmpty()) {
            tagView.text = tag
            if (tagTvSize != 0f) {
                tagView.textSize = tagTvSize.toDpF()
            }
        }
        val spannableString = SpannableString("$tag$content")
        val bitmap = convertViewToBitmap(view)
        bitmap?.apply {
            val drawable = BitmapDrawable(resources, bitmap)
            drawable.setBounds(0, 0, tagView.width, tagView.height)
            spannableString.setSpan(CenterImageSpan(drawable), 0, tag.length, Spannable.SPAN_INCLUSIVE_INCLUSIVE)
        }
        text = spannableString
        gravity = Gravity.CENTER_VERTICAL
    }

    companion object {
        const val STYLE_NONE = 0    // 不加
        const val STYLE_JD = 1      // 京东
        const val STYLE_TB = 2      // 淘宝
        const val STYLE_CODOON = 3  // 自营
        const val STYLE_PDD = 4     // 拼多多
        const val STYLE_TM = 5      // 天猫
    }
}


我是南尘,只做比心的公众号,欢迎关注我。

南尘,GitHub 12k Star,各大技术 Blog 论坛常客,出身 Android,但不仅仅是 Android。写点技术,也吐点情感。做不完的开源,写不完的矫情,你就听听我吹逼,不会错~