TextView 텍스트에 이미지를 추가하는 방법은 무엇입니까?

86

저는 Google에서 검색 한 결과 "hello my name is [image]" 와 같이 TextView텍스트에 이미지를 포함하는 방법에 대한 저와 유사한 질문을 발견 한이 사이트를 발견했습니다 . 대답은 다음과 같습니다.

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

이 코드에서 알고 싶습니다.

  1. 컨텍스트에서 무엇을 입력하거나해야합니까?
  2. text.setSpan()가져 오기 또는 참조와 같은 작업을 수행 하거나 텍스트를 남겨야합니까?

누군가 나를 위해 이것을 분해 할 수 있다면 대단히 감사 할 것입니다.

java  android  xml  image  textview 
— Cranosaur
소스

답변:

202

이 시도 ..

    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"/>
— 우 메쉬 라 카니
소스
"TextView 유형에서 비 정적 메서드 setCompoundDrawablesWithIntrinsicBounds (int, int, int, int)에 대한 정적 참조를 만들 수 없습니다"라는 오류가 발생했습니다. "
— Cranosaur
감사합니다 Umesh xml 메소드가 나를 위해 일했습니다. TextViews에 xml 레이아웃을 사용하므로 차이가 있는지 알 수 없으며 아마도 Java에서 작동하지 않는 것입니다.
— Cranosaur 2013 년
1
@Umesh Lakhani :이 접근 방식으로 텍스트에 여러 드로어 블을 넣을 수있는 방법은 무엇입니까?
— Behnam 2014-08-27
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;
    }
}

사용하다:

의 고해상도 / 레이아웃 / 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=...
                />

com / xyz / customandroid / 이외의 다른 위치에 TextViewWithImages.java 를 배치하는 경우 위 의 패키지 이름도 변경해야합니다 .com.xyz.customandroid

의 고해상도 / 값 / 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-06-03
@AnasAzeem은 ImageView를 통해 ok16을 표시하고 "정상적으로"재 시도 할 수 있습니까? TextView 대신 TextViewWithImages를 지정 했습니까?
— 18446744073709551615
1
변경하는 것을 잊지 마세요 <com.xyz.customandroid.TextViewWithImages와 <YourPackageName.TextViewWithImages 그렇지 않으면 당신은 팽창과 NoClassFound 예외에 오류가 발생했습니다
— AndroidGeek
1
그 작동하지만 난 텍스트의 중앙에 높이 이미지의 폭과도받지 못하고 이미지를 설정 캔트
— 인 Rajesh Koshti
1
릴리스 빌드로 패키징하기 전까지는 훌륭한 클래스입니다. 그것은 충돌하고 나는 여전히 그 이유를 찾을 수 없었습니다. 이 클래스는 Proguard에서 -keep에 표시했습니다. 여전히 운이 없습니다. 아니면 내가 사용한 이미지가 벡터 일 수도 있습니다. 모르겠어요.
— 유다 야 디트 야 Barua
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);

이 코드는 최소한의 메모리를 사용합니다.

— 파벨 카타이 킨
소스
2
텍스트 위에 당신이 나를 도울 수와 그 경우에 이미지를 추가하지만 텍스트의 기준선과 정렬은 내가 정렬 할
— humayoon을 시디
2
그것은 작동하지만 어떻게 우리는 텍스트의 크기에 따라 아이콘 이미지의 크기를 조정할 수 있습니다
— 선일 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>
— 모니카 복원
소스
3
이것은 좋은 해결책입니다. 개선 사항 만 제안합니다. drawable.setColorFilter 전에 drawable.mutate () 추가; 그렇게하지 않으면 앱의 다른 부분에 다른 색상의 드로어 블이 표시됩니다.
— moondroid
@moondroid 제안 해 주셔서 감사합니다. 그에 따라 답변을 편집했습니다.
— 분석 재개 모니카
내 당김가 사각형이 때문에 사실 나는 문제가 있고, 항상 당김 높이 드로어 블 폭이 동일한 것이 솔루션은, 그것은 unproportionally 내 당김의 크기를 조정합니다
— 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()평소와 같이 betterImageSpan 인스턴스를

— 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.