支持末尾携带标签的多行TextView
创始人
2024-02-01 04:30:28

项目开发过程中,遇到个UI上的需求,本着不重复造轮子、敏捷开发的原则,于是乎网上找寻了一番,发现还是自己搞吧,搜不到这样的需求,先看下我们的效果。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

总结有以下三点需要注意:

  • 末尾vip部分是整体,不能换行;
  • 单行或者不满2行时,后面vip部分直接显示在文字后面;
  • 超过2行后,文字部分显示…并且保证vip部分显示在最后。

那么这种效果,我们首先就排除了横向多个控件组合的方式,因为这样会导致末尾vip部分不是放在文本后面,而是显示在整个TextView的右侧了。

首先想到的就是用富文本啦,SpannableString大家都很熟悉了,没错就是它,后面vip部分是整体的话,那么我们就不能把它当成文字了,因为这样会遇到换行的情况,也不满足需求了,所以我们得把它处理成图片,这样我们就不用管它是否换行了,TextView会自动帮我们处理。但是我们vip部分是动态设置的,里面的+15取得是接口下发的值,那么这个地方我们肯定不能用写死的图了,那怎么处理呢?

有没有一种方案是把布局转换成图片呢?有!当然有!如下:

 private Bitmap createTaskTag(String num){View layout = LayoutInflater.from(getActivity()).inflate(R.layout.layout_task_tag_end, null);TextView tvNum = layout.findViewById(cn.emagsoftware.gamehall.R.id.tv_num);tvNum.setText(String.format("会员额外+%s云豆",num));layout.setDrawingCacheEnabled(true);layout.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED), View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));layout.layout(0, 0,  ScreenUtils.dp2px(102), layout.getMeasuredHeight());Bitmap bitmap = Bitmap.createBitmap(layout.getDrawingCache());layout.destroyDrawingCache();return  bitmap;}

既然图片已经有了,那么就简单了,直接上ImageSpan,这就结束了吗?
我们发现大于两行的时候,末尾直接变成了…不展示了,这就得处理文本展示的问题了,最后一行必须得预留出图片和…的位置,然后剩下的空间进行字符串的截取操作。如下:

    private CharSequence getNewTextByConfig() {if (TextUtils.isEmpty(mOrigText)) {return mOrigText;}mLayout = getLayout();if (mLayout != null) {mLayoutWidth = mLayout.getWidth();}if (mLayoutWidth <= 0) {if (getWidth() == 0) {if (mFutureTextViewWidth == 0) {return mOrigText;} else {mLayoutWidth = mFutureTextViewWidth - getPaddingLeft() - getPaddingRight();}} else {mLayoutWidth = getWidth() - getPaddingLeft() - getPaddingRight();}}mTextPaint = getPaint();mTextLineCount = -1;mLayout = null;mLayout = new DynamicLayout(mOrigText, mTextPaint, mLayoutWidth, Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, false);mTextLineCount = mLayout.getLineCount();//        if (mTextLineCount <= mMaxLinesOnShrink) {
//            return mOrigText;
//        }int maxLine = 0;if (mTextLineCount > 1) {maxLine = mMaxLinesOnShrink - 1;}else{SpannableStringBuilder ssbShrink = new SpannableStringBuilder(mOrigText);ssbShrink.append("+");ssbShrink.setSpan(imgSpan1, ssbShrink.length() - 1, ssbShrink.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);return ssbShrink;}int indexEnd = getValidLayout().getLineEnd(maxLine);int indexStart = getValidLayout().getLineStart(maxLine);int indexEndTrimmed = indexEnd- getLengthOfString(mEllipsisHint)- getLengthOfString(mGapToExpandHint);if (indexEndTrimmed <= indexStart) {indexEndTrimmed = indexEnd;}int remainWidth = getValidLayout().getWidth() -(int) (mTextPaint.measureText(mOrigText.subSequence(indexStart, indexEndTrimmed).toString()) + 0.5) - bitmap1.getWidth();float widthTailReplaced = mTextPaint.measureText(getContentOfString(mEllipsisHint)+ getContentOfString(mGapToExpandHint));int indexEndTrimmedRevised = indexEndTrimmed;if (remainWidth > widthTailReplaced) {int extraOffset = 0;int extraWidth = 0;while (remainWidth > widthTailReplaced + extraWidth) {extraOffset++;if (indexEndTrimmed + extraOffset <= mOrigText.length()) {extraWidth = (int) (mTextPaint.measureText(mOrigText.subSequence(indexEndTrimmed, indexEndTrimmed + extraOffset).toString()) + 0.5);} else {break;}}indexEndTrimmedRevised += extraOffset - 1;} else {int extraOffset = 0;int extraWidth = 0;while (remainWidth + extraWidth < widthTailReplaced) {extraOffset--;if (indexEndTrimmed + extraOffset > indexStart) {extraWidth = (int) (mTextPaint.measureText(mOrigText.subSequence(indexEndTrimmed + extraOffset, indexEndTrimmed).toString()) + 0.5);} else {break;}}indexEndTrimmedRevised += extraOffset;}String fixText = removeEndLineBreak(mOrigText.subSequence(0, indexEndTrimmedRevised));SpannableStringBuilder ssbShrink = new SpannableStringBuilder(fixText);if (remainWidth <= widthTailReplaced) {ssbShrink.append(mEllipsisHint);}if (issetSpecialColor) {int lenth = ssbShrink.length();if (specialColorLenth <= lenth) {lenth = specialColorLenth;}ssbShrink.setSpan(colorSpan, specialColorStart, lenth, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);}ssbShrink.append(getContentOfString(mGapToExpandHint));ssbShrink.append("+");ssbShrink.setSpan(imgSpan1, ssbShrink.length() - 1, ssbShrink.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);return ssbShrink;}

代码中同时也处理了如下bug:
在这里插入图片描述
总结:这个UI需求重要的不是代码部分,而是看到这种需求,如果去想,怎么去处理,当然这种做法可能不是最优的,但是处理起来我觉得是最方便的,如果有更好的方案,欢迎评论区留言。

因为只有一个类,所以就放在csdn上了。
完整资源下载

相关内容

热门资讯

埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...