我們知道，TextView控件一般是用來顯示文本的，而圖片一般是用ImageView控件來顯示。
那TextView能否顯示圖片呢？答案是肯定的！下面列出常見的4種方式。
1、XML文件中指定屬性值
這種方式應該是最常用的了，在TextView的左上右下顯示圖片，可用
android:drawableLeft
android:drawableTop
android:drawableRight
android:drawableBottom
比如我們要在TextView的頂部設置圖片，代碼如下：
|
1
2
3
4
5
6
|
<
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：
|
1
2
|
mTextView01.setCompoundDrawablesWithIntrinsicBounds(null,
getResources().getDrawable(R.drawable.ic_launcher, null), null, null);
|
效果圖：
如果覺得圖片離文字太近，也可以設置他們之間的間距，xml或者代碼中都可以實現：
|
1
|
android:drawablePadding="10dp"
|
或者
|
1
|
mTextView01.setCompoundDrawablePadding(10);
|
2、通過解析HTML來顯示圖片
這種方式可以顯示項目中的圖片、本地SDCARD和網絡的圖片，當然網絡的圖片必須先下載到本地然后顯示。
顯示項目中圖片
看代碼
|
1
2
3
4
5
6
7
8
9
10
|
// 第二種方式：顯示項目中的圖片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再顯示，這種方式略顯麻煩，看代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
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();
}
}
|
代碼比較多，弄明白流程就行，先從本地找–>沒找到的話通過網絡下載並保存到本地–>顯示本地圖片。
效果圖如下：
3、通過ImageSpan和SpannableString
這種方式很簡單，通過新建ImageSpan對象得到圖片，然后作為參數傳入SpannableString的setSpan方法中即可。看代碼：
|
1
2
|
// 第三種方式
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 范圍內的文本前后輸入新的字符時是否把它們也應用這個效果。
效果圖：
4、通過繼承TextView方式
這種方式的原理是通過繼承TextView，並重寫onDraw()，讓圖片直接畫到文本上，這會導致圖片跟文本重疊，它們之間的間距不好控制。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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文件中引用自定義控件：
|
1
|
<
com.example.imageintextview.MyTextViewandroid:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_marginTop
=
"20dp"
android:text
=
"@string/hello_world"
/>
|
效果圖:
以上就是在Android TextView中顯示圖片的4種方式，每種方式都是自己的應用場景，大家根據自己的情況選擇正確的方式