Android 在TextView 中顯示圖片的4種方式

我們知道，TextView控件一般是用來顯示文本的，而圖片一般是用ImageView控件來顯示。

那TextView能否顯示圖片呢？答案是肯定的！下面列出常見的4種方式。

XML文件中指定屬性值

---

這種方式應該是最常用的了，在TextView的左上右下顯示圖片，可用
android:drawableLeft
android:drawableTop
android:drawableRight
android:drawableBottom

比如我們要在TextView的頂部設置圖片，代碼如下：

1. <TextView
2. android:id= "@+id/textview_01"
3. android:layout_width= "wrap_content"
4. android:layout_height= "wrap_content"
5. android:drawableTop= "@drawable/ic_launcher"
6. android:text= "hello_world" />

這種顯示方式圖片跟文本是居中對齊的，此種方式對應的方法是setCompoundDrawablesWithIntrinsicBounds：

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

效果圖：

如果覺得圖片離文字太近，也可以設置他們之間的間距，xml或者代碼中都可以實現：

android:drawablePadding="10dp"

或者

mTextView01.setCompoundDrawablePadding(10);

通過解析HTML來顯示圖片

---

這種方式可以顯示項目中的圖片、本地SDCARD和網絡的圖片，當然網絡的圖片必須先下載到本地然后顯示。

顯示項目中圖片

看代碼

1. // 第二種方式：顯示項目中的圖片
2. mTextView02 = (TextView) findViewById(R.id.textview_02);
3. // 把圖片生成的ID加入img標簽中 <img src='123'>
4. String htmlFor02 = "項目圖片測試：" + "<img src='" + R.drawable.ic_launcher + "'>" + "<img src='"
5. + R.drawable.apple + "'>";
6. mTextView02.setText(Html.fromHtml(htmlFor02, new Html.ImageGetter() {
7. @Override
8. public Drawable getDrawable(String source) {
9. Log.d(TAG, "項目圖片測試_source:" + source);
10. int id = Integer.parseInt(source);
11. Drawable drawable = getResources().getDrawable(id, null);
12. drawable.setBounds( 0, 0, drawable.getIntrinsicWidth() ,
13. drawable.getIntrinsicHeight());
14. return drawable;
15. }
16. }, null));

可以看到，ic_launcher和apple這兩張圖片的ID是加到了img標簽中，然后通過實現html的ImageGetter接口中的getDrawable()方法取得圖片。

效果圖如下：

獲取網絡圖片

為了簡化代碼，我們用到了google的volley網絡框架去請求圖片，然后保存到sdcard再顯示，這種方式略顯麻煩，看代碼：

1. private static final String htmlFor03 = "網絡圖片測試："
2. + "<img src='http://img1.imgtn.bdimg.com/it/u=4190601239,967361436&fm=11&gp=0.jpg'>";
3. private static final String NET_PIC_NAME = "NetPic.png";
4.  
5. // 第二種方式：顯示網絡圖片
6. mTextView03 = (TextView) findViewById(R.id.textview_03);
7. mTextView03.setText(Html.fromHtml(htmlFor03, mNetWorkImageGetter, null));
8.  
9. private NetWorkImageGetter mNetWorkImageGetter = new NetWorkImageGetter();
10.  
11. class NetWorkImageGetter implements Html.ImageGetter {
12. /*
13. * (non-Javadoc)
14. * @see android.text.Html.ImageGetter#getDrawable(java.lang.String)
15. */
16. @Override
17. public Drawable getDrawable(String source) {
18. Drawable drawable = null;
19.  
20. File file = new File(Environment.getExternalStorageDirectory(), NET_PIC_NAME);
21. if (file.exists()) {
22. drawable = Drawable.createFromPath(file.getAbsolutePath());
23. drawable.setBounds( 0, 0, drawable.getIntrinsicWidth() * 2,
24. drawable.getIntrinsicHeight() * 2);
25. } else {
26. getNetworkImg(source);
27. }
28. return drawable;
29. }
30.  
31. }
32.  
33.  
34. /**
35. * 通過volley請求網絡圖片
36. * @param url
37. */
38. private void getNetworkImg(String url) {
39. Log.d(TAG, "url: " + url);
40. RequestQueue queue = Volley.newRequestQueue( this);
41. ImageRequest request = new ImageRequest(url, new Response.Listener<Bitmap>() {
42.  
43. @Override
44. public void onResponse(Bitmap bitmap) {
45. Log.d(TAG, "onResponse");
46. saveMyBitmap(NET_PIC_NAME, bitmap);
47. mTextView03.setText(Html.fromHtml(htmlFor03, mNetWorkImageGetter, null));
48. }
49. }, 0, 0, ScaleType.CENTER, Config.RGB_565, new ErrorListener() {
50.  
51. @Override
52. public void onErrorResponse(VolleyError error) {
53. Log.d(TAG, "onErrorResponse:" + error);
54. }
55. });
56. queue.add(request);
57. }
58.  
59. /**
60. * 保存獲取到的網絡圖片到sdcard
61. * @param bitName
62. * @param mBitmap
63. */
64. public void saveMyBitmap(String bitName, Bitmap mBitmap) {
65. File f = new File("/sdcard/" + bitName);
66. try {
67. f.createNewFile();
68. } catch (IOException e) {
69. }
70. FileOutputStream fOut = null;
71. try {
72. fOut = new FileOutputStream(f);
73. } catch (FileNotFoundException e) {
74. e.printStackTrace();
75. }
76. mBitmap.compress(Bitmap.CompressFormat.PNG, 100, fOut);
77. try {
78. fOut.flush();
79. } catch (IOException e) {
80. e.printStackTrace();
81. }
82. try {
83. fOut.close();
84. } catch (IOException e) {
85. e.printStackTrace();
86. }
87. }

 

代碼比較多，弄明白流程就行，先從本地找–>沒找到的話通過網絡下載並保存到本地–>顯示本地圖片。

效果圖如下：

 

 

通過ImageSpan和SpannableString

---

這種方式很簡單，通過新建ImageSpan對象得到圖片，然后作為參數傳入SpannableString的setSpan方法中即可。看代碼：

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

注意：setSpan(Object what, int start, int end, int flags)方法中的start和end值是用圖片來取代的文本范圍，flags是用來標識在 Span 范圍內的文本前后輸入新的字符時是否把它們也應用這個效果。

效果圖：

通過繼承TextView方式

---

這種方式的原理是通過繼承TextView，並重寫onDraw()，讓圖片直接畫到文本上，這會導致圖片跟文本重疊，它們之間的間距不好控制。

1. public class MyTextView extends TextView {
2.  
3. private Bitmap mBitmap;
4.  
5. /**
6. * @param context
7. * @param attrs
8. */
9. public MyTextView(Context context, AttributeSet attrs) {
10. super(context, attrs);
11. mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.apple);
12. setTextSize( 40);
13. }
14.  
15. @Override
16. protected void onDraw(Canvas canvas) {
17. canvas.drawBitmap(mBitmap, 0, 0, getPaint());
18. super.onDraw(canvas);
19. }
20. }

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

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

效果圖: