上圖是視圖的開發指導，官方給了個鏈接。

國內地址:

https://developer.android.google.cn/guide/topics/ui/index.html

view的使用

"直譯"

窗口中的所有視圖都排列在一棵樹中.

可以通過代碼或通過在一個或多個XML布局中指定視圖樹來添加視圖.

有許多專門的視圖子類可以充當控件，或者可以顯示文本，圖像或其他內容。

創建視圖樹后，通常可能需要執行幾種類型的常見操作.

"人話"

窗口也就是windows，windows上有視圖"樹",我們在畫頁面時其實就是往視圖樹上添加view，當然，添加的方式即可以是xml也可以是代碼的形式。下面那兩句話，舉個例子就是TextView的常見類型操作setText();

總結：

我們對整個view學習要建立一個體系，有一個脈絡。(自己腦海中有一個大體的脈絡，再去補充一個一個知識點)

view的基本概念->view如何使用->如何自定義view

之后我會分享我的"脈絡"，希望大家多多支持.

后續:

第一期：view的簡單介紹。

第二期：view添加到頁面的方式。

下一期：view的屬性和方法。

<string name="tip_xinghao_nation">
 <Data>
 <![CDATA[<font color="#e60012"> *</font><font color="#189dde">民族 : </font>]]
 </Data>
</string>

者博客

http://www.jianshu.com/u/0fa6f5d09040

文章目錄

• 前言

• 場景

• 實現方式

• drawable屬性

• Spannable使用

• HTML顯示

• 總結

  
  

0

前言

在使用TextView的時候，我們經常需要在TextView中進行圖文混排，比如在QQ中聊天的消息中的表情，底部tab圖標等。

1

場景

2

實現方式

Android官方對TextView的圖文混排提供了支持，我們可以從以下三種方式實現TextView的圖文混排：

1.在TextView中使用Compound Drawable屬性；

2.在TextView中使用Spannable多樣式顯示；

3.在TextView中顯示HTML文本。

3

drawable屬性

在TextView中使用Compound Drawable屬性可以在文字的上下左右放置drawable，效果如下：

一共有兩種方式可以實現：XML布局設置和Java代碼設置。

1. xml布局

2. java代碼

注意：必須setBounds測量圖片邊界，否則不顯示。

3.缺陷

當TextView設置成固定大小時，由于文字距離邊界的距離過大，會導致文字與圖片之間設置的間距無效，如下圖。

解決方案：

①設置TextView的內填充

通過設置paddingLeft、paddingRight、paddingTop、paddingBottom來縮寫這個間距

②自定義TextView重新布局

a.先自定義屬性iconPadding來設置間距，并提供方法給外部調用。

b.重寫setCompoundDrawablesWithIntrinsicBounds方法來獲取我們設置的drawable寬高。

c.最后重寫onLayout方法。

可以先參考：Android技巧之drawablePadding的那些事（https://yuxingxin.com/2015/11/05/DrawablePadding/）,該篇文章只解決了左右失效的問題。后期會整理個解決圖文混排的工具庫，里面會有具體方案。

4

Spannable使用

1.簡介

setText(CharSequence text)中接收的是CharSequence。而SpannableString和SpannableStringBuilder是其實現類，是可以直接賦值的。并且兩者的setSpan方法可以設置一些格式對象（例如字體大小、下劃線、替換為圖片等），這就可以實現富文本了。

Spannable實現子類：SpannableString，SpannableStringBuilder（可變，類似于StringBuilder）。

Spannable中定義了抽象方法：setSpan(Object what, int start, int end, int flags)和removeSpan(Object what)。這兩個方法實現了對字符串的靈活編輯。

其中setSpan方法包含如下參數：

flags常用的有四種

通常在insert方式才生效，平時不生效，具體看：Explain the meaning of Span flags like SPAN_EXCLUSIVE_EXCLUSIVE。（https://stackoverflow.com/questions/9879233/explain-the-meaning-of-span-flags-like-span-exclusive-exclusive）

2.常用span類

3.使用方式

其中ImageSpan默認對其方式有兩種：ALIGN_BOTTOM及ALIGN_BASELINE。很可惜我們平常用的居中對其的方式沒有，不過可以通過自定義實現，后續會在開源出來。

4.效果

5

HTML顯示

一般顯示HTML內容有兩種方式：

• 使用 Android 提供的 WebView 控件。

  
  

• 通過將 HTML 內容轉化為 Spanned 格式在 TextView 中進行顯示。

現在大多數都用WebView的方式。但是并不是所有的場景下都適合使用 WebView 來顯示 HTML 內容，例如，如果應用要顯示的內容只是一部分 HTML 片段，就可以利用 TextView 來進行顯示，并且效率較高。

由于這種方式不太常用，就不深入介紹，里面可以實現的效果還是很好的。

1.簡介

Android 中的 TextView 組件常用于顯示文本內容，其實它也可以顯示 HTML 的內容。

簡單來講，這就需要先把 HTML 的內容以字符串的形式獲取后，經過 android.text.Html.fromHtml轉化成 Spanned 的格式，然后將其傳遞到 TextView 的 setText方法中，這樣就可以在 TextView 中顯示 HTML 頁面的內容了。

需要注意的是，并不是所有的 HTML 標簽在 TextView 中都是支持的，且官方文檔并沒有明確的說明支持 HTML 標簽列表，通過查看 Android 源代碼，可以得到簡單的支持列表。

下面的示例來介紹如何在 TextView 中顯示一段 HTML 內容，要顯示的這段 HTML 內容即包含超鏈接內容，也包含有圖片。

2.使用

fromHtml方法

source，就是包含 HTML 內容的字符串。Html.ImageGetter 和 Html.TagHandler 是兩個接口，提供給開發者繼承使用。

imageGetter， 如果要顯示圖片是需要被繼承的，重寫 getDrawable(String source)方法，用于獲取 HTML 里面的圖片來顯示在 TextView 中。

tagHandler，其作用是把 HTML 帶標記的文本內容字符串轉化成可以顯示效果的的 Spanned 字符串 。由于并非所有的 HTML 標簽都可以轉化，所以在使用時，用戶需要自己添加一些必要的標簽和處理方法時才會繼承使用的。

繼承ImageGetter

繼承于 ImageGetter，重寫 getDrawable (String source) 方法。通過異步操作，讀取本地/網絡資源，獲得drawable對象。

繼承TagHandler

繼承于 TagHandler，重寫了 handleTag方法。為了支持更多的標簽，例如為了支持<ul><ol><dd>和<li>標簽，這四個標簽是在 formHtml方法中本身是不支持。

如果開發者認為安卓 TagHandler 提供的默認標簽解析已經夠用，直接在 fromHtml方法中第三個參數的地方填寫 既可。

最后，通過 formHtml方法將 HTML 內容轉化為可供顯示的 SpannableString，將 SpannableString 通過 setText 方法放入 TextView 中，就可以顯示圖文并茂的內容了。

用戶交互

formHtml方法已經將 HTML 內容中的超鏈接和圖片轉義成為 UrlSpan 和 ImageSpan，進而在 TextView 中完成顯示。但是此時是沒有任何用戶交互的，用戶只能看到 HTML 的內容，下面介紹如何添加用戶交互功能。

要完成用戶交互，這里我們需要在 TextView 中還需要調用textView.setMovementMethod方法。

Android 提供了 LinkMovementMethod 類以實現了對于文本內容中超鏈接的遍歷，并且支持對于超鏈接的點擊事件。

所以只要在添加下面一行代碼，就可以使點擊 UrlSpan 能夠觸發打開鏈接的功能。

如果想要更多的用戶交互效果，可以自定義LinkMovementMethod 類，重寫onTouchEvent方法來實現。

3.效果

關于HTML顯示這部分，沒做具體實現。具體可以看：靈活高效的在 Android Native App 開發中顯示 HTML 內容（https://www.ibm.com/developerworks/cn/web/1407_zhangqian_androidhtml/index.html）,里面有具體源碼可以下載，HTML部分內容也是參考該篇文章完成的。

開源庫：html-textview

https://github.com/PrivacyApps/html-textview

6

總結

以上就是關于圖文混排的一些解決方案，相信通過這些了解，對于工作中的實際場景的使用大家會有適當的解決方案。由于實際應用較少，所以認識較為淺顯，可能有些地方描述不當，后期會考慮封裝個解決圖文混排的工具類，加深下理解。