Android TextView中显示图片的4种方式

Posted 2022-12-15 changhaiSmile

我们知道，TextView控件一般是用来显示文本的，而图片一般是用ImageView控件来显示。

那TextView能否显示图片呢？答案是肯定的！下面列出常见的4种方式。 

XML文件中指定属性值

---

这种方式应该是最常用的了，在TextView的左上右下显示图片，可用 
Android:drawableLeft 
android:drawableTop 
android:drawableRight 
android:drawableBottom

比如我们要在TextView的顶部设置图片，代码如下：

<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" />

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

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

效果图： 

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

android:drawablePadding="10dp"

或者

mTextView01.setCompoundDrawablePadding(10);

通过解析html来显示图片

---

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

显示项目中图片

看代码

// 第二种方式：显示项目中的图片
mTextView02 = (TextView) findViewById(R.id.textview_02);
// 把图片生成的ID加入img标签中 <img src='123'>
String htmlFor02 = "项目图片测试：" + "<img src='" + R.drawable.ic_launcher + "'>" + "<img src='"
        + R.drawable.apple + "'>";
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));

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

效果图如下： 

获取网络图片

为了简化代码，我们用到了google的volley网络框架去请求图片，然后保存到sdcard再显示，这种方式略显麻烦，看代码：

private static final String htmlFor03 = "网络图片测试："
        + "<img src='http://img1.imgtn.bdimg.com/it/u=4190601239,967361436&fm=11&gp=0.jpg'>";
private static final String NET_PIC_NAME = "NetPic.png";

// 第二种方式：显示网络图片
mTextView03 = (TextView) findViewById(R.id.textview_03);
mTextView03.setText(Html.fromHtml(htmlFor03, mNetWorkImageGetter, null));

private NetWorkImageGetter mNetWorkImageGetter = new NetWorkImageGetter();

class NetWorkImageGetter implements Html.ImageGetter 
    /*
     * (non-Javadoc)
     * @see android.text.Html.ImageGetter#getDrawable(java.lang.String)
     */
    @Override
    public Drawable getDrawable(String source) 
        Drawable drawable = null;

        File file = new File(Environment.getExternalStorageDirectory(), NET_PIC_NAME);
        if (file.exists()) 
            drawable = Drawable.createFromPath(file.getAbsolutePath());
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth() * 2,
                    drawable.getIntrinsicHeight() * 2);
         else 
            getNetworkImg(source);
        
        return drawable;
    



/**
 * 通过volley请求网络图片
 * @param url
 */
private void getNetworkImg(String url) 
    Log.d(TAG, "url: " + url);
    RequestQueue queue = Volley.newRequestQueue(this);
    ImageRequest request = new ImageRequest(url, new Response.Listener<Bitmap>() 

        @Override
        public void onResponse(Bitmap bitmap) 
            Log.d(TAG, "onResponse");
            saveMyBitmap(NET_PIC_NAME, bitmap);
            mTextView03.setText(Html.fromHtml(htmlFor03, mNetWorkImageGetter, null));
        
    , 0, 0, ScaleType.CENTER, Config.RGB_565, new ErrorListener() 

        @Override
        public void onErrorResponse(VolleyError error) 
            Log.d(TAG, "onErrorResponse:" + error);
        
    );
    queue.add(request);


/**
 * 保存获取到的网络图片到sdcard
 * @param bitName
 * @param mBitmap
 */
public void saveMyBitmap(String bitName, Bitmap mBitmap) 
    File f = new File("/sdcard/" + bitName);
    try 
        f.createNewFile();
     catch (IOException e) 
    
    FileOutputStream fOut = null;
    try 
        fOut = new FileOutputStream(f);
     catch (FileNotFoundException e) 
        e.printStackTrace();
    
    mBitmap.compress(Bitmap.CompressFormat.PNG, 100, fOut);
    try 
        fOut.flush();
     catch (IOException e) 
        e.printStackTrace();
    
    try 
        fOut.close();
     catch (IOException e) 
        e.printStackTrace();
    

代码比较多，弄明白流程就行，先从本地找–>没找到的话通过网络下载并保存到本地–>显示本地图片。

效果图如下： 

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

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

效果图： 

通过继承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);
    

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

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

效果图: 

Eclipse版DEMO下载: 点击下载