整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一個網頁新聞中，出現最多的就是文字和圖片，圖片并茂能夠生動的表達新聞主題。創建一個圖片的簡單混排，具體步驟如下所示：
本實例要求在網頁的最上方顯示出標題，標題下方是正文，在正文部分顯示圖片。其實例效果圖如下所示：
（1）打開DW，編寫HTML代碼基本框架，具體如下：
（2）在<body>標簽中插入網頁標題設計代碼，具體如下：
<h1 style="text-align: center;text-shadow: 0.1em 2px 6px blue;font-size: 18px"折紙技術：綿羊</h1>
（3）在<body>標簽中插入圖片設計代碼，具體如下：
<img src="zz/88.png" style="text-align: center;width: 600px;float: left;border: #000000 solid 2px">
（4）在<body>標簽中完善文字段落內容設計代碼，具體如下：
<p style="text-indent: 8mm;line-height: 7mm">綿羊是常見的飼養動物。身體豐滿，體毛綿密。頭短。雄獸有螺旋狀的大角，雌獸沒有角或僅有細小的角。毛色為白色。綿羊現在世界各地均有飼養。性情膽怯。秋季、冬季發情。雌獸的懷孕期為145—152天。每胎產1—5仔。壽命為10—15年。綿羊耐渴，可以為人類提供肉和毛皮等產品。下面就讓我們一起來折一個可愛的綿羊吧。</p>
<p style="text-indent: 8mm;line-height: 7mm">綿羊體軀豐滿，被毛綿密，頭短。公綿羊多有螺旋狀大角具有威懾性，母綿羊無角或角細小。</p>
<img src="zz/88.png" style="text-align: center;width: 600px;float: left;border: #000000 solid 2px">
<p style="text-indent: 8mm;line-height: 7mm">常見的飼養動物。身體豐滿，體毛綿密。頭短。雄羊有螺旋狀的大角，非常有威嚴但其實是起好看的作用，雌羊沒有角或僅有細小的角。毛色為白色。綿羊在約11000年前在西南亞地區被最早馴化。綿羊現在世界各地均有飼養，性情既膽怯，又溫順，易馴化。目前高度馴化的飼養品種多為常年發情，地方放牧品種為季節發情，多在秋季、冬季發情。雌羊的懷孕期為145～152天。每胎產1～5仔。壽命為10～15年。綿羊耐渴，可以為人類提供肉和毛皮等產品。綿羊肉質鮮嫩，非常好吃，中國飼養綿羊最多的地方是內蒙古、青海等地。知名度最高的當然是科技產品克隆綿羊——多莉。<br>
一般認為綿羊可能起源于4種不同的野生種，即：棲息于地中海沿岸的摩弗侖羊（O.musimon）、分布于亞洲中部和西南部的東方羊（O.orientalis）、盤羊(O.ammon）和蠻羊（O.orientalis vignei）。野生綿羊馴化為家畜始于約11000年以前的新石器時代，發源地在中亞細亞，以后逐漸向世界各地擴展，經大量出土羊骨的碳測定認為，中國養羊歷史在8000年前。野生羊經過長時期的選擇（動物）和淘汰，其外形和特性有了許多變化；并由于各地自然條件和經濟需要的差異而出現了不同的品種類型。18世紀以來，品種的發展尤為迅速
</p>
（5）保存編輯好的網頁文件。
實現新聞詳情的時候，安卓也有類似富文本的控件，但是使用webview或者textview等方法，每種方法各有優劣，不是很完美。今天給大家介紹一個安卓控件——HtmlTextView，實現詳情頁圖文混排的顯示。
1.在gradle引入控件
dependencies {
compile 'org.sufficientlysecure:html-textview:4.0'
}
1232.在布局頁面使用上面的控件
<org.sufficientlysecure.htmltextview.HtmlTextView
android:id="@+id/html_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAppearance="@android:style/TextAppearance.Small" />
123453.在activity使用相關方法，此處是其他頁面網絡獲取解析傳遞過來的html內容,HtmlHttpImageGetter方法不需要手動編寫（較textview實現的時候不再需要重寫、繼承ImageGetter方法，可查看上篇博客）
public class ContentActivity extends BaseActivity {
private String htmlContents = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_content);
HtmlTextView htmlTextView = findViewById(R.id.html_text);
final Intent intent = getIntent();
Bundle bundle = intent.getExtras();
htmlContents = bundle.getCharSequence("contents").toString();
htmlTextView.setHtml(htmlContents, new HtmlHttpImageGetter(htmlTextView));
}
}
1234567891011121314154.讓我們看一下最終實現的效果
有相關疑問可以留言，感謝點贊轉發，禁止轉載
者博客
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
總結
以上就是關于圖文混排的一些解決方案，相信通過這些了解，對于工作中的實際場景的使用大家會有適當的解決方案。由于實際應用較少，所以認識較為淺顯，可能有些地方描述不當，后期會考慮封裝個解決圖文混排的工具類，加深下理解。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
