一、前言

在设计中经常出现一个长度不确定的文本，后面或是前面跟随一个或是多个标签。在网上查了很多资料，大部分的实现方式都是通过富文本来实现，不能满足多变的要求，标签要可以是图片，还可以是不同的文字，或者是一个布局，有时会加多个标签。后来想到了一种解决方法。将整个部分拆分成多个布局，自由组合，可以满足各种需求，无论标签有多少个，放在前面还是后面都可以实现。

二、具体实现

2.1 文字限制一行时，标签在文字后面

效果图：
文字较少时就像第一行这样，文字较多显示不下时就像二三行那样省略。
image.png

    1. 实现方法一，使用线性布局实现
      1. <LinearLayout
      2.        android:layout_width="wrap_content"
      3.        android:layout_height="wrap_content"
      4.        android:orientation="horizontal">
      5.        <TextView
      6.            android:layout_width="0dp"
      7.            android:layout_height="wrap_content"
      8.            android:layout_weight="1"
      9.            android:text="不宽度,不确定字数"
      10.            android:singleLine="true"
      11.            />
      12.        <TextView
      13.            android:layout_width="wrap_content"
      14.            android:layout_height="wrap_content"
      15.            android:text="跟随标签"
      16.            android:background="@color/yellow_FF9B52"/>
      17.        <TextView
      18.            android:layout_width="wrap_content"
      19.            android:layout_height="wrap_content"
      20.            android:text="跟随标签2"
      21.            android:background="@color/blue_74D3FF"/>
      22.    </LinearLayout>

    1. 实现方法二，使用约束布局实现

      1. <androidx.constraintlayout.widget.ConstraintLayout
      2.        android:layout_width="match_parent"
      3.        android:layout_height="wrap_content">
      5.        <TextView
      6.            android:id="@+id/refund_name"
      7.            android:layout_width="wrap_content"
      8.            android:layout_height="wrap_content"
      9.            android:singleLine="true"
      10.            android:text="长数据长数据长数据长数据长数据长数据长数据长数据长数据"
      11.            app:layout_constrainedWidth="true"
      12.            app:layout_constraintBottom_toBottomOf="parent"
      13.            app:layout_constraintHorizontal_bias="0"
      14.            app:layout_constraintHorizontal_chainStyle="packed"
      15.            app:layout_constraintLeft_toLeftOf="parent"
      16.            app:layout_constraintRight_toLeftOf="@id/refund_mark_num"
      17.            app:layout_constraintTop_toTopOf="parent" />
      19.        <TextView
      20.            android:id="@+id/refund_mark_num"
      21.            android:layout_width="wrap_content"
      22.            android:layout_height="wrap_content"
      23.            android:background="@color/yellow_FF9B52"
      24.            android:text="跟随标签"
      25.            android:gravity="center"
      26.            app:layout_constrainedWidth="true"
      27.            app:layout_constraintLeft_toRightOf="@+id/refund_name"
      28.            app:layout_constraintRight_toRightOf="parent"
      29.            app:layout_constraintTop_toTopOf="parent" />
      31.    </androidx.constraintlayout.widget.ConstraintLayout>

      2.2 文字多行有限制或者不限制行数，标签在文字后面

      效果图：

    1. 文字较少，只够一行时效果：

image.png

    1. 文字显示一行半时效果

image.png

    1. 文字两行显示不下时

image.png

    1. 实现思路：

以上面效果图为例，上面限制文字显示两行，第一行是一个单独的 TextView，第二行就是上面2.1 里面一行文字时实现的效果。当文字较少时，只显示一行，第一行的 TextView 隐藏即可。当文字超过一行少于两行时或者超过两行时，第一行的 TextView 设置显示一行就行，第二行的 TextView 设置显示剩下的文字内容。

    1. 具体的实现代码如下：

xml 文件：

  1.  <TextView
  2.             android:layout_width="wrap_content"
  3.             android:layout_height="wrap_content"
  4.             android:text="限制两行,后面跟随标签"
  5.             android:textColor="@color/white"
  6.             android:background="@color/red"
  7.             />
  8.         <androidx.constraintlayout.widget.ConstraintLayout
  9.             android:layout_width="match_parent"
  10.             android:layout_height="wrap_content"
  11.             android:layout_marginHorizontal="@dimen/m15">
  13.             <TextView
  14.                 android:id="@+id/tv_rl_test_tagOne"
  15.                 android:layout_width="match_parent"
  16.                 android:layout_height="wrap_content"
  17.                 android:text="长数据长数据长数据长据长数据长数据长数据长数据长数据长数据长数据长据长数据长数据长数据长数据"
  18.                 android:maxLines="1"
  19.                 android:textSize="13dp"
  20.                 app:layout_constraintTop_toTopOf="parent"
  21.                 />
  23.             <TextView
  24.                 android:id="@+id/tv_rl_test_tagTwo"
  25.                 android:layout_width="wrap_content"
  26.                 android:layout_height="wrap_content"
  27.                 android:singleLine="true"
  28.                 android:text="长数据长数据长数据长数据长数据长数据长数据长数据长数据"
  29.                 app:layout_constrainedWidth="true"
  30.                 android:textSize="13dp"
  31.                 app:layout_constraintBottom_toBottomOf="parent"
  32.                 app:layout_constraintHorizontal_bias="0"
  33.                 app:layout_constraintHorizontal_chainStyle="packed"
  34.                 app:layout_constraintLeft_toLeftOf="parent"
  35.                 app:layout_constraintRight_toLeftOf="@id/tv_rl_test_twoTag"
  36.                 app:layout_constraintTop_toBottomOf="@+id/tv_rl_test_tagOne" />
  38.             <TextView
  39.                 android:id="@+id/tv_rl_test_twoTag"
  40.                 android:layout_width="wrap_content"
  41.                 android:layout_height="wrap_content"
  42.                 android:background="@color/yellow_FF9B52"
  43.                 android:layout_marginLeft="3dp"
  44.                 android:layout_marginTop="2dp"
  45.                 android:gravity="center"
  46.                 android:paddingLeft="3dp"
  47.                 android:paddingTop="1dp"
  48.                 android:paddingRight="3dp"
  49.                 android:paddingBottom="1dp"
  50.                 android:text="标签"
  51.                 android:textSize="12dp"
  52.                 app:layout_constrainedWidth="true"
  53.                 app:layout_constraintLeft_toRightOf="@+id/tv_rl_test_tagTwo"
  54.                 app:layout_constraintRight_toRightOf="parent"
  55.                 app:layout_constraintTop_toBottomOf="@+id/tv_rl_test_tagOne" />
  57.         </androidx.constraintlayout.widget.ConstraintLayout>

activity 部分：

  1. //要显示的数据源
  2.         String tagSrc = "文字是人类用表意符号记录表达信息以传之久远的方式和工具。现代文字大多是记录语言的工具。人类往往先有口头的语言后产生书面文字，很多小语种，有语言但没有文字。文字的不同体现了国家和民族的书面表达的方式和思维不同。文字使人类进入有历史记录的文明社会。";
  3.         TextView tvTagOnes = (TextView) findViewById(R.id.tv_rl_test_tagOne);
  4.         TextView tvTagTwo = (TextView) findViewById(R.id.tv_rl_test_tagTwo);
  5.         tvTagOnes.setText(tagSrc);
  6.         tvTestOne.setText(tagSrc);
  7.         //判断第一行是否可以完整显示
  8.         tvTagOnes.post(new Runnable() {
  9.             @Override
  10.             public void run() {
  11.              //获取第一个 textview 显示的内容
  12.                 String lineContent = Utils.INSTANCE.getTextLineContent(tvTagOnes, 0, tagSrc);
  13.                 LogUtils.e(tagSrc + "---------" + lineContent);
  14.                 if (TextUtils.equals(tagSrc,lineContent)){//可以显示完整
  15.                     tvTagOnes.setVisibility(View.GONE);
  16.                     tvTagTwo.setText(tagSrc);
  17.                 }else {//显示不完整,需要分行
  18.                     tvTagOnes.setVisibility(View.VISIBLE);
  19.                     String srcTwoContent = tagSrc.substring(lineContent.length(), tagSrc.length());
  20.                     tvTagTwo.setText(srcTwoContent);
  21.                 }
  22.             }
  23.         });

获取 TextView 显示的内容：

  1.  /**
  2.      * 获取textview某行内容
  3.      */
  4.     fun getTextLineContent(textView: TextView?, line: Int, src: String?): String {
  5.         var result: String = ""
  6.         if (textView == null || src.isNullOrEmpty()) {
  7.             return result
  8.         }
  9.         LogUtils.e("$line--line-->${textView.lineCount}"  )
  10.         if (line > textView.lineCount) {
  11.             return result
  12.         }
  13.         val layout = textView.layout
  14.         val sb = StringBuilder(src)
  15.         LogUtils.e("--start-${layout.getLineStart(line)}----end---${layout.getLineEnd(line)}")
  16.         return sb.subSequence(layout.getLineStart(line), layout.getLineEnd(line)).toString()
  17.     }

2.3 标签在文字前面时

效果图：
image.png
实现思路和上面标签在文字后面一样。第一行的标签是一个控件，标签后面的文字是一个单独的 TextView，第二行也是一个单独的 TextView。如果想限制文字行数，直接对第二行的 TextView 限制就行。
xml 布局：

  1.  <!--        前面跟随标签-->
  2.         <TextView
  3.             android:layout_width="wrap_content"
  4.             android:layout_height="wrap_content"
  5.             android:text="前面跟随标签"
  6.             android:textColor="@color/white"
  7.             android:background="@color/red"
  8.             />
  10.         <androidx.constraintlayout.widget.ConstraintLayout
  11.             android:layout_width="match_parent"
  12.             android:layout_height="wrap_content"
  13.             android:layout_marginHorizontal="@dimen/m15">
  16.             <TextView
  17.                 android:id="@+id/tv_rl_test_tagFront"
  18.                 android:layout_width="wrap_content"
  19.                 android:layout_height="wrap_content"
  20.                 android:text="标签"
  21.                 android:background="@color/yellow_FF9B52"
  22.                 app:layout_constraintTop_toTopOf="parent"
  23.                 app:layout_constraintStart_toStartOf="parent"/>
  25.             <com.kiwilss.xview.widget.textview.AlignTextView
  26.                 android:id="@+id/tv_rl_test_frontOne"
  27.                 android:layout_width="0dp"
  28.                 android:layout_height="wrap_content"
  29.                 android:text="任意显示一行任意显示一行任意显示一行任意显示一行任意显示一行"
  30.                 app:layout_constraintTop_toTopOf="parent"
  31.                 app:layout_constraintStart_toEndOf="@+id/tv_rl_test_tagFront"
  32.                 android:maxLines="1"
  33.                 />
  35.             <com.kiwilss.xview.widget.textview.AlignTextView
  36.                 android:id="@+id/tv_rl_test_frontTwo"
  37.                 android:layout_width="match_parent"
  38.                 android:layout_height="wrap_content"
  39.                 android:text="任意显示一行任意显示一行任意显示一行任意显示一行任意显示一行"
  40.                 app:layout_constraintTop_toBottomOf="@+id/tv_rl_test_tagFront"/>
  41.         </androidx.constraintlayout.widget.ConstraintLayout>

activity 部分：

  1.   //前面加标签
  2.         TextView tvFront = (TextView) findViewById(R.id.tv_rl_test_tagFront);
  3.         TextView tvFrontOne =  findViewById(R.id.tv_rl_test_frontOne);
  4.         TextView tvFrontTwo =  findViewById(R.id.tv_rl_test_frontTwo);
  6.         tvFrontOne.setText(tagSrc);
  7.         //获取tvFrontOne显示的内容
  8.         tvFrontOne.post(new Runnable() {
  9.             @Override
  10.             public void run() {
  11.                 //获取第一行显示的内容
  12.                 String lineContent = Utils.INSTANCE.getTextLineContent(tvFrontOne, 0, tagSrc);
  13.                 if (TextUtils.equals(lineContent,tagSrc)){
  14.                     //一行可以完整显示
  15.                     tvFrontTwo.setVisibility(View.GONE);
  16.                 }else {
  17.                     //需要多行才能显示
  18.                     tvFrontTwo.setVisibility(View.VISIBLE);
  19.                     String nextContent = tagSrc.substring(lineContent.length(), tagSrc.length());
  20.                     tvFrontTwo.setText(nextContent);
  21.                 }
  22.             }
  23.         });

三、解决对齐问题

image.png
如图，图中第一行和第二行并没有对齐，使用 TextView 时，当文字显示不行时就会自动换行，所以会无法对齐，不对齐就会不够美观。解决方法是让文字两端对齐。如下图：
image.png
网上有很多方法可以实现文字两端对齐，这里介绍一种自定义 View 的方法，感觉还可以，中英文混合也可以对齐：
AlignTextView：

  1. public class AlignTextView extends AppCompatTextView {
  3.     private boolean alignOnlyOneLine;
  5.     public AlignTextView(Context context) {
  6.         this(context, null);
  7.     }
  9.     public AlignTextView(Context context, @Nullable AttributeSet attrs) {
  10.         this(context, attrs, 0);
  11.     }
  13.     public AlignTextView(Context context, AttributeSet attrs, int defStyleAttr) {
  14.         super(context, attrs, defStyleAttr);
  15.         init(context, attrs);
  16.     }
  18.     private void init(Context context, AttributeSet attrs) {
  19.         TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.AlignTextView);
  20.         alignOnlyOneLine = typedArray.getBoolean(R.styleable.AlignTextView_alignOnlyOneLine, false);
  21.         typedArray.recycle();
  22.         setTextColor(getCurrentTextColor());
  23.     }
  25.     @Override
  26.     public void setTextColor(int color) {
  27.         super.setTextColor(color);
  28.         getPaint().setColor(color);
  29.     }
  31.     protected void onDraw(Canvas canvas) {
  32.         CharSequence content = getText();
  33.         if (!(content instanceof String)) {
  34.             super.onDraw(canvas);
  35.             return;
  36.         }
  37.         String text = (String) content;
  38.         Layout layout = getLayout();
  40.         for (int i = 0; i < layout.getLineCount(); ++i) {
  41.             int lineBaseline = layout.getLineBaseline(i) + getPaddingTop();
  42.             int lineStart = layout.getLineStart(i);
  43.             int lineEnd = layout.getLineEnd(i);
  44.             if (alignOnlyOneLine && layout.getLineCount() == 1) {//只有一行
  45.                 String line = text.substring(lineStart, lineEnd);
  46.                 float width = StaticLayout.getDesiredWidth(text, lineStart, lineEnd, getPaint());
  47.                 this.drawScaledText(canvas, line, lineBaseline, width);
  48.             } else if (i == layout.getLineCount() - 1) {//最后一行
  49.                 canvas.drawText(text.substring(lineStart), getPaddingLeft(), lineBaseline, getPaint());
  50.                 break;
  51.             } else {//中间行
  52.                 String line = text.substring(lineStart, lineEnd);
  53.                 float width = StaticLayout.getDesiredWidth(text, lineStart, lineEnd, getPaint());
  54.                 this.drawScaledText(canvas, line, lineBaseline, width);
  55.             }
  56.         }
  58.     }
  60.     private void drawScaledText(Canvas canvas, String line, float baseLineY, float lineWidth) {
  61.         if (line.length() < 1) {
  62.             return;
  63.         }
  64.         float x = getPaddingLeft();
  65.         boolean forceNextLine = line.charAt(line.length() - 1) == 10;
  66.         int length = line.length() - 1;
  67.         if (forceNextLine || length == 0) {
  68.             canvas.drawText(line, x, baseLineY, getPaint());
  69.             return;
  70.         }
  72.         float d = (getMeasuredWidth() - lineWidth - getPaddingLeft() - getPaddingRight()) / length;
  74.         for (int i = 0; i < line.length(); ++i) {
  75.             String c = String.valueOf(line.charAt(i));
  76.             float cw = StaticLayout.getDesiredWidth(c, this.getPaint());
  77.             canvas.drawText(c, x, baseLineY, this.getPaint());
  78.             x += cw + d;
  79.         }
  80.     }
  81. }

attrs:
显示一行时使用，感觉没什么用处。

  1. <declare-styleable name="AlignTextView">
  2.         <attr name="alignOnlyOneLine" format="boolean"/>
  3.     </declare-styleable>

四、其他实现方式

查找了很多资料，网上也有其他的实现方式，各有优缺点，可以用来参考。
TextView文本尾部添加标签，支持自动换行
android TextView添加标签，一个或多个
TextView多行文字超出时如何在省略号后添加图标
android TextView文字换行内容末尾紧跟图标或其他控件的实现
android之文本前面或后面多标签
Android之旅：突然想玩的TextView前面加标签的方法