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

TextView



　当ブログ、最初に選んだテーマは android.widget.TextView クラス。

　TextView は文字通り「テキスト（文字列）を表示する為の道具」です。皆さんも android で一番最初にプログラムを組んだ際に、この TextView に「 Hello World !! 」などお約束の一言を表示させてみたのではないでしょうか。この定番の道具、だからこそなんとか使いこなし彩りあるアプリケーションを構築したいものです。



TextView の継承関係・・・

という継承関係になっています。



TextView のAPIリファレンス・・・

android.widget.TextView

から観ることが出来ます（ただし現在は英語表記のみです）



TextView にテキストを表示する



　大まかに２通りの方法があります。



１・レイアウトの XML で表示するテキストを定義する方法・・・

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, World !!"
    />

TextView タグの text 属性に指定するだけです。



２・ソースコード内で表示するテキストを定義する方法・・・



TextView textview ;
・・・・TextView のインスタンスを取得する・・・・
CharSequence text = "Hello, World!!" ;

textview.setText( text ) ;

TextView # setText() に表示したいテキストを引数として渡してやるだけです。




＊結果、どちらも同様に表示されます。

以降の説明は後者（ソースコード内で定義）の方法を前提として話を進めます。



TextView に画像を表示させる



　メニュー選択画面などを作るケースで、リスト形式で TextView を並べ表示したいといった場面もあるでしょう。そのときに、テキストだけの表示では何となく寂しい・・・、せめて画像か何かを付けられれば断然見た目は良くなります。ネットで情報を探索してみると ImageView と TextView を用いてレイアウトに詰め込む、といった実装方法が説明されているケースもあります。けれど、実は TextView のみでも簡単に装飾が可能です。



TextView # setCompoundDrawablesWithIntrinsicBounds(int left, int top, int right, int bottom)

を使います。

public class TextViewTest extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // TextView のインスタンスを作り、テキストを設定します。
        TextView textview = new TextView(this);
        textview.setText("Hello, World!!");
        
        // TextView に画像を組み入れます。
        textview.setCompoundDrawablesWithIntrinsicBounds(R.drawable.icon, 0, 0, 0);
        
        // 最後に Activity に TextView を組み入れます。
        setContentView(textview, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
    }
}

最初に TextView を作り、表示するテキストを設定します。次に TextView # setCompoundDrawablesWithIntrinsicBounds() で表示する画像を指し示すポインタを引数として渡します。第一引数が左、第二引数が上、第三引数が右、第四引数が下に画像を配置する場合記述する場所です。今回は画像を用意する手間を省くため Eclipse で新規プロジェクトを作成した時に最初から備わっている icon を利用します。R.drawable.icon がそれです。何も表示させない場所には引数として数値の「０」を渡します。最後に Activity に組み込んで終わりです。

　実はもう１つ画像を組み込む方法があります。先ほどの方法では画像のサイズは元の画像のままで表示されますがサイズを変更したい場合などには向きません。そういうケースで用いるのが・・・



TextView # setCompoundDrawables(Drawable left, Drawable top, Drawable right, Drawable bottom)

です。次にサンプルコードを示します。

public class TextViewTest extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        // 表示する画像を取得し、サイズを設定します。
        Drawable icon = getResources().getDrawable(R.drawable.icon);
        icon.setBounds(0, 0, icon.getIntrinsicWidth(), icon.getIntrinsicHeight());
        
        // TextView のインスタンスを作り、テキストを設定します。
        TextView textview = new TextView(this);
        textview.setText("Hello, World!!");
        
        // TextView に画像を組み入れます。
        textview.setCompoundDrawables(icon, null, null, null);
        
        // 最後に Activity に TextView を組み入れます。
        setContentView(textview, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
    }
}

まずは画像を取得します。このメソッドでは、画像を取得してもそのままでは表示されません。Drawable # setBounds() でサイズ指定をしましょう。Drawable # getIntrinsicWidth() は元々の画像の横幅、Drawable # getIntrinsicHeight() は縦幅の長さを取得するメソッドです。サイズを変更したい場合にはここの数値で調整します。次に TextView を作り、表示するテキストを設定します。続いてが問題の TextView # setCompoundDrawables() です。このメソッドの引数は、第一引数が左、第二引数が上、第三引数が右、第四引数が下に画像を配置する場合記述する場所です。何も表示させない位置には「null」を引数として渡します。最後に Activity に組み込んで終わりです。




＊上記の２つのコードはどちらも同じ表示になります。



その他の表示



　他にも装飾的な表示方法が沢山あります。例えば、文字にシャドウをかける事も可能ですし、フォントのサイズやスタイルももちろん変更可能です。すべてを書くのは時間的にも無理がありますので大変よくまとまっているこちらを参考にしてみて下さい。

UIコンポーネント/TextView - Android Wiki


次回は・・・

　次回も TextView の続きです。次回は「HTML編」です。といいますか当初の動機として、書こうと思ってたのはこちらの方だったりしますｗ