Android TextView 多种方式显示图片

1.XML文件中指定属性值

这种方式应该是最常用的了，在TextView的左上右下显示图片，可用

android:drawableLeft
android:drawableTop
android:drawableRight
android:drawableBottom

    1
    2
    3
    4

实例代码如下：

<TextView
    android:id="@+id/textview_01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableTop="@drawable/ic_launcher"
    android:text="hello_world" />

    1
    2
    3
    4
    5
    6

这种显示方式图片跟文本是居中对齐的，此种方式对应的方法是setCompoundDrawablesWithIntrinsicBounds：

mTextView01.setCompoundDrawablesWithIntrinsicBounds(null,getResources().getDrawable(R.drawable.ic_launcher, null), null, null);

    1

如果觉得图片离文字太近，也可以设置他们之间的间距，xml或者代码中都可以实现：

android:drawablePadding="10dp"
或者
mTextView01.setCompoundDrawablePadding(10);

    1
    2
    3

效果图：
在这里插入图片描述
2.通过解析HTML来显示图片

这种方式可以显示项目中的图片、本地SDCARD和网络的图片，当然网络的图片必须先下载到本地然后显示。

显示项目中图片

mTextView02 = (TextView) findViewById(R.id.textview_02);
// 把图片生成的ID加入img标签中 <img src='123'>
String htmlFor02 = "项目图片测试：" + "<img src='" + R.drawable.ic_launcher + "'>";
    mTextView02.setText(Html.fromHtml(htmlFor02, new Html.ImageGetter() {
    @Override
    public Drawable getDrawable(String source) {
        Log.d(TAG, "项目图片测试_source:" + source);
        int id = Integer.parseInt(source);
        Drawable drawable = getResources().getDrawable(id, null);
        drawable.setBounds(0, 0, drawable.getIntrinsicWidth() ,
                drawable.getIntrinsicHeight());
        return drawable;
    }
}, null));

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

可以看到，ic_launcher和apple这两张图片的ID是加到了img标签中，然后通过实现html的ImageGetter接口中的getDrawable()方法取得图片。

效果图如下：
在这里插入图片描述
3.通过ImageSpan和SpannableString

这种方式很简单，通过新建ImageSpan对象得到图片，然后作为参数传入SpannableString的setSpan方法中即可。看代码：

// 第三种方式
mTextView04 = (TextView) findViewById(R.id.textview_04);
ImageSpan imgSpan = new ImageSpan(this, R.drawable.apple);
SpannableString spannableString = new SpannableString("012345");
spannableString.setSpan(imgSpan, 1, 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
mTextView04.setText(spannableString);

    1
    2
    3
    4
    5
    6

注意：setSpan(Object what, int start, int end, int flags)方法中的start和end值是用图片来取代的文本范围，flags是用来标识在 Span 范围内的文本前后输入新的字符时是否把它们也应用这个效果。

效果图：
在这里插入图片描述
4.通过继承TextView方式

这种方式的原理是通过继承TextView，并重写onDraw()，让图片直接画到文本上，这会导致图片跟文本重叠，它们之间的间距不好控制。

public class MyTextView extends TextView {
 
    private Bitmap mBitmap;
 
    /**
     * @param context
     * @param attrs
     */
    public MyTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.apple);
        setTextSize(40);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBitmap, 0, 0, getPaint());
        super.onDraw(canvas);
    }
}

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

然后在xml文件中引用自定义控件：

<com.example.imageintextview.MyTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="@string/hello_world" />

    1
    2
    3
    4
    5

效果图:
在这里插入图片描述
---------------------
作者：柚子君.
来源：CSDN
原文：https://blog.csdn.net/gengkui9897/article/details/88911396
版权声明：本文为博主原创文章，转载请附上博文链接！