如何在TextView文本中添加图像?

我在Google上search过,遇到这个网站,我发现了一个类似于我的问题,在这个问题中,如何在TextView文本中包含图像,例如“你好我的名字是[image]” ,答案是这样的:

 ImageSpan is = new ImageSpan(context, resId); text.setSpan(is, index, index + strLength, 0); 

我想在这个代码中知道,

  1. 我应该在上下文中input什么或做什么?
  2. 我应该做一些text.setSpan()像导入或引用或保留它的文本?

如果有人能为我打破这一点,将不胜感激。

尝试这个 ..

  txtview.setCompoundDrawablesWithIntrinsicBounds( R.drawable.image, 0, 0, 0); 

另请参阅http://developer.android.com/reference/android/widget/TextView.html

试试这个XML文件

  <TextView android:id="@+id/txtStatus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:drawableLeft="@drawable/image" android:drawablePadding="5dp" android:singleLine="true" android:text="@string/name"/> 

com / xyz / customandroid / TextViewWithImages .java

 import java.util.regex.Matcher; import java.util.regex.Pattern; import android.content.Context; import android.text.Spannable; import android.text.style.ImageSpan; import android.util.AttributeSet; import android.util.Log; import android.widget.TextView; public class TextViewWithImages extends TextView { public TextViewWithImages(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public TextViewWithImages(Context context, AttributeSet attrs) { super(context, attrs); } public TextViewWithImages(Context context) { super(context); } @Override public void setText(CharSequence text, BufferType type) { Spannable s = getTextWithImages(getContext(), text); super.setText(s, BufferType.SPANNABLE); } private static final Spannable.Factory spannableFactory = Spannable.Factory.getInstance(); private static boolean addImages(Context context, Spannable spannable) { Pattern refImg = Pattern.compile("\\Q[img src=\\E([a-zA-Z0-9_]+?)\\Q/]\\E"); boolean hasChanges = false; Matcher matcher = refImg.matcher(spannable); while (matcher.find()) { boolean set = true; for (ImageSpan span : spannable.getSpans(matcher.start(), matcher.end(), ImageSpan.class)) { if (spannable.getSpanStart(span) >= matcher.start() && spannable.getSpanEnd(span) <= matcher.end() ) { spannable.removeSpan(span); } else { set = false; break; } } String resname = spannable.subSequence(matcher.start(1), matcher.end(1)).toString().trim(); int id = context.getResources().getIdentifier(resname, "drawable", context.getPackageName()); if (set) { hasChanges = true; spannable.setSpan( new ImageSpan(context, id), matcher.start(), matcher.end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE ); } } return hasChanges; } private static Spannable getTextWithImages(Context context, CharSequence text) { Spannable spannable = spannableFactory.newSpannable(text); addImages(context, spannable); return spannable; } } 

使用:

res / layout / mylayout.xml中

  <com.xyz.customandroid.TextViewWithImages android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FFFFFF00" android:text="@string/can_try_again" android:textSize="12dip" style=... /> 

请注意,如果将TextViewWithImages.java放在com / xyz / customandroid /以外的某个位置,则还必须更改上面的包名称com.xyz.customandroid

res / values / strings.xml中

 <string name="can_try_again">Press [img src=ok16/] to accept or [img src=retry16/] to retry</string> 

其中ok16.pngretry16.pngres / drawable /文件夹中的图标

这个答案是基于18446744073709551615 这个优秀的答案 。 他们的解决scheme虽然很有帮助,但不会将图像图标与周围的文本一起放大。 它也不会将图标颜色设置为周围文本的颜色。

下面的解决scheme需要一个白色的方形图标,并使其符合周围文本的大小和颜色。

 public class TextViewWithImages extends TextView { private static final String DRAWABLE = "drawable"; /** * Regex pattern that looks for embedded images of the format: [img src=imageName/] */ public static final String PATTERN = "\\Q[img src=\\E([a-zA-Z0-9_]+?)\\Q/]\\E"; public TextViewWithImages(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public TextViewWithImages(Context context, AttributeSet attrs) { super(context, attrs); } public TextViewWithImages(Context context) { super(context); } @Override public void setText(CharSequence text, BufferType type) { final Spannable spannable = getTextWithImages(getContext(), text, getLineHeight(), getCurrentTextColor()); super.setText(spannable, BufferType.SPANNABLE); } private static Spannable getTextWithImages(Context context, CharSequence text, int lineHeight, int colour) { final Spannable spannable = Spannable.Factory.getInstance().newSpannable(text); addImages(context, spannable, lineHeight, colour); return spannable; } private static boolean addImages(Context context, Spannable spannable, int lineHeight, int colour) { final Pattern refImg = Pattern.compile(PATTERN); boolean hasChanges = false; final Matcher matcher = refImg.matcher(spannable); while (matcher.find()) { boolean set = true; for (ImageSpan span : spannable.getSpans(matcher.start(), matcher.end(), ImageSpan.class)) { if (spannable.getSpanStart(span) >= matcher.start() && spannable.getSpanEnd(span) <= matcher.end()) { spannable.removeSpan(span); } else { set = false; break; } } final String resName = spannable.subSequence(matcher.start(1), matcher.end(1)).toString().trim(); final int id = context.getResources().getIdentifier(resName, DRAWABLE, context.getPackageName()); if (set) { hasChanges = true; spannable.setSpan(makeImageSpan(context, id, lineHeight, colour), matcher.start(), matcher.end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE ); } } return hasChanges; } /** * Create an ImageSpan for the given icon drawable. This also sets the image size and colour. * Works best with a white, square icon because of the colouring and resizing. * * @param context The Android Context. * @param drawableResId A drawable resource Id. * @param size The desired size (ie width and height) of the image icon in pixels. * Use the lineHeight of the TextView to make the image inline with the * surrounding text. * @param colour The colour (careful: NOT a resource Id) to apply to the image. * @return An ImageSpan, aligned with the bottom of the text. */ private static ImageSpan makeImageSpan(Context context, int drawableResId, int size, int colour) { final Drawable drawable = context.getResources().getDrawable(drawableResId); drawable.mutate(); drawable.setColorFilter(colour, PorterDuff.Mode.MULTIPLY); drawable.setBounds(0, 0, size, size); return new ImageSpan(drawable, ImageSpan.ALIGN_BOTTOM); } } 

如何使用:

只需在文本中embedded对所需图标的引用即可。 无论文本是否通过textView.setText(R.string.string_resource);编程方式设置textView.setText(R.string.string_resource); 或者如果它在xml中设置。

要embedded名为example.png的可绘制图标,请在文本中包含以下string: [img src=example/]

例如,一个string资源可能如下所示:

 <string name="string_resource">This [img src=example/] is an icon.</string> 

我尝试了很多不同的解决scheme,这对我来说是最好的:

 SpannableStringBuilder ssb = new SpannableStringBuilder(" Hello world!"); ssb.setSpan(new ImageSpan(context, R.drawable.image), 0, 1, Spannable.SPAN_INCLUSIVE_INCLUSIVE); tv_text.setText(ssb, TextView.BufferType.SPANNABLE); 

此代码使用最less的内存。

这部分是基于@A Boschman先前的回答 。 在该解决scheme中,我发现图像的input大小极大地影响了makeImageSpan()正确alignment图像的能力。 此外,我发现解决scheme通过创build不必要的行距来影响文本间距。

我发现BaseImageSpan (来自Facebook的Fresco库)做得非常好:

  /** * Create an ImageSpan for the given icon drawable. This also sets the image size. Works best * with a square icon because of the sizing * * @param context The Android Context. * @param drawableResId A drawable resource Id. * @param size The desired size (ie width and height) of the image icon in pixels. * Use the lineHeight of the TextView to make the image inline with the * surrounding text. * @return An ImageSpan, aligned with the bottom of the text. */ private static BetterImageSpan makeImageSpan(Context context, int drawableResId, int size) { final Drawable drawable = context.getResources().getDrawable(drawableResId); drawable.mutate(); drawable.setBounds(0, 0, size, size); return new BetterImageSpan(drawable, BetterImageSpan.ALIGN_CENTER); } 

然后像往常一样将您的betterImageSpan实例提供给spannable.setSpan()