Spannable で文字のマークアップ

Spannable はテキストをマークアップするためのインターフェースです

CharacterStyleなどのクラスを使って文字列の一部を
下線を引いたり、下付き文字にしたり、
上付き文字にしたり、URLを付けたり...
と様々なことができます

CharacterStyle のサブクラスには

• UnderlineSpan
• SubscriptSpan
• SuperscriptSpan
• URLSpan
• ScaleXSpan
• RelativeSizeSpan
etc...

といろいろあります

というわけで, Spannable でテキストをいじってみた

サンプルプログラム

view plainprint?

1. import android.app.Activity;  
2. import android.os.Bundle;  
3. import android.text.Spannable;  
4. import android.text.Spannable.Factory;  
5. import android.text.style.RelativeSizeSpan;  
6. import android.text.style.ScaleXSpan;  
7. import android.text.style.SubscriptSpan;  
8. import android.text.style.SuperscriptSpan;  
9. import android.text.style.URLSpan;  
10. import android.text.style.UnderlineSpan;  
11. import android.view.View;  
12. import android.view.View.OnClickListener;  
13. import android.widget.TextView;  
14.   
15. public class SpannableTest extends Activity {  
16.   Spannable spannable;  
17.   
18.   UnderlineSpan underline;  
19.   SubscriptSpan subscript;  
20.   SuperscriptSpan superscript;  
21.   URLSpan url;  
22.   ScaleXSpan scaleX;  
23.   RelativeSizeSpan relative;  
24.   
25.   TextView textView[];  
26.   
27.   @Override  
28.   public void onCreate(Bundle savedInstanceState) {  
29.     super.onCreate(savedInstanceState);  
30.     setContentView(R.layout.spannabletest);  
31.   
32.     textView = new TextView[4];  
33.     for (int i = 0; i < 4; i++) {  
34.       textView[i] = (TextView) findViewById(R.id.TextView01 + i);  
35.     }  
36.   
37.     // UnderlineSpan  
38.     underline = new UnderlineSpan();  
39.     // SubscriptSpan  
40.     subscript = new SubscriptSpan();  
41.     // SuperscriptSpan  
42.     superscript = new SuperscriptSpan();  
43.     // URLSpan  
44.     url = new URLSpan("http://weide-dev.blogspot.com/");  
45.     // ScaleXSpan  
46.     scaleX = new ScaleXSpan(0.5f);  
47.     // RelativeSizeSpan  
48.     relative = new RelativeSizeSpan(0.5f);  
49.   
50.     // Factory の取得  
51.     Factory factory = Spannable.Factory.getInstance();  
52.   
53.     /* アンダーラインが引かれた文字列 */  
54.     // Spannable の取得  
55.     spannable = factory.newSpannable(textView[0].getText());  
56.     // 0からテキストの長さ分まで下線を引く  
57.     spannable.setSpan(  
58.         underline,  
59.         0,  
60.         textView[0].getText().length(),  
61.         spannable.getSpanFlags(underline)  
62.     );  
63.     // TextView にテキストを設定  
64.     textView[0].setText(spannable, TextView.BufferType.SPANNABLE);  
65.   
66.     /* 後ろ4文字が下付きの文字列 */  
67.     spannable = factory.newSpannable(textView[1].getText());  
68.     // 後ろ4文字を下付き文字にする  
69.     spannable.setSpan(  
70.         subscript,  
71.         textView[1].getText().length() - 4,  
72.         textView[1].getText().length(),  
73.         spannable.getSpanFlags(subscript)  
74.     );  
75.     // 後ろ4文字のXのスケールを0.5倍する  
76.     spannable.setSpan(  
77.         scaleX,  
78.         textView[1].getText().length() - 4,  
79.         textView[1].getText().length(),  
80.         spannable.getSpanFlags(scaleX)  
81.     );  
82.     textView[1].setText(spannable, TextView.BufferType.SPANNABLE);  
83.   
84.     /* 後ろ4文字が上付きの文字列 */  
85.     spannable = factory.newSpannable(textView[2].getText());  
86.     // 後ろ4文字を上付き文字にする  
87.     spannable.setSpan(  
88.         superscript,  
89.         textView[2].getText().length() - 4,  
90.         textView[2].getText().length(),  
91.         spannable.getSpanFlags(superscript)  
92.     );  
93.     // 後ろ4文字のサイズを0.5倍する  
94.     spannable.setSpan(  
95.         relative,  
96.         textView[2].getText().length() - 4,  
97.         textView[2].getText().length(),  
98.         spannable.getSpanFlags(relative)  
99.     );  
100.     textView[2].setText(spannable, TextView.BufferType.SPANNABLE);  
101.   
102.     /* URL文字列 */  
103.     spannable = factory.newSpannable(textView[3].getText());  
104.     // 0からテキストの長さ分までURLタイプにする  
105.     spannable.setSpan(  
106.         url,  
107.         0,  
108.         textView[3].getText().length(),  
109.         spannable.getSpanFlags(url)  
110.     );  
111.     textView[3].setText(spannable, TextView.BufferType.SPANNABLE);  
112.     textView[3].setOnClickListener(new OnClickListener() {  
113.       public void onClick(View v) {  
114.         // URLを開く  
115.         url.onClick(textView[3]);  
116.       }  
117.     });  
118.   }  
119. }  

import android.app.Activity;
import android.os.Bundle;
import android.text.Spannable;
import android.text.Spannable.Factory;
import android.text.style.RelativeSizeSpan;
import android.text.style.ScaleXSpan;
import android.text.style.SubscriptSpan;
import android.text.style.SuperscriptSpan;
import android.text.style.URLSpan;
import android.text.style.UnderlineSpan;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class SpannableTest extends Activity {
  Spannable spannable;

  UnderlineSpan underline;
  SubscriptSpan subscript;
  SuperscriptSpan superscript;
  URLSpan url;
  ScaleXSpan scaleX;
  RelativeSizeSpan relative;

  TextView textView[];

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.spannabletest);

    textView = new TextView[4];
    for (int i = 0; i < 4; i++) {
      textView[i] = (TextView) findViewById(R.id.TextView01 + i);
    }

    // UnderlineSpan
    underline = new UnderlineSpan();
    // SubscriptSpan
    subscript = new SubscriptSpan();
    // SuperscriptSpan
    superscript = new SuperscriptSpan();
    // URLSpan
    url = new URLSpan("http://weide-dev.blogspot.com/");
    // ScaleXSpan
    scaleX = new ScaleXSpan(0.5f);
    // RelativeSizeSpan
    relative = new RelativeSizeSpan(0.5f);

    // Factory の取得
    Factory factory = Spannable.Factory.getInstance();

    /* アンダーラインが引かれた文字列 */
    // Spannable の取得
    spannable = factory.newSpannable(textView[0].getText());
    // 0からテキストの長さ分まで下線を引く
    spannable.setSpan(
        underline,
        0,
        textView[0].getText().length(),
        spannable.getSpanFlags(underline)
    );
    // TextView にテキストを設定
    textView[0].setText(spannable, TextView.BufferType.SPANNABLE);

    /* 後ろ4文字が下付きの文字列 */
    spannable = factory.newSpannable(textView[1].getText());
    // 後ろ4文字を下付き文字にする
    spannable.setSpan(
        subscript,
        textView[1].getText().length() - 4,
        textView[1].getText().length(),
        spannable.getSpanFlags(subscript)
    );
    // 後ろ4文字のXのスケールを0.5倍する
    spannable.setSpan(
        scaleX,
        textView[1].getText().length() - 4,
        textView[1].getText().length(),
        spannable.getSpanFlags(scaleX)
    );
    textView[1].setText(spannable, TextView.BufferType.SPANNABLE);

    /* 後ろ4文字が上付きの文字列 */
    spannable = factory.newSpannable(textView[2].getText());
    // 後ろ4文字を上付き文字にする
    spannable.setSpan(
        superscript,
        textView[2].getText().length() - 4,
        textView[2].getText().length(),
        spannable.getSpanFlags(superscript)
    );
    // 後ろ4文字のサイズを0.5倍する
    spannable.setSpan(
        relative,
        textView[2].getText().length() - 4,
        textView[2].getText().length(),
        spannable.getSpanFlags(relative)
    );
    textView[2].setText(spannable, TextView.BufferType.SPANNABLE);

    /* URL文字列 */
    spannable = factory.newSpannable(textView[3].getText());
    // 0からテキストの長さ分までURLタイプにする
    spannable.setSpan(
        url,
        0,
        textView[3].getText().length(),
        spannable.getSpanFlags(url)
    );
    textView[3].setText(spannable, TextView.BufferType.SPANNABLE);
    textView[3].setOnClickListener(new OnClickListener() {
      public void onClick(View v) {
        // URLを開く
        url.onClick(textView[3]);
      }
    });
  }
}

プログラムを実行すると...

こんな感じ!


参考サイト
http://developer.android.com/intl/ja/reference/android/text/Spannable.html
http://developer.android.com/intl/ja/reference/android/text/style/CharacterStyle.html