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

83

我在Google上四处搜索，发现该网站与我的网站类似，在其中如何在图片中包含图片TextView，例如“ hello my name is [image]”，答案是这样的：

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

我想知道这段代码，

  1. 我应该在上下文中键入或做什么？
  2. 我应该对text.setSpan()导入或引用做些什么，还是将其保留为文本？

如果有人可以帮我解决这个问题，将不胜感激。

java  android  xml  image  textview 
— 恐龙
source

Answers:

199

试试这个 ..

    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:maxLines="1"
        android:text="@string/name"/>
— 乌梅什·拉哈尼（Umesh Lakhani）
source
我收到一个错误“无法从类型TextView静态引用非静态方法setCompoundDrawablesWithIntrinsicBounds（int，int，int，int）”
— Cranosaur 2013年
谢谢Umesh，xml方法对我有用。我为我的TextViews使用xml布局，所以我不知道这是否有所不同，也许这就是为什么它在Java中不起作用的原因。
— Cranosaur
1
@Umesh Lakhani：通过这种方法如何在文本中放置多个可绘制对象？
— Behnam 2014年
在XML中，图像是从左侧而非中心绘制的。
— CoolMind
嗨@Umesh。如何为其设置一些余量。setCompoundDrawablePadding什么也没做
— Prabs
73

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.png和retry16.png是res / drawable /文件夹中的图标

— 18446744073709551615
source
当我使用textView.setText(R.string.can_try_again);它不显示图像时，它仅显示纯文本Press [img src=ok16/] to accept or [img src=retry16/] to retry。有帮助吗？这是因为我要动态加载图像并在textView中进行设置。
— Anas Azeem 2014年
@AnasAzeem您可以通过ImageView正常显示ok16和retry16吗？您是否指定TextViewWithImages代替TextView？
— 18446744073709551615 2014年
1
不要忘了修改<com.xyz.customandroid.TextViewWithImages与<YourPackageName.TextViewWithImages否则你在充气和NoClassFound例外得到了一个错误
— AndroidGeek
1
它的工作，但我不能设置图像的高度宽度，也不能在文本中心获取图像
— Rajesh Kosht​​i，2016年
1
在您将其打包在发行版本中之前，它是一个很棒的类。它崩溃了，我仍然无法找出原因。甚至在-keep in proguard中标记了此类。仍然没有运气。也许我使用的图像是矢量，这就是为什么它崩溃的原因。我不知道。
— Uday
18

我尝试了许多不同的解决方案，这对我来说是最好的：

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);

此代码使用最少的内存。

— 帕维尔·卡塔金（Pavel Kataykin）
source
2
在那种情况下，图像已添加但与文本的基线对齐，我想与文本的顶部对齐，您能帮我吗
— humayoon siddique
2
它有效，但是我们如何根据文本大小调整图像图标的大小
— sunil kushwah
12

这个答案是基于这个优秀的答案被18446744073709551615。他们的解决方案虽然很有帮助，但并不能将图像图标的大小与周围的文本对齐。它还没有将图标颜色设置为周围文本的颜色。

下面的解决方案带有一个白色方形图标，使其适合周围文本的大小和颜色。

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 (i.e. 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);
    }

}

如何使用：

只需在文本中嵌入对所需图标的引用即可。文本是通过编程方式textView.setText(R.string.string_resource);设置还是在xml中设置都没有关系。

要嵌入名为example.png的可绘制图标，请在文本中包含以下字符串：[img src=example/]。

例如，字符串资源可能如下所示：

<string name="string_resource">This [img src=example/] is an icon.</string>
— 恢复莫妮卡
source
3
这是一个很好的解决方案。我只建议一个改进：在drawable.setColorFilter之前添加drawable.mutate（）;。如果不这样做，您的应用程序其他部分将具有不同颜色的可绘制对象。
— moondroid
@moondroid谢谢您的建议，我相应地编辑了答案。
— 恢复莫妮卡
实际上，我遇到了一个问题，因为我的可绘制对象不是正方形，并且此解决方案将始终使可绘制对象的宽度与可绘制对象的高度相同，它将不成比例地调整我的可绘制对象的大小
— HendraWD
1

这部分是基于@A Boschman的上述较早答案。在该解决方案中，我发现图像的输入大小极大地影响了makeImageSpan()正确居中对齐图像的能力。此外，我发现该解决方案通过创建不必要的行间距来影响文本间距。

我发现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 (i.e. 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);
}

然后spannable.setSpan()照常提供您更好的ImageSpan实例

— kip2
source
0

这可能对您有帮助

  SpannableStringBuilder ssBuilder;

        ssBuilder = new SpannableStringBuilder(" ");
        // working code ImageSpan image = new ImageSpan(textView.getContext(), R.drawable.image);
        Drawable image = ContextCompat.getDrawable(textView.getContext(), R.drawable.image);
        float scale = textView.getContext().getResources().getDisplayMetrics().density;
        int width = (int) (12 * scale + 0.5f);
        int height = (int) (18 * scale + 0.5f);
        image.setBounds(0, 0, width, height);
        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BASELINE);
        ssBuilder.setSpan(
                imageSpan, // Span to add
                0, // Start of the span (inclusive)
                1, // End of the span (exclusive)
                Spanned.SPAN_INCLUSIVE_EXCLUSIVE);// Do not extend the span when text add later

        ssBuilder.append(" " + text);
        ssBuilder = new SpannableStringBuilder(text);
        textView.setText(ssBuilder);
— Himanshu Saini
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.