How to convert custom HTML to native styled text

How to convert custom HTML to native styled text

0ef9d512061aa068aafd47c3e3f13ce0?s=128

Yuki Shiho

July 23, 2016
Tweet

Transcript

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

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

  3. None
  4. 8FC7JFXUP/BUJWF

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

  6. 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>" }
  7. &NCFE8FC7JFX )UNMGSPN)UNM *NQMFNFOUBUJPO

  8. &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
  9. &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
  10.   ࠓ·Ͱͷ8FC໘ͱಉ͡ݟͨ໨ɺಉ͡ಈ࡞   ߴ͕͞෼͔Βͳ͍ͷͰΨλΨλ ݁ہ8FC7JFX࢒ΔͷͭΒ͍ &NCFE8FC7JFXʢʣ

  11. )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
  12. )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.
  13. )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 } }
  14. )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 }
 }
  15.   5FYU7JFXͰ࣮ݱՄೳ )5.-ΫϥεͰ͔ͳΓͷ΋ͷ͕දݱͰ͖ͦ͏   ͋Β͔͡Ί೺Ѳ͍ͯ͠Δ"UUJSJCVUFT͔͠ରԠͰ͖ ͳ͍ʢϦϦʔε͕ඞཁʣ )UNMGSPN)UNM ʢʣ

  16. 5IBOLT