Android 从零编写一个带标签 TagTextView

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

Android 从零编写一个带标签 TagTextView


Android 从零编写一个带标签 TagTextView

怎么实现

看到这个,大多数小伙伴都能想到这就是一个简单的图文混排,不由得会想到鸿洋大佬的图文并排控件 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 经过一系列判断逻辑确认里面的显示文案和描边颜色等处理。然后通过 View 的 buildDrawingCache() 的方法生成一个 Bitmap 供 SpannableString 使用,然后再把 spannableString 设置给 textView 即可。

一些注意点

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

所以我们在 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,在我们的 View 的 CacheSize 大小超过了某写设备的默认值的时候,可能会返回 null。

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

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

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

在最新的 SDK 中,我们发现 View 的 buildDrawingCache() 等一系列方法都已经被标记了 @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); }

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyyddf.html