：Tips 　TextView を使いこなそう　〜 表示編 〜　 その２

TextView で多彩な表現を

　前回に引き続き TextView の表示の話をしていきたいと思います。



　TextView に「文字を表示する」「画像を添える」ことが可能なことは説明しました。しかし、TextView を扱っているうちにそれだけでは不満なケースが出てきます。

例えば・・・

　Nintendo®

などと表現したい場合はにどうすればいいのでしょうか。

その他、文中に数式を現すに場合などに上付き文字や下付き文字を利用したい、文中の一部の文字の色、大きさ、スタイルなどを変更したい、文にアンダーラインを引きたい、文中に画像を差し込みたい、クリック１つでWebサイトにリンクさせたい、など様々な要望が出てきます。

　その様な場合、通常 Android では android.text.style.〜Span といったものを用いてその都度引き渡すテキストに変更を加えていきます。しかし自由度はある反面、手続きは面倒ですし、何よりもコードから成形後の形を一目では想像し辛いという難点があります。

そこで、登場するのが android.text.Html というクラスです。

http://developer.android.com/reference/android/text/Html.html

android.text.Html を用いて TextView に多彩な表現を

　今回、この Html クラスで使用するメソッドは１つです。



public static Spanned fromHtml (String source)

public static Spanned fromHtml (String source, Html.ImageGetter imageGetter, Html.TagHandler tagHandler)

引数の数に違いはありますが使うメソッドは android.text.Html#fromHtml() のみです。

戻り値に android.text.Spanned とありますが、これは CharSequence インターフェイスを実装していますので TextView#setText() や TextView#append() の引数としてそのまま渡すことが出来ます。

第１引数として渡す文字列 source ですが、ここに「 HTML タグを埋め込んだテキスト」を渡すことで面倒な手続きを代行で処理してくれます。

fromHtml() で使えるタグは？

fromHtml() で利用可能なタグは下記の通りです。

使用可能なタグ <BR>, <P>, <DIV>, <B>, <EM>, <I>, <STRONG>, <CITE>, <DFN>, <BIG>, <SMALL>, <FONT>, <BLOCKQUOTE>, <TT>, <A>, <U>, <SUP>, <SUB>, <H1〜H6>, <IMG>

注！ <A> と <IMG> についてはそのままでは使えません。使用法は後ほど別途説明します。

又、使用可能な属性と表示結果は以下の通りです。

タグ 使用可能な属性 表示結果
<BR> なし 改行。
<P> なし 段落。
<DIV> なし <P>と同じ。
<B> なし 太字。
<EM> なし <B>と同じ。
<I> なし イタリック体で表示される。
<STRONG> なし <I>と同じ。 何故か結果はイタリック体。 恐らくコーディングミス。
<CITE> なし <I>と同じ。
<DFN> なし <I>と同じ。
<BIG> なし 相対的に文字サイズを大きくする。 android.text.Html では1.25倍で表示されるように設定されている。
<SMALL> なし 相対的に文字サイズを小さくする。 android.text.Html では0.8倍で表示されるように設定されている。
<FONT> COLOR
FACE 		フォントの設定。 注意点として SIZE 属性には対応していない。
<BLOCKQUOTE> なし 引用文指定。 タグで囲った部分の左端にラインが表示される。
<TT> なし 等幅フォントで表示。"monospace"が指定される。
<A> HREF リンク。 そのままではアンダーラインと文字列の色が変化するだけでリンクはされない。
<U> なし アンダーライン。 タグで囲った範囲の文字列下にラインが引かれる。
<SUP> なし テキストを上付き文字として表示。
<SUB> なし テキストを下付き文字として表示。
<H1〜H6> なし 見出し指定。 ６段階。
<IMG> SRC 画像表示。そのままでは指定された画像は表示されない。
替わりに com.android.internal.R.drawable.unknown_image が表示される。



<FONT> の COLOR 属性 FACE 属性で使用可能な値

・ COLOR 属性で定義済みの色

Black Grey Silver White Bule Navy Teal Green
Aqua Lime Yellow Fuchsia Olive Purple Maroon Red

注！　「 Grey 」は「 Gray 」の誤りだと思われます。今後修正されるでしょうが使用には注意してください。出来るだけ定義済みの色で指定をせず「 #RRGGBB 」を使う方が賢明です。



・ FACE 属性で使用可能な Font Family

"monospace", "serif", "sans-serif"



android.text.Html#fromHtml() の具体的な使い方

例として　「Nintendo®ã€ã€€ã‚’表示してみます。

public class TextViewTest extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // HTML タグ付き文字列の作成
        String html = "<font color=\"silver\"><b><big>Nintendo</big></b><sup><small>&reg;</small></sup></font>";
        // fromHtml() の引数にタグ付き文字列を渡す
        CharSequence source = Html.fromHtml(html);
        TextView textview = new TextView(this);
        // fromHtml() の戻り値を setText() に引数として渡し TextView に表示
        textview.setText(source);
        setContentView(textview, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
    }
}

最初にHTMLタグ付きの文字列（String)を作ります。<HTML> タグや <HEAD><BODY> タグは不要です。次に、それを Html#fromHtml() に引数として渡してあげます。fromHtml() は static メソッドですので直接呼び出します。戻り値は CharSequence 型ですので、そのまま TextView#setText() に引数として渡してあげます。

以上です。 驚くほど簡潔ですね。

結果はこうなります・・・


次に、様々なタグを使ってみます・・・


制限はありますが、これだけ出来れば通常の使用には十分でしょう。

<A> タグと <IMG> タグの使用法

・・・を書くつもりでしたが、表組みに結構な時間を食ってしまい・・・今回はここまでとします。



次回は・・・

そういうわけで、次は「 <A> タグと <IMG> タグの使用法 」をやります。