我們知道,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下載: 點擊下載