在Android TextView中显示图片的4种方式详解
我们知道,TextView控件一般是用来显示文本的,而图片一般是用ImageView控件来显示。
那TextView能否显示图片呢?答案是肯定的!下面列出常见的4种方式。
1、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);
2、通过解析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(); } }
代码比较多,弄明白流程就行,先从本地找–>没找到的话通过网络下载并保存到本地–>显示本地图片。
效果图如下:
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);
注意: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); } }
然后在xml文件中引用自定义控件:
<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种方式,每种方式都是自己的应用场景,大家根据自己的情况选择正确的方式
您可能感兴趣的文章:
- Android自定义TextView实现文字图片居中显示的方法
- Android DrawableTextView图片文字居中显示实例
- Android中Textview和图片同行显示(文字超出用省略号,图片自动靠右边)
- Android中TextView显示插入的图片实现方法
- Android实现TextView显示HTML加图片的方法
- Android TextView显示Html类解析的网页和图片及自定义标签用法示例
- android教程之textview解析带图片的html示例