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

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

發佈了456 篇原創文章 · 獲贊 19 · 訪問量 42萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章