android view注釋翻譯-第二期（添加到頁面的方式）

上圖是視圖的開發(fā)指導(dǎo)，官方給了個鏈接。

國內(nèi)地址:

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

view的使用

"直譯"

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

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

有許多專門的視圖子類可以充當(dāng)控件，或者可以顯示文本，圖像或其他內(nèi)容。

創(chuàng)建視圖樹后，通常可能需要執(zhí)行幾種類型的常見操作.

"人話"

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

總結(jié)：

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

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

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

后續(xù):

第一期：view的簡單介紹。

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

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

大家分享一個，就是在Android開發(fā)中，使用Html渲染的方式實現(xiàn)必填項*號，看這個怎么實現(xiàn)；

在給大家分享之前，這里推薦下我自己建的Android開發(fā)技術(shù)分享交流平臺：653961128，不管你是小白還是大牛，我都挺歡迎，不定期分享干貨，包括2017最新的Android企業(yè)案例學(xué)習(xí)資料和零基礎(chǔ)入門教程，歡迎初學(xué)和進(jìn)階中的小伙伴，大家一起交流學(xué)習(xí)，共同進(jìn)步。

項目的個人基本信息UI界面效果圖如下，有一個紅色的*號，并且跟它挨著的文字顏色不一樣。我這里主要介紹一種有Html渲染的方式；

1、Xml布局(只選取對應(yīng)的部分)

這里的*符號和文字其實也是公用一個TextView

2、創(chuàng)建對應(yīng)String資源

這里可以單獨設(shè)置*符號和文字的顏色、加粗等操作

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

3、java代碼中實現(xiàn)渲染

到這里就可以實現(xiàn)效果圖里面的效果了，如果更改*符號和文字顏色和大小的時候，統(tǒng)一在String資源哪里更改就可以了。

此次分享就到這里，如果大家有什么好的方法實現(xiàn)的話可以評論留言哦；喜歡我的可以關(guān)注我

者博客

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

文章目錄

前言
場景
實現(xiàn)方式
drawable屬性
Spannable使用
HTML顯示
總結(jié)

前言

在使用TextView的時候，我們經(jīng)常需要在TextView中進(jìn)行圖文混排，比如在QQ中聊天的消息中的表情，底部tab圖標(biāo)等。

場景

實現(xiàn)方式

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

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

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

3.在TextView中顯示HTML文本。

drawable屬性

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

一共有兩種方式可以實現(xiàn)：XML布局設(shè)置和Java代碼設(shè)置。

1. xml布局

2. java代碼

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

3.缺陷

當(dāng)TextView設(shè)置成固定大小時，由于文字距離邊界的距離過大，會導(dǎo)致文字與圖片之間設(shè)置的間距無效，如下圖。

解決方案：

①設(shè)置TextView的內(nèi)填充

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

②自定義TextView重新布局

a.先自定義屬性iconPadding來設(shè)置間距，并提供方法給外部調(diào)用。

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

c.最后重寫onLayout方法。

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

Spannable使用

1.簡介

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

Spannable實現(xiàn)子類：SpannableString，SpannableStringBuilder（可變，類似于StringBuilder）。

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

其中setSpan方法包含如下參數(shù)：

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默認(rèn)對其方式有兩種：ALIGN_BOTTOM及ALIGN_BASELINE。很可惜我們平常用的居中對其的方式?jīng)]有，不過可以通過自定義實現(xiàn)，后續(xù)會在開源出來。

4.效果

HTML顯示

一般顯示HTML內(nèi)容有兩種方式：

使用 Android 提供的 WebView 控件。
通過將 HTML 內(nèi)容轉(zhuǎn)化為 Spanned 格式在 TextView 中進(jìn)行顯示。

現(xiàn)在大多數(shù)都用WebView的方式。但是并不是所有的場景下都適合使用 WebView 來顯示 HTML 內(nèi)容，例如，如果應(yīng)用要顯示的內(nèi)容只是一部分 HTML 片段，就可以利用 TextView 來進(jìn)行顯示，并且效率較高。

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

1.簡介

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

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

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

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

2.使用

fromHtml方法

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

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

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

繼承ImageGetter

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

繼承TagHandler

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

如果開發(fā)者認(rèn)為安卓 TagHandler 提供的默認(rèn)標(biāo)簽解析已經(jīng)夠用，直接在 fromHtml方法中第三個參數(shù)的地方填寫既可。

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

用戶交互

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

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

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

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

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

3.效果

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

開源庫：html-textview

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

總結(jié)

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

在線咨詢

上一篇：HTML 顏色
下一篇：HTML常用字體標(biāo)簽：揭秘HTML字體標(biāo)簽，讓你的網(wǎng)頁“字”得其樂！

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

android view注釋翻譯-第二期（添加到頁面的方式）

您的項目需求