How to convert custom HTML to native styled text

)PXUPDPOWFSU DVTUPN)5.- UPOBUJWFTUZMFEUFYU ࢤำါل !TIJIPDIBO !TIJCVZBBQL

"CPVUNF ࢤำါلʢ͠΄Ώ͏͖ʣ !TIJIPDIBO !TIJIPDIBOEFTV

8FC7JFXUP/BUJWF

5FYU*UFN ɾTextColor (red) ɾBold ɾTextSize (big)

4FSWFS3FTQPOTF+TPO { type: "TEXT", itemId: 1468485519419, text: "ͦ͜ʹ͸ͳΜͱɺ<span class="td-color">ϏϤϯϏϤ ϯʹൽ͕ͨΔΜ͓ͩෲ</span>ͷࣸਅ͕ʂ<br><br>͜Ε
ʹ͸<span class="td-weight">ʮ͋ͳͨͷਖ਼௚ͳͱ͜Ζ޷ ͖Ͱ͢ὑʯʮ</span><span class="td-weight">શવΦο έʔʂʂʯ</span>ʮ</span><span class="td-weight">ͦ Ε͸ɺͦΕͰັྗͩΑὑʯ</span>ͱɺૉ௚ͳ۽ా͞ΜΛ ৆ࢍ͢Δίϝϯτ͕૬࣍͗·ͨ͠ɻ<br>" }

&NCFE8FC7JFX )UNMGSPN)UNM *NQMFNFOUBUJPO

&NCFE8FC7JFXʢʣ <!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">  <style>  * { 
margin: 0;  padding: 0;  text-align: center;  }  </style>  </head>  <body> <iframe class="vine-embed" src="https://vine.co/v/%1$s/embed/simple" width="%2$s" height="%3$s" frameborder="0" slm-video-size class="js-video-size"></iframe>  <script async src="//platform.vine.co/static/scripts/embed.js" charset=“utf-8"></script> </body>  </html> assets/view_item_vine.xml 1. Prepare assets/***.html

&NCFE8FC7JFXʢʣ String data = String.format(  AssetsUtil.loadAssetAsString(getContext(),   "embed/article_item_vine.html"),  videoId, width,
height);   webView.loadDataWithBaseURL(  "about:blank", data, "text/html", "UTF-8", null); 2. Load assets/**.html

ࠓ·Ͱͷ8FC໘ͱಉ͡ݟͨ໨ɺಉ͡ಈ࡞ ߴ͕͞෼͔Βͳ͍ͷͰΨλΨλ ݁ہ8FC7JFX࢒ΔͷͭΒ͍ &NCFE8FC7JFXʢʣ

)UNMGSPN)UNM ʢʣ textView.setText(  Html.fromHtml("<big>BigText</big>")); 1. fromHtml(String source) <BR>, <P>, <DIV>,
<B>, <EM>, <I>, <STRONG>, <CITE>, <DFN>, <BIG>, <SMALL>, <FONT>, <BLOCKQUOTE>, <TT>, <A>, <U>, <SUP>, <SUB>, <H1ʙH6>, <IMG> ɾAvailable Tags

)UNMGSPN)UNM ʢʣ 2. fromHtml(String source, Html.ImageGetter imageGetter,   Html.TagHandler tagHandler)
ɾHtml.TagHandler void handleTag (boolean opening, String tag, Editable output, XMLReader xmlReader); This method will be called when the HTML parser encounters a tag that it does not know how to interpret.

)UNM5BH)BOEMFSʢʣ @Override  public void handleTag(boolean opening, String tag,   Editable
output, XMLReader xmlReader) { if (tag.equals("span") { if (opening) { // process open tags } else { // process close tags } }

)UNM5BH)BOEMFSʢʣ // process open tags // get attributes HashMap<String, String>
attrs = getAttributes(xmlReader); // get class array String[] classes = attrs.get("class").split(" "); for (String clazz : classes) {  if (clazz.equals("td-weight")) { // process BOLD  } else if (clazz.equals("td-size")) { // process SIZE }  }

5FYU7JFXͰ࣮ݱՄೳ )5.-ΫϥεͰ͔ͳΓͷ΋ͷ͕දݱͰ͖ͦ͏ ͋Β͔͡Ί೺Ѳ͍ͯ͠Δ"UUJSJCVUFT͔͠ରԠͰ͖ ͳ͍ʢϦϦʔε͕ඞཁʣ )UNMGSPN)UNM ʢʣ

5IBOLT

How to convert custom HTML to native styled text

How to convert custom HTML to native styled text

Yuki Shiho

More Decks by Yuki Shiho

Other Decks in Programming

Featured

Transcript

)PXUPDPOWFSU DVTUPN)5.- UPOBUJWFTUZMFEUFYU ࢤำါل !TIJIPDIBO !TIJCVZBBQL

"CPVUNF ࢤำါلʢ͠΄Ώ͏͖ʣ !TIJIPDIBO !TIJIPDIBOEFTV

8FC7JFXUP/BUJWF

5FYU*UFN ɾTextColor (red) ɾBold ɾTextSize (big)

4FSWFS3FTQPOTF+TPO { type: "TEXT", itemId: 1468485519419, text: "ͦ͜ʹ͸ͳΜͱɺ<span class="td-color">ϏϤϯϏϤ ϯʹൽ͕ͨΔΜ͓ͩෲ</span>ͷࣸਅ͕ʂ<br><br>͜Ε

&NCFE8FC7JFX )UNMGSPN)UNM *NQMFNFOUBUJPO

&NCFE8FC7JFXʢʣ <!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">  <style>  * {

&NCFE8FC7JFXʢʣ String data = String.format(  AssetsUtil.loadAssetAsString(getContext(),   "embed/article_item_vine.html"),  videoId, width,

ࠓ·Ͱͷ8FC໘ͱಉ͡ݟͨ໨ɺಉ͡ಈ࡞ ߴ͕͞෼͔Βͳ͍ͷͰΨλΨλ ݁ہ8FC7JFX࢒ΔͷͭΒ͍ &NCFE8FC7JFXʢʣ

)UNMGSPN)UNM ʢʣ textView.setText(  Html.fromHtml("<big>BigText</big>")); 1. fromHtml(String source) <BR>, <P>, <DIV>,

)UNMGSPN)UNM ʢʣ 2. fromHtml(String source, Html.ImageGetter imageGetter,   Html.TagHandler tagHandler)

)UNM5BH)BOEMFSʢʣ @Override  public void handleTag(boolean opening, String tag,   Editable

)UNM5BH)BOEMFSʢʣ // process open tags // get attributes HashMap<String, String>

5FYU7JFXͰ࣮ݱՄೳ )5.-ΫϥεͰ͔ͳΓͷ΋ͷ͕දݱͰ͖ͦ͏ ͋Β͔͡Ί೺Ѳ͍ͯ͠Δ"UUJSJCVUFT͔͠ରԠͰ͖ ͳ͍ʢϦϦʔε͕ඞཁʣ )UNMGSPN)UNM ʢʣ

5IBOLT