2011年9月26日月曜日

TextView

画面上に文字列を表示するには、TextViewを使用します。
TextViewは、ラベルとして固定の文字列を表示したり、メッセージを表示するエリアとして使えます。


文字列を表示する

Androidプロジェクトの設定
プロジェクト名:TextViewTest1
ビルドターゲット:Android 2.1-update1
アプリケーション名:TextViewTest1
パッケージ名:jp.co.triware.samples.TextViewTest1
アクティビティーの作成:TextViewTest1
最小SDKバージョン:7
TextViewTest1.java
package jp.co.triware.samples.TextViewTest1;

import android.app.Activity;
import android.os.Bundle;

public class TextViewTest1 extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="ABCDEFGあいうえお"
        />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="ABCDEFGあいうえお(太字)"
        android:textStyle="bold"
        />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="ABCDEFGあいうえお(斜体)"
        android:textStyle="italic"
        />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="大きく表示"
        android:textSize="40sp"
        />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="小さく表示"
        android:textSize="10sp"
        />
    <TextView
        android:layout_width="120px"
        android:layout_height="wrap_content"
        android:text="black"
        android:textColor="@color/black"
        android:background="@color/white"
        android:gravity="center"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="gray"
        android:textColor="@color/gray"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="silver"
        android:textColor="@color/silver"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="white"
        android:textColor="@color/white"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="red"
        android:textColor="@color/red"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="yellow"
        android:textColor="@color/yellow"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="lime"
        android:textColor="@color/lime"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="aqua"
        android:textColor="@color/aqua"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="blue"
        android:textColor="@color/blue"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="fuchsia"
        android:textColor="@color/fuchsia"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="maroon"
        android:textColor="@color/maroon"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="olive"
        android:textColor="@color/olive"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="green"
        android:textColor="@color/green"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="teal"
        android:textColor="@color/teal"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="navy"
        android:textColor="@color/navy"
        android:background="@color/white"
        android:layout_gravity="right"
        />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="purple"
        android:textColor="@color/purple"
        />
</LinearLayout>
TextViewのプロパティを指定することで、位置や色の指定などができます。
プロパティ内容
android:text文字列
android:textSizeフォントサイズ
android:textStyleスタイル
android:textColor文字列の色
android:background背景の色
android:gravity文字列の位置
android:layout_gravityTextViewの位置
textSizeは、pxやspといった単位をつけて「20px」「20sp」のように指定します。
pxは「Pixels」、ピクセルです。物理的に何ピクセルかを指定します。
spは「Scale-independent Pixels」で、HVGAを基準としたときのピクセル数を指定します。240x320ピクセル用に作った画面を例えば480x640ピクセルのハードウェアで表示したときに、その画面にあった大きさで表示することができます。正確にいうと、ハードウェアの仕様によってはそうならない場合もありますが、詳細はまた別の機会にご紹介いたします。

textStyleは通常(normal)、斜体(italic)、太字(bold)を指定します。斜体や太字が用意されていないフォントは通常の表示になります。

textColorとbackgroundは色をRRGGBB形式で指定します。黒は#000000、白は#FFFFFFという形式で、HTMLでよく見かける書式ですね。アルファチャンネルも指定できて、その場合はAARRGGBB形式で指定します。AAの部分は00が透明、FFが不透明で、#88FF00FFのように記述します。
実際に色を指定する場合は、こういう数値を直接記述するより、数値に名前をつけておいて、それを記述するほうがわかりやすいですし間違いも少なくなります。色の名前を定義するファイルは、res/values/colors.xmlです。他のファイル名でも構いませんが、colors.xmlとするのが一般的です。

gravityは、TextViewの中で文字列をどこに表示するか指定します。layout_gravityはTextView自体をどこに配置するか指定します。位置の指定は以下の表のような値があります。「右下」のような場合は"bottom|right"のように組み合わせて指定します。
内容
top上寄せ
bottom下寄せ
left左寄せ
right右寄せ
center中央寄せ
center_vertical中央寄せ(縦方向)
center_horizontal中央寄せ(横方向)

colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#000000</color>
    <color name="gray">#808080</color>
    <color name="silver">#c0c0c0</color>
    <color name="white">#ffffff</color>
    <color name="red">#ff0000</color>
    <color name="yellow">#ffff00</color>
    <color name="lime">#00ff00</color>
    <color name="aqua">#00ffff</color>
    <color name="blue">#0000ff</color>
    <color name="fuchsia">#ff00ff</color>
    <color name="maroon">#800000</color>
    <color name="olive">#808000</color>
    <color name="green">#008000</color>
    <color name="teal">#008080</color>
    <color name="navy">#000080</color>
    <color name="purple">#800080</color>
</resources>

ここでは色の名前を記述しましたが、「ラベルの色」「エラーメッセージの色」というくくりにするのも良いでしょう。
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="label">#ffffff</color>
    <color name="error">#ff0000</color>
</resources>

実行結果
上から順番に見ていきましょう。

1行目は特に何も指定しないで表示しています。
2行目は太字指定ですが、アルファベットは太字になっていますが、日本語は通常と変わりません。エミュレータに入っているフォントは太字に対応していないようです。
3行目は斜体です。
4行目はサイズを大きく、5行目は小さくしてみました。
6行目以降は色の指定です。

"black"については、TextViewの幅を120ピクセルに設定した上で、背景色に白を指定、文字列を中央寄せするようにしています。
"navy"は、TextViewの幅を文字列の幅に合わせて、背景色に白を指定しています。またTextViewの配置を右寄せにしました。

0 件のコメント:

コメントを投稿