在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);
效果:文本和图片在同一行显示,且图片的位置和大小可以更灵活地控制。
四、归纳与对比
方法 | 优点 | 缺点 | 适用场景 |
使用ImageSpan | 简单易用,适用于基本的图文混排需求 | 英文文本显示可能出现凌乱 | 简单的图文混排需求 |
使用自定义的CustomImageSpan | 可以实现图片居中对齐,灵活性高 | 需要自定义类,稍微复杂一些 | 需要图片居中显示的场景 |
使用TextView结合ImageView | 可以更灵活地控制图片的位置和大小 | 需要额外的布局文件,代码稍显复杂 | 需要精确控制图片位置和大小的场景 |
根据不同的需求和场景,可以选择适合的方法来实现多行文本末尾添加图片的效果,希望本文能对您有所帮助!
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/1264923.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复