如何解决Android中多行文本末尾添加图片时的排版问题？

Android中多行文本末尾添加图片排版问题的解决方法

在Android开发中，有时我们需要在多行文本的末尾添加图片，直接使用TextView的属性如drawableRight或drawableEnd将图片放置在文本末尾时，图片会显示在TextView右边的中间位置，而不是我们期望的在最后一行的位置，为了解决这个问题，我们可以采用一些技巧来实现目标，本文将详细介绍几种解决方案，并提供相应的代码示例和表格归纳。

一、使用ImageSpan实现图片放置

1、基本思路：通过创建一个SpannableString对象，并在其中插入一个ImageSpan来实现图片的放置，具体实现步骤如下：

创建一个SpannableString对象，并在字符串末尾预留一个空格用于放置图片。

创建一个Drawable对象作为图片资源。

创建一个ImageSpan对象，并将Drawable对象传递给它。

将ImageSpan设置到SpannableString对象的末尾。

2、代码示例：

   TextView text = findViewById(R.id.text);
   String string = "dkffkdjkfjdkfjkdjfdjfkjdkfjkdjkdjfkjdkjk";
   // 创建一个SpannableString对象，后面增加空格是预留给图片的
   SpannableString spannableString = new SpannableString(string + " ");
   // 创建图片的Drawable对象
   Drawable drawable = getResources().getDrawable(R.mipmap.copy);
   drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
   // 创建图片的ImageSpan对象
   ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
   // 设置ImageSpan，将其位置设置在spannableString最后面，起始位置start=spannableString.length() 1，结束位置为end=spannableString.length()
   spannableString.setSpan(imageSpan, spannableString.length() 1, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
   text.setText(spannableString);

效果：图片确实放在了最后面，但是英文文本的显示出现了凌乱，这是因为文本换行并没有按照我们期望的样子进行，而是换行之后后面还留了一大半空白。

3、优化方案：为了解决换行凌乱的问题，我们可以在每行的末尾插入一个空格，这样，当TextView计算行数时，会自动以空格的位置进行换行，具体实现如下：

   text.setText(string);
   text.post(new Runnable() {
       @Override
       public void run() {
           float lineWidth = text.getLayout().getLineWidth(0);
           int lineEnd = text.getLayout().getLineEnd(0);
           float widthPerChar = lineWidth / (lineEnd + 1);
           int numberPerLine = (int) Math.floor(text.getWidth() / widthPerChar);
           StringBuilder stringBuilder = new StringBuilder(string).insert(numberPerLine 1, " ");
           SpannableString spannableString = new SpannableString(stringBuilder.toString() + " ");
           Drawable drawable = getResources().getDrawable(R.mipmap.copy);
           drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
           ImageSpan imageSpan = new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE);
           spannableString.setSpan(imageSpan, spannableString.length() 1, spannableString.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
           text.setText(spannableString);
       }
   });

二、使用自定义的CustomImageSpan实现图片居中对齐

1、基本思路：传统的ImageSpan只能设置图片位于顶部或底部，而无法实现居中对齐，为此，我们可以自定义一个CustomImageSpan来解决这个问题。

2、代码示例：

   public class CustomImageSpan extends ImageSpan {
       private int verticalAlignment;
       public CustomImageSpan(Drawable drawable, int verticalAlignment) {
           super(drawable);
           this.verticalAlignment = verticalAlignment;
       }
       @Override
       public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
           Drawable b = getDrawable();
           canvas.save();
           int transY = (y + b.getBounds().bottom) / 2 b.getBounds().bottom() / 2;
           canvas.translate(x, transY);
           b.draw(canvas);
           canvas.restore();
       }
   }

使用方法：

   TextView text = findViewById(R.id.text);
   String str = "我是多行文字，我末尾需要添加一张图片";
   SpannableString ss = new SpannableString(str + " ");
   Drawable drawable = ContextCompat.getDrawable(this, R.drawable.task_sign);
   CustomImageSpan imageSpan = new CustomImageSpan(drawable, 2);
   ss.setSpan(imageSpan, ss.length() 1, ss.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
   text.setText(ss);

效果：图片可以居中显示在多行文本的最后一行。

三、使用TextView结合ImageView实现图片跟随文本末尾显示

1、基本思路：如果希望更好地控制图片的位置和大小，可以考虑使用TextView结合ImageView的方式，将TextView设置为单行显示，并在其下方添加一个固定高度和宽度的ImageView。

2、代码示例：

   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
       <TextView
           android:id="@+id/text"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:singleLine="true" />
       <ImageView
           android:id="@+id/image"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/your_image" />
   </LinearLayout>

   TextView text = findViewById(R.id.text);
   ImageView image = findViewById(R.id.image);
   String content = "这是一段测试文本";
   text.setText(content);
   Drawable drawable = getResources().getDrawable(R.drawable.your_image);
   image.setImageDrawable(drawable);

效果：文本和图片在同一行显示，且图片的位置和大小可以更灵活地控制。

四、归纳与对比

根据不同的需求和场景，可以选择适合的方法来实现多行文本末尾添加图片的效果，希望本文能对您有所帮助！