スマホアプリの自習帳

タイマーの残り時間を表示する簡単なCustom View を作成し、既存のGUIコンポーネントと一緒にXMLのレイアウトに組み込む。

参照ページ

• Dev Guide > User Interface > Custom Components
  • http://developer.android.com/guide/topics/ui/custom-components.html
• Resources > samples > ApiDemos > view > LabelView
  • http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/LabelView.html

Custom View を実装

android.view.Viewを継承したクラスを作成し、onDraw(Canvas canvas) をオーバーライドして描画ロジックを実装するだけ。但し、XMLのレイアウトに組み込むには、さらに以下の２つの形式のコンストラクタも実装する必要がある。

public View (Context context)

public View (Context context, AttributeSet attrs)

Layoutに組み込む

このCustomViewをXMLのレイアウトに組み込むには、ただ、CustomViewのクラス名をフルパスで指定するだけでよい。

    <TextView
        android:id="@+id/textView1"
        android:layout_alignParentTop="true"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <stndstn.intervaltimer.TimerView
        android:id="@+id/timerview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
    />

これはLayout.xmlの一部で、上は通常のTextView、下が今回作成したCustomView。

クラス名をフルパスで設定する以外は、手でXMLのレイアウトを編集するときと同じ要領。

This entry was posted on 2012年3月3日 at 12:14 午後 and is filed under Android apps, Dev. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.