HTML形式で文字修飾する：Androidアプリケーション開発者のためのTips集（6）

Androidアプリ開発者のためのTips集。今回は一部だけ色を変える、太字にするといった“文字修飾”の方法や、文字列中に画像およびリンクを埋め込む方法を紹介する。

LINE

Hatena

Tips概要と動作検証環境



用途	便利
カテゴリ	画面部品
レベル	中級
動作確認環境	Android 2.3.1（GingerBread）エミュレータにて動作確認
備考	今回のTipsは上記環境で動作確認・検証を行っています

Tips 6：HTML形式で文字修飾する

　文字列をTextViewに表示する際に、一部だけ色を変える、太字にするといったような複雑な修飾を行いたいケースもあるだろう。そのような場合には、「Html」クラスを使用するとよい。

修飾済みテキストの生成

　android.text.HtmlクラスのfromHtml()メソッドを使用すると、HTML形式で記述した文字列から修飾済みテキストを生成できる。

例：修飾済みテキストの生成

    // 文字修飾のサンプル
    void spannedSample_1( TextView tView ){
        Spanned spanned = Html.fromHtml(
            "文字色<br>"
            + "<font color='#ff0000'>赤</font>"
            + "<font color='#888800'>黄</font>"
            + "<font color='#00ff00'>緑</font>"
            + "<font color='#008888'>青緑</font>"
            + "<font color='#0000ff'>青</font>"
            + "<font color='#880088'>紫</font><br>"
            + "<big>大きく</big><small>小さく</small>");
        tView.setText(spanned);
    }

画像1　文字修飾のサンプル

文字列中に画像を埋め込む

　fromHtml()メソッドでは、HTMLの全てのタグが有効なわけではないが、<IMG>タグは有効である。そのため、文字列中に画像を埋め込むことができる。

　<IMG>タグを使用するためには、表示する画像を読み込むための処理をあらかじめ記述しておく必要がある。

　具体的には、android.text.Html.ImageGetterインタフェースを実装して、fromHtml()メソッドにパラメータとして渡す。

例：文字列中に画像を埋め込む

    // 画像埋め込みのサンプル
    void spannedSample_2( TextView tView ){
        Spanned spanned = Html.fromHtml(
            "みなさん、あけまして<img src='sun'>おめでとうございます<img src='banzai'><br>"
            + "今年もよろしくお願いします<img src='star'><img src='droid'><img src='star'>", 
            mImageGetter, null );
        tView.setText(spanned);
    }
 
    // テキストに画像を埋め込むためのイメージゲッターの例
    Html.ImageGetter mImageGetter = new Html.ImageGetter() {
        public Drawable getDrawable(String source) {
 
            // source の値に応じて、drawable ディレクトリに
            // 配置した画像を選択する
            int resId = R.drawable.droid;
            if( "banzai".equals(source) ){
                resId = R.drawable.banzai;
            } else if( "sun".equals(source)){
                resId = R.drawable.sun;
            } else if( "star".equals( source ) ){
                resId = R.drawable.star;
            }
 
            // drawableリソースから画像を読み込んで40x40サイズで表示
            Drawable dr = getResources().getDrawable(resId);
            dr.setBounds(0, 0, 40, 40);
            return dr;
        }
    };

画像2　文字列中に画像を埋め込む

文字列中にHTMLリンクを埋め込む

　<IMG>タグと同じく、<A>タグも有効なので、文字列中にHTMLリンクを埋め込むことができる。

　埋め込んだHTMLリンクを実際に機能させるためには、TextViewにLinkMovementMethodを設定する必要がある。

　LinkMovementMethodのインスタンスは、staticメソッドを使用して取得したものをそのまま設定すればよい。

例：文字列中にHTMLリンクを埋め込む

    // HTMLリンク埋め込みのサンプル
    void spannedSample_3( TextView tView ){
        // TextView に LinkMoveMethod を設定する
        tView.setMovementMethod(
                android.text.method.LinkMovementMethod.getInstance());
 
        Spanned spanned = Html.fromHtml(
            "@IT MONOist へは<a href='//monoist.atmarkit.co.jp/'>コチラ</a>から");
        tView.setText(spanned);
    }