Android 标签文本混合排版需求讨论

这是前一段时间项目迭代遇到的一个需求,也是考虑了很久才很好的实现,如果有遇到这种类型的需求可以参考
当然有更好的实现方案欢迎提供

如图所示:

屏幕快照 2017-12-24 下午9.58.22.png

第一眼看到这个设计时, 大多人都想的是用RelativeLayout来实现, 左边一个TextView用shape做背景资源实现标签(精选)(或者一个ImageView展示图片?), 右边还是一个TextView,单纯显示文本(早安....).我最开始也是这样做的, 但是后面就遇到问题了.考虑一些多种情形的场景, 产品需求要求文本最多显示两行(超过部分用省略号代替),标签最多展示两个(可能是0个,可能是1个, 也可能是2个标签),因为这些参数都说后台返回的, 每条数据都不一样, 客户端要做的就是布局去自适应完美显示.

刚才说的用RelativeLayout直接排版实现起来就比较麻烦了, 因为你不知道一行排了一个标签或者两个标签时, 这一行剩余能排版多少个文字?

我们在项目中是这样做的, 如果有标签第一行是一个LinearLayout的水平方向布局, 左边是显示标签的TextView, 右边是显示普通文本的TextView, 并且maxLine=1, 在LinearLayout中的TextView排文本时只显示一行, 如果内容超过了, 则在LinearLayout的下方布局一个TextView, maxLine=2. 如果没有标签则可以直接用下方的TextView展示.

那么关键问题来了, 如何计算TextView一行到底能显示多少个文字呢?

有一个非常重要的API, TextView的源码中也是有的,Paint.measureText(String text);
透过这个API再来动态计算一行能显示多少字符可以完美实现

// 获取文本的最大长度
int singleLineMaxLength = text.length();
// 用一个无限循环去计算文本显示的最大个数, maxWidth是TextView剩余能使用到的最大宽度,即LinearLayout的宽度减去了标签占用的宽度
        while (tvFirstLine.getPaint().measureText(txt.substring(0, singleLineMaxLength)) > maxWidth) {
            singleLineMaxLength--;
        }

这样就能求出一行能显示多少个字符了, 就可以在不同手机完美适配显示文本和标签的问题