整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML制作圖文混排型網(wǎng)頁(yè)

          一個(gè)網(wǎng)頁(yè)新聞中,出現(xiàn)最多的就是文字和圖片,圖片并茂能夠生動(dòng)的表達(dá)新聞主題。創(chuàng)建一個(gè)圖片的簡(jiǎn)單混排,具體步驟如下所示:

          第1步:分析要求

          本實(shí)例要求在網(wǎng)頁(yè)的最上方顯示出標(biāo)題,標(biāo)題下方是正文,在正文部分顯示圖片。其實(shí)例效果圖如下所示:

          第2步:實(shí)現(xiàn)代碼

          (1)打開(kāi)DW,編寫HTML代碼基本框架,具體如下:

          (2)在<body>標(biāo)簽中插入網(wǎng)頁(yè)標(biāo)題設(shè)計(jì)代碼,具體如下:

          <h1 style="text-align: center;text-shadow: 0.1em 2px 6px blue;font-size: 18px"折紙技術(shù):綿羊</h1>

          (3)在<body>標(biāo)簽中插入圖片設(shè)計(jì)代碼,具體如下:

          <img src="zz/88.png" style="text-align: center;width: 600px;float: left;border: #000000 solid 2px">

          (4)在<body>標(biāo)簽中完善文字段落內(nèi)容設(shè)計(jì)代碼,具體如下:

          <p style="text-indent: 8mm;line-height: 7mm">綿羊是常見(jiàn)的飼養(yǎng)動(dòng)物。身體豐滿,體毛綿密。頭短。雄獸有螺旋狀的大角,雌獸沒(méi)有角或僅有細(xì)小的角。毛色為白色。綿羊現(xiàn)在世界各地均有飼養(yǎng)。性情膽怯。秋季、冬季發(fā)情。雌獸的懷孕期為145—152天。每胎產(chǎn)1—5仔。壽命為10—15年。綿羊耐渴,可以為人類提供肉和毛皮等產(chǎn)品。下面就讓我們一起來(lái)折一個(gè)可愛(ài)的綿羊吧。</p>

          <p style="text-indent: 8mm;line-height: 7mm">綿羊體軀豐滿,被毛綿密,頭短。公綿羊多有螺旋狀大角具有威懾性,母綿羊無(wú)角或角細(xì)小。</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">常見(jiàn)的飼養(yǎng)動(dòng)物。身體豐滿,體毛綿密。頭短。雄羊有螺旋狀的大角,非常有威嚴(yán)但其實(shí)是起好看的作用,雌羊沒(méi)有角或僅有細(xì)小的角。毛色為白色。綿羊在約11000年前在西南亞地區(qū)被最早馴化。綿羊現(xiàn)在世界各地均有飼養(yǎng),性情既膽怯,又溫順,易馴化。目前高度馴化的飼養(yǎng)品種多為常年發(fā)情,地方放牧品種為季節(jié)發(fā)情,多在秋季、冬季發(fā)情。雌羊的懷孕期為145~152天。每胎產(chǎn)1~5仔。壽命為10~15年。綿羊耐渴,可以為人類提供肉和毛皮等產(chǎn)品。綿羊肉質(zhì)鮮嫩,非常好吃,中國(guó)飼養(yǎng)綿羊最多的地方是內(nèi)蒙古、青海等地。知名度最高的當(dāng)然是科技產(chǎn)品克隆綿羊——多莉。<br>

          一般認(rèn)為綿羊可能起源于4種不同的野生種,即:棲息于地中海沿岸的摩弗侖羊(O.musimon)、分布于亞洲中部和西南部的東方羊(O.orientalis)、盤羊(O.ammon)和蠻羊(O.orientalis vignei)。野生綿羊馴化為家畜始于約11000年以前的新石器時(shí)代,發(fā)源地在中亞細(xì)亞,以后逐漸向世界各地?cái)U(kuò)展,經(jīng)大量出土羊骨的碳測(cè)定認(rèn)為,中國(guó)養(yǎng)羊歷史在8000年前。野生羊經(jīng)過(guò)長(zhǎng)時(shí)期的選擇(動(dòng)物)和淘汰,其外形和特性有了許多變化;并由于各地自然條件和經(jīng)濟(jì)需要的差異而出現(xiàn)了不同的品種類型。18世紀(jì)以來(lái),品種的發(fā)展尤為迅速

          </p>

          (5)保存編輯好的網(wǎng)頁(yè)文件。

          實(shí)現(xiàn)新聞詳情的時(shí)候,安卓也有類似富文本的控件,但是使用webview或者textview等方法,每種方法各有優(yōu)劣,不是很完美。今天給大家介紹一個(gè)安卓控件——HtmlTextView,實(shí)現(xiàn)詳情頁(yè)圖文混排的顯示。
          1.在gradle引入控件

          dependencies {
              compile 'org.sufficientlysecure:html-textview:4.0'
          }
          123

          2.在布局頁(yè)面使用上面的控件

          <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" />
          12345

          3.在activity使用相關(guān)方法,此處是其他頁(yè)面網(wǎng)絡(luò)獲取解析傳遞過(guò)來(lái)的html內(nèi)容,HtmlHttpImageGetter方法不需要手動(dòng)編寫(較textview實(shí)現(xiàn)的時(shí)候不再需要重寫、繼承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));
          
              }
          }
          123456789101112131415

          4.讓我們看一下最終實(shí)現(xiàn)的效果


          有相關(guān)疑問(wèn)可以留言,感謝點(diǎn)贊轉(zhuǎn)發(fā),禁止轉(zhuǎn)載

          者博客

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

          文章目錄

          • 前言

          • 場(chǎng)景

          • 實(shí)現(xiàn)方式

          • drawable屬性

          • Spannable使用

          • HTML顯示

          • 總結(jié)


          0

          前言

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

          1

          場(chǎng)景

          2

          實(shí)現(xiàn)方式

          Android官方對(duì)TextView的圖文混排提供了支持,我們可以從以下三種方式實(shí)現(xiàn)TextView的圖文混排:

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

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

          3.在TextView中顯示HTML文本。

          3

          drawable屬性

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

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

          1. xml布局

          2. java代碼

          注意:必須setBounds測(cè)量圖片邊界,否則不顯示。

          3.缺陷

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

          解決方案:

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

          通過(guò)設(shè)置paddingLeft、paddingRight、paddingTop、paddingBottom來(lái)縮寫這個(gè)間距

          ②自定義TextView重新布局

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

          b.重寫setCompoundDrawablesWithIntrinsicBounds方法來(lái)獲取我們?cè)O(shè)置的drawable寬高。

          c.最后重寫onLayout方法。

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

          4

          Spannable使用

          1.簡(jiǎn)介

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

          Spannable實(shí)現(xiàn)子類:SpannableString,SpannableStringBuilder(可變,類似于StringBuilder)。

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

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

          flags常用的有四種

          通常在insert方式才生效,平時(shí)不生效,具體看: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)對(duì)其方式有兩種:ALIGN_BOTTOM及ALIGN_BASELINE。很可惜我們平常用的居中對(duì)其的方式?jīng)]有,不過(guò)可以通過(guò)自定義實(shí)現(xiàn),后續(xù)會(huì)在開(kāi)源出來(lái)。

          4.效果

          5

          HTML顯示

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

          • 使用 Android 提供的 WebView 控件。


          • 通過(guò)將 HTML 內(nèi)容轉(zhuǎn)化為 Spanned 格式在 TextView 中進(jìn)行顯示。

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

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

          1.簡(jiǎn)介

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

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

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

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

          2.使用

          fromHtml方法

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

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

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

          繼承ImageGetter

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

          繼承TagHandler

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

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

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

          用戶交互

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

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

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

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

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

          3.效果

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

          開(kāi)源庫(kù):html-textview

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

          6

          總結(jié)

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


          主站蜘蛛池模板: 国产一区二区精品久久岳√| 白丝爆浆18禁一区二区三区 | 一区二区三区四区免费视频| 国产无码一区二区在线| 午夜福利一区二区三区在线观看 | 亚洲第一区精品观看| 久久精品国产一区二区三区肥胖| 亚洲第一区二区快射影院| 日本在线电影一区二区三区| 精品一区二区三区中文字幕| 福利在线一区二区| 亚洲另类无码一区二区三区| 亚洲AV无码一区二区二三区软件| 久久精品国产一区二区电影| 精品人妻无码一区二区色欲产成人| 任你躁国语自产一区在| 亚洲成人一区二区| 日本v片免费一区二区三区| 人妻无码一区二区三区免费 | 日韩久久精品一区二区三区| 精品亚洲一区二区三区在线播放| 一区 二区 三区 中文字幕| 无码少妇A片一区二区三区| 老熟女高潮一区二区三区| 国产AV一区二区三区无码野战| 国偷自产一区二区免费视频| 国产AV天堂无码一区二区三区| 国产精品区一区二区三| 在线中文字幕一区| 亚洲视频在线观看一区| 国产一区二区三区久久精品| 亚洲一区日韩高清中文字幕亚洲| 自慰无码一区二区三区| 国产精品女同一区二区久久| 国产乱码精品一区二区三区四川| av在线亚洲欧洲日产一区二区| 2021国产精品视频一区| 久久久无码一区二区三区| 国产丝袜美女一区二区三区| 中文字幕一区二区三区四区| 综合久久一区二区三区|