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

様々な SPAN を用い TextView に「より多彩」な表現を　〜後編〜

　「 TextView を使いこなそう　〜 表示編 〜」　その4 に引き続き TextView の5回目です。

今回は・・・

　前回は SPAN を用いた文字のサイズ変更（相対値、絶対値）やテキストの水平位置（右寄せ、中央寄せ、左寄せ）の変更について見てきました。今回は、前回やり残した３つの SPAN クラスについて書いていこうと思います。

SPAN	用途
android.text.style.BackgroundColorSpan	背景色を設定します。
android.text.style.MaskFilterSpan	文字にブラー（ぼかし）効果やエンボス（浮き出し）効果等を設定します。
android.text.style.ScaleXSpan	横に文字を伸縮させる設定をします。

上記３つです。

BackgroundColorSpan

android.text.style.BackgroundColorSpan は、読んで字の如く範囲指定されたテキストの「背景色」を変更する SPAN です。当然ですが、文字の色と背景色を同じ色に指定すれば文字は見えなくなります。それを逆に利用し「穴埋め問題」のようなスタイルを作る場合などに利用してみると面白いかもしれませんね。

次に BackgroundColorSpan のコンストラクタを示します。

public BackgroundColorSpan (int color) 

引数には int 型の整数を指定します。通常は１６進数表記の「 0xAARRGGBB 」で表記するか android.graphics.Color クラスの定数を用いることになると思います。使い方は前回説明した各 SPAN と同様です。例えば、背景色を「青」にしたい場合には・・・

BackgroundColorSpan span = new BackgroundeColorSpan( 0xFF0000FF );

としてインスタンスを生成します。以下でも同様です・・・

BackgroundColorSpan span = new BackgroundeColorSpan( Color.BLUE );

次に、生成したインスタンスを setSpan() メソッドの引数として渡します。

SpannableString spannable = new SpannableString("指定した範囲の背景色が変更されます。");
spannable.setSpan(span, 7, 10, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

上記の例ですと、テキスト「背景色」の背景色が「青」に設定されます。

サンプルコードです。

public class TextViewTest extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        TextView tv = new TextView(this);
        SpannableString spannable = new SpannableString("指定した範囲の背景色が変更されます。");
        
        // 背景色を「青」に設定。
        BackgroundColorSpan span = new BackgroundeColorSpan( 0xFF0000FF );
        
        // SPAN を SpannableString に組み込む。
        spannable.setSpan(span, 7, 10, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        
        tv.setText(spannable);
        setContentView(tv, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    }
}

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

以上です。

MaskFilterSpan

android.text.style.MaskFilterSpan は、テキストに対し「エフェクト効果」を与える SPAN です。具体的には「ブラー（ぼかし）」や「エンボス（浮き出し）」などの視覚効果が使えます。

次に MaskFilterSpan のコンストラクタを示します。

public MaskFilterSpan (MaskFilter filter) 

引数には android.graphics.MaskFilter のインスタンスを渡します。実際には MaskFilter を継承したクラスのインスタンスを渡すことになります。ぼかし効果が欲しいときにはぼかし用のフィルタ・クラスのインスタンスを、浮き出し効果が欲しいときには浮き出し用のフィルタ・クラスのインスタンスをコンストラクタの引数に渡すことで様々な視覚効果を生み出せる仕組みになっています。

具体的には・・・

• android.graphics.BlurMaskFilter
• android.graphics.EmbossMaskFilter

この２つが現在のところ用意されている「視覚効果」用のクラスです。

BlurMaskFilter を使ってブラー（ぼかし）効果を出す・・・

まずは BlurMaskFilter のコンストラクタから見ていきます。

public BlurMaskFilter (float radius, BlurMaskFilter.Blur style) 

第１引数の radius は、ぼかし効果の掛かり具合を調整する値です。0.0以上の float 型の数値でなければなりません。数値が高ければそれだけ効果が強くなります。第２引数の style は、BlurMaskFilter.Blur クラスにある４つの定数の内、１つを選んで渡します。

BlurMaskFilter.Blur クラスの定数は以下の4種類です。

public static final BlurMaskFilter.Blur INNER 
public static final BlurMaskFilter.Blur NORMAL
public static final BlurMaskFilter.Blur OUTER
public static final BlurMaskFilter.Blur SOLID

具体的にどの定数によってどの様な働きをするのかは説明するより実際に動かし、表示してみた方が分かり易いでしょう。

早速ですが、サンプルコードです。

public class TextViewTest extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        TextView tv = new TextView(this);
        tv.setTextSize(40.0f);
        
        // 各定数のフィルタインスタンスを作成。
        BlurMaskFilter filter1 = new BlurMaskFilter(3.0f, BlurMaskFilter.Blur.INNER);
        BlurMaskFilter filter2 = new BlurMaskFilter(3.0f, BlurMaskFilter.Blur.NORMAL);
        BlurMaskFilter filter3 = new BlurMaskFilter(3.0f, BlurMaskFilter.Blur.OUTER);
        BlurMaskFilter filter4 = new BlurMaskFilter(3.0f, BlurMaskFilter.Blur.SOLID);
        
        // 各フィルタインスタンスを引数として SPAN を作成。
        MaskFilterSpan span1 = new MaskFilterSpan(filter1);
        MaskFilterSpan span2 = new MaskFilterSpan(filter2);
        MaskFilterSpan span3 = new MaskFilterSpan(filter3);
        MaskFilterSpan span4 = new MaskFilterSpan(filter4);
        
        // フィルタを掛ける対象のテキストを作成。
        SpannableString spannable1 = new SpannableString("INNER");
        SpannableString spannable2 = new SpannableString("NORMAL");
        SpannableString spannable3 = new SpannableString("OUTER");
        SpannableString spannable4 = new SpannableString("SOLID");
        
        // テキストに SPAN を組み込む。
        spannable1.setSpan(span1, 0, spannable1.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        spannable2.setSpan(span2, 0, spannable2.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        spannable3.setSpan(span3, 0, spannable3.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        spannable4.setSpan(span4, 0, spannable4.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        
        // 全体を連結する為の SpannableStringBuilder を作成。
        SpannableStringBuilder spannable = new SpannableStringBuilder();
        
        // 全てを連結する。
        spannable.append(spannable1);
        spannable.append("\n");
        spannable.append(spannable2);
        spannable.append("\n");
        spannable.append(spannable3);
        spannable.append("\n");
        spannable.append(spannable4);
        
        tv.setText(spannable);
        setContentView(tv, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    }
}

今回は視覚効果が分かりやすくなるよう TextView のテキストサイズを大きめに設定しています。まず、ぼかし用フィルタクラスを定数分だけインスタンスを作成し、それを引数とした SPAN インスタンスをそれぞれ作成します。視覚効果を掛けるテキストも準備しそれぞれに SPAN を組み込んでいきます。今回のように字数が増えると、それだけ SPAN の開始位置、終了位置が把握し辛くなるので最初はバラバラに SPAN を組み込んでしまってから、それを最後に連結するという方法をとりました。

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

EmbossMaskFilter を使ってエンボス（浮き出し）効果を出す・・・

まずは EmbossMaskFilter のコンストラクタから見ていきます。

public EmbossMaskFilter (float[] direction, float ambient, float specular, float blurRadius) 

第１引数の direction は「光源」の位置を指定するもので float 型の配列になっています。配列にはX軸、Y軸、Z軸の３つの数値を設定するようなのですが、私はこの手の事はさっぱりなので正確には説明することはできません。スミマセン。ただ使ってみた感触では、テキストに相対して光源を右に動かす場合は direction[0] の値を 0.0f からマイナスに振り、左に動かす場合はプラスに振れば良さそうです。上に動かす場合は direction[1] の値をプラス、下に動かす場合はマイナス、手前に動かす場合は direction[2] をプラス、奥に動かす場合にはマイナス、という感じかな、と思いました。第２引数の ambient は取り得る値は 0.0f〜1.0f の間です。恐らく「環境光」というものだと思います。第３引数の specular は「明暗」の強弱。第４引数の blurRaidus は「ぼかし」の具合を調整する値だと思われます。ま、詳しいことは分からずとも適当に数値をいじっていればそのうちに何とかなる、かもしれません（汗

サンプルのソースコードです。

public class TestViewTest extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        TextView tv = new TextView(this);
        tv.setTextSize(90.0f);
        
        // 光源（x, y, z）の設定値。
        float[] direction = { 2.0f, 2.0f, 2.0f };
        
        // 環境光の設定値。
        float ambient = 0.5f;
        
        // 明暗の設定値。
        float specular = 9.0f;
        
        // ぼかしの設定値。
        float blurRadius = 3.0f;
        
        // エンボス（浮き出し）フィルタのインスタンスを作成。
        EmbossMaskFilter filter = new EmbossMaskFilter(direction, ambient, specular, blurRadius);
        
        // SPAN の作成。
        MaskFilterSpan span = new MaskFilterSpan(filter);
        
        // エンボスを掛けるテキストを用意。
        SpannableString spannable = new SpannableString("Emboss");
        
        // テキストに SPAN を挿入。
        spannable.setSpan(span, 0, spannable.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        
        tv.setText(spannable);
        setContentView(tv, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    }
}

今回も効果が分かりやすいようにテキストサイズを（相当）大きめに設定しました。まず最初に各設定値を準備します（かなり適当です）。次に EmbossMaskFilter のインスタンスを先ほどの各設定値を用いて作ります。そのインスタンスを MaskFilterSpan の引数として渡すことで初期化し SPAN のインスタンスを作ります。最後に、エンボス効果を掛けるテキストに SPAN を組み込み終了です。,

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

以上です。

ScaleXSpan

android.text.style.ScaleXSpan は、文字の横幅を伸縮させる為の SPAN です。

まずはコンストラクタから見ていきます。

public ScaleXSpan (float proportion) 

引数 proportion は通常の文字の横幅から何倍にするかを設定する値です。倍なら 2.0f 半分なら 0.5f という風に設定し値を渡します。特に変わったところはありません。

サンプルコードです。

public class TextViewTest extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        TextView tv = new TextView(this);
        
        // 横に２倍引き伸ばす SPAN を作成します。
        ScaleXSpan span1 = new ScaleXSpan(2.0f);
        
        // 引き伸ばすテキストを用意します。
        SpannableString spannable1 = new SpannableString("伸ばしたり");
        
        // SPAN をテキストに組み入れます。
        spannable1.setSpan(span1, 0, spannable1.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        
        // 横に半分縮める SPAN を作成します。
        ScaleXSpan span2 = new ScaleXSpan(0.5f);
        
        // 縮めるテキストを用意します。
        SpannableString spannable2 = new SpannableString("縮めたり");
        
        // SPAN をテキストに組み入れます。
        spannable2.setSpan(span2, 0, spannable2.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        
        // 全てまとめるために SpannableStringBuilder を作成します。
        SpannableStringBuilder spannable = new SpannableStringBuilder();
        
        // 通常のテキスト、引き伸ばしたテキスト、縮めたテキストをひとつにまとめます。
        spannable.append("文字を");
        spannable.append(spannable1);
        spannable.append(spannable2);
        spannable.append("できます。");
        
        tv.setText(spannable);
        setContentView(tv, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    }
}

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

以上です。

次回は・・・

次回は未定です。もしかすると TextView のアニメーションについて書くかもしれません。