TextViewテキストに画像を追加するにはどうすればよいですか？

83

Googleで検索したところ、このサイトに出くわしました。TextViewたとえば、「こんにちは、私の名前は[image]です」など、テキストに画像を含める方法について、私のような質問を見つけました。答えは次のとおりです。

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

このコードで知りたいのですが、

  1. コンテキストで何を入力または実行する必要がありますか？
  2. text.setSpan()インポートや参照などの何かをするか、テキストのままにする必要がありますか？

誰かが私のためにこれを分解することができれば、それは大いにありがたいです。

java  android  xml  image  textview 
— クラノサウルス
ソース

回答:

200

これを試して ..

    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
ソース
「TextView型から非静的メソッドsetCompoundDrawablesWithIntrinsicBounds（int、int、int、int）への静的参照を作成できません」というエラーが発生しました
— Cranosaur 2013年
Umeshに感謝します。xmlメソッドが機能しました。TextViewにxmlレイアウトを使用しているので、それが違いを生むかどうかはわかりません。おそらくそれがJavaで機能しなかった理由です。
— クラノサウルス2013年
1
@Umesh Lakhani：このアプローチで複数のドローアブルをテキストに入れるにはどうすればよいですか？
— behnam 2014
XMLでは、画像は中央ではなく左から描画されます。
— CoolMind 2016
こんにちは@Umesh。それにマージンを設定する方法。setCompoundDrawablePadding何もしていません
— Prabs 2016
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 /レイアウト/ 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 /値/の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
ソース
私が使用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を「通常どおり」表示できますか？TextViewの代わりにTextViewWithImagesを指定しましたか？
— 18446744073709551615 2014年
1
<com.xyz.customandroid.TextViewWithImagesを<YourPackageName.TextViewWithImagesに変更することを忘れないでください。そうしないと、インフレーションでエラーが発生し、NoClassFound例外が発生します
— AndroidGeek
1
その動作はしますが、画像の高さ幅を設定できず、テキストの中央に画像が表示されません
— Rajesh Kosht​​i 2016
1
リリースビルドにパッケージ化するまでは、すばらしいクラスです。クラッシュしましたが、まだ理由がわかりません。このクラスを-keepinproguardでマークしました。まだ運がない。あるいは、私が使用した画像がベクトルであるため、クラッシュした可能性があります。知りません。
— Uday 2017
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
ソース
2
その場合、画像が追加されましたが、テキストのベースラインに合わせますテキストの上部に合わせたいです私を助けてくれますか
— humayoon siddique 2017
2
それは機能しますが、テキストサイズに応じて画像アイコンのサイズを変更するにはどうすればよいですか
— sunil kushwah 2017
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>
— モニカを復活させる
ソース
3
これは良い解決策です。改善のみをお勧めします。drawable.setColorFilterの前にdrawable.mutate（）を追加します。そうしないと、アプリの他の部分に異なる色のドローアブルが表示されます。
— moondroid 2017年
@moondroid提案ありがとうございます、それに応じて答えを編集しました。
— モニカを復活させる2017
実際、ドローアブルが正方形ではないため、問題が発生しました。このソリューションでは、ドローアブルの幅がドローアブルの高さと常に同じになり、ドローアブルのサイズが不均衡になります
— HendraWD
1

これは、@ ABoschmanによる上記の以前の回答に部分的に基づいています。そのソリューションでは、画像の入力サイズが、画像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);
}

次に、betterImageSpanインスタンスをspannable.setSpan()通常どおりに提供します

— kip2
ソース
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);
— ひまんしゅさいに
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.