Android は、基本的なレイアウト クラス View
と ViewGroup
に基づいて、UI を作成するための高度で強力なコンポーネント化されたモデルを提供します。このプラットフォームには、事前ビルド済みのさまざまな View
サブクラスと ViewGroup
サブクラス(それぞれウィジェットとレイアウトと呼ばれます)が用意されており、UI の作成に使用できます。
利用可能なウィジェットとしては、Button
、TextView
、EditText
、ListView
、CheckBox
、RadioButton
、Gallery
、Spinner
などがあり、特別な用途を持つ AutoCompleteTextView
、ImageSwitcher
、TextSwitcher
などもあります。
使用可能なレイアウトには、LinearLayout
、FrameLayout
、RelativeLayout
などがあります。その他の例については、一般的なレイアウトをご覧ください。
ビルド済みのウィジェットやレイアウトがニーズに合わない場合は、独自の View
サブクラスを作成できます。既存のウィジェットやレイアウトをわずかに調整するだけでよい場合は、ウィジェットまたはレイアウトをサブクラス化して、そのメソッドをオーバーライドできます。
独自の View
サブクラスを作成すると、画面要素の外観と機能を細かく制御できます。カスタムビューを使用すると、どのようなことができるか、いくつか例を示します。
-
完全にカスタム レンダリングされた
View
タイプを作成できます。たとえば、2D グラフィックを使用してレンダリングされ、アナログ電子制御装置に似た「音量コントロール」ノブを作成できます。 -
View
コンポーネントのグループを 1 つのコンポーネントにまとめると、コンボボックス(ポップアップ リストと自由入力テキスト フィールドの組み合わせ)、デュアルペイン セレクタ コントロール(左右のペインにリストが表示され、どのアイテムをどのリストに含めるかを再割り当てできる)などを作成できます。 -
EditText
コンポーネントの画面上のレンダリング方法をオーバーライドできます。サンプルアプリの NotePad では、この機能を使って、枠線付きのメモ帳のページを作成しています。 - キーの押下などの他のイベントをキャプチャし、ゲームなどのカスタム方法で処理できます。
以降のセクションでは、カスタムビューを作成して、アプリケーションで使用する方法について説明します。詳細については、View
クラスをご覧ください。
基本的なアプローチ
ここでは、独自の View
コンポーネントを作成するために知っておくべきことの概要を示します。
-
既存の
View
クラスまたはサブクラスを独自のクラスで拡張します。 -
スーパークラスの一部のメソッドをオーバーライドします。オーバーライドするスーパークラスのメソッドは
on
で始まります(例:onDraw()
、onMeasure()
、onKeyDown()
)。これは、ライフサイクルやその他の機能フックでオーバーライドするActivity
またはListActivity
のon
イベントに似ています。 - 新しい拡張クラスを使用します。完了したら、ベースとなったビューの代わりに新しい拡張機能クラスを使用できます。
完全にカスタマイズされたコンポーネント
必要に応じて完全にカスタマイズされたグラフィカル コンポーネントを作成できます。たとえば、古いアナログ ゲージのようなグラフィックの VU メーターや、カラオケマシンのそばで歌っているときに単語に合わせて弾むボールが動くテキストビューなどです。どのように組み合わせても、組み込みコンポーネントでは実現できない処理が必要になる場合があります。
幸いなことに、想像力、画面のサイズ、利用可能な処理能力によってのみ、制限された外観と動作のコンポーネントを作成できます。ただし、アプリケーションはデスクトップ ワークステーションよりも大幅に低い電力で動作しなければならない場合があることに留意してください。
完全にカスタマイズされたコンポーネントを作成するには、次の点を考慮してください。
-
拡張できる最も汎用的なビューは
View
です。通常は、これを拡張して新しいスーパー コンポーネントを作成することから始めます。 - XML から属性とパラメータを取得できるコンストラクタを用意できます。また、VU メーターの色と範囲、針の幅と減衰など、独自の属性とパラメータを使用できます。
- 独自のイベント リスナー、プロパティ アクセサ、修飾子を作成し、コンポーネント クラスでより高度な動作を作成することをおすすめします。
-
ほとんどの場合、
onMeasure()
をオーバーライドする必要があります。また、コンポーネントに何かを表示させる場合は、onDraw()
もオーバーライドする必要があります。どちらもデフォルトの動作ですが、デフォルトのonDraw()
では何も行われず、デフォルトのonMeasure()
では常に 100x100 のサイズが設定されますが、これはおそらく望ましいことではありません。 -
必要に応じて、他の
on
メソッドをオーバーライドすることもできます。
onDraw() と onMeasure() を拡張する
onDraw()
メソッドが提供する Canvas
には、2D グラフィック、その他の標準コンポーネントまたはカスタム コンポーネント、スタイル付きテキストなど、必要なあらゆる要素を実装できます。
onMeasure()
の場合はもう少し複雑です。onMeasure()
は、コンポーネントとそのコンテナ間のレンダリング コントラクトの重要な要素です。含まれているパーツの測定値を効率的かつ正確にレポートするには、onMeasure()
をオーバーライドする必要があります。これは、親からの制限要件(onMeasure()
メソッドに渡される)と、測定された幅と高さが計算されたら setMeasuredDimension()
メソッドを呼び出すという要件によって、やや複雑になります。オーバーライドされた onMeasure()
メソッドからこのメソッドを呼び出すと、測定時に例外が発生します。
大まかに言うと、onMeasure()
の実装は次のようになります。
-
オーバーライドされた
onMeasure()
メソッドは、幅と高さの指定で呼び出されます。指定は、生成する幅と高さの測定値の制限の要件として扱われます。widthMeasureSpec
パラメータとheightMeasureSpec
パラメータは、どちらもディメンションを表す整数コードです。これらの仕様に必要な制限の種類については、View.onMeasure(int, int)
のリファレンス ドキュメントをご覧ください。このリファレンス ドキュメントでは、測定操作全体も説明されています。 -
コンポーネントの
onMeasure()
メソッドは、コンポーネントのレンダリングに必要な幅と高さの測定値を計算します。渡された仕様の範囲内に収まるようにする必要がありますが、上回る場合もあります。この場合、親は、切り取る、スクロールする、例外をスローする、(おそらくは測定仕様を変えて)onMeasure()
に再試行するよう求めるといった処理方法を選択できます。 -
幅と高さを計算したら、計算された測定値を使用して
setMeasuredDimension(int width, int height)
メソッドを呼び出します。これを行わないと、例外が発生します。
フレームワークがビューに対して呼び出すその他の標準メソッドの概要は次のとおりです。
カテゴリ | メソッド | 説明 |
---|---|---|
作成 | コンストラクタ | ビューがコードから作成されるときに呼び出される形式のコンストラクタと、ビューがレイアウト ファイルからインフレートされたときに呼び出されるフォームがあります。2 つ目の形式は、レイアウト ファイルで定義されている属性を解析して適用します。 |
|
ビューとそのすべての子が XML からインフレートされた後に呼び出されます。 | |
レイアウト |
|
このビューとそのすべての子のサイズ要件を指定するために呼び出されます。 |
|
このビューがそのすべての子にサイズと位置を割り当てる必要がある場合に呼び出されます。 | |
|
このビューのサイズが変更されたときに呼び出されます。 | |
図面 |
|
ビューがそのコンテンツをレンダリングする必要がある場合に呼び出されます。 |
イベント処理 |
|
キーダウン イベントの発生時に呼び出されます。 |
|
キーアップ イベントの発生時に呼び出されます。 | |
|
トラックボールのモーション イベントが発生したときに呼び出されます。 | |
|
タッチスクリーンのモーション イベントが発生したときに呼び出されます。 | |
フォーカス |
|
ビューがフォーカスを取得したとき、またはフォーカスを喪失したときに呼び出されます。 |
|
ビューを含むウィンドウがフォーカスを取得または失ったときに呼び出されます。 | |
アタッチ |
|
ビューがウィンドウにアタッチされたときに呼び出されます。 |
|
ビューがウィンドウからデタッチされたときに呼び出されます。 | |
|
ビューを含むウィンドウの表示状態が変更されたときに呼び出されます。 |
複合コントロール
完全にカスタマイズされたコンポーネントを作成するのではなく、既存のコントロールのグループで構成される再利用可能なコンポーネントをまとめて配置する場合は、複合コンポーネント(または複合コントロール)を作成することをおすすめします。つまり、よりアトミックな複数のコントロールやビューが、1 つのアイテムとして扱えるアイテムの論理グループにまとめられています。
たとえば、コンボボックスは、単一行の EditText
フィールドと、隣接するボタンとポップアップ リストが添付された状態の組み合わせです。ユーザーがボタンをタップしてリストから項目を選択すると、EditText
フィールドに値が入力されますが、必要に応じて EditText
に直接入力することもできます。
Android では、これを簡単に行うことができるビューが他に Spinner
と AutoCompleteTextView
あります。いずれにせよ、コンボ ボックスのこのコンセプトは良い例です。
複合コンポーネントを作成する手順は次のとおりです。
-
Activity
と同様に、宣言型(XML ベース)のアプローチを使用して、含まれるコンポーネントを作成するか、コードからプログラムでコンポーネントをネストします。通常の開始点はなんらかのLayout
であるため、Layout
を拡張するクラスを作成します。コンボボックスの場合は、横向きのLinearLayout
を使用できます。他のレイアウトを内部にネストできるため、複合コンポーネントを任意の複雑に構造化できます。 -
新しいクラスのコンストラクタで、スーパークラスが想定しているパラメータを受け取り、それをまずスーパークラスのコンストラクタに渡します。次に、新しいコンポーネント内で使用する他のビューを設定します。ここで、
EditText
フィールドとポップアップ リストを作成します。コンストラクタが pull して使用できる独自の属性とパラメータを XML に導入することもできます。 -
必要に応じて、含まれるビューが生成する可能性のあるイベントのリスナーを作成します。たとえば、リストアイテムのクリック リスナーが、リストが選択されたときに
EditText
のコンテンツを更新するリスナー メソッドがあります。 -
必要に応じて、アクセサと修飾子を使用して独自のプロパティを作成します。たとえば、コンポーネントで最初に
EditText
値を設定し、必要に応じてそのコンテンツをクエリします。 -
必要に応じて、
onDraw()
とonMeasure()
をオーバーライドします。Layout
を拡張する場合、レイアウトにはデフォルトの動作があり、問題なく動作する可能性があるため、通常、この操作を行う必要はありません。 -
必要に応じて、
onKeyDown()
などの他のon
メソッドをオーバーライドします。たとえば、特定のキーがタップされたときに、コンボボックスのポップアップ リストから特定のデフォルト値を選択します。
Layout
をカスタム コントロールのベースとして使用することには、次のような利点があります。
- アクティビティ画面と同様に、宣言型 XML ファイルを使用してレイアウトを指定することも、コードからプログラムでビューを作成してレイアウト内にネストすることもできます。
-
onDraw()
メソッドとonMeasure()
メソッド、および他のほとんどのon
メソッドには適切な動作があるため、これらをオーバーライドする必要はありません。 - 任意の複雑な複合ビューをすばやく作成して、単一のコンポーネントであるかのように再利用できます。
既存のビュータイプを変更する
必要とするものと似たコンポーネントがある場合は、そのコンポーネントを拡張して、変更する動作をオーバーライドできます。完全にカスタマイズしたコンポーネントでも、すべての作業を行うことができますが、View
階層のより特化されたクラスから開始することで、必要な処理を無料で行うことができます。
たとえば、NotePad サンプルアプリでは、Android プラットフォームの使用方法をさまざまな角度から確認できます。そのうちの 1 つは、EditText
ビューを拡張して、枠線付きのメモ帳を作成することです。これは完全な例ではなく、そのための API は変更される可能性がありますが、この原則はあくまでも一例です。
まだの場合は、NotePad サンプルを Android Studio にインポートするか、提供されたリンクを使用してソースを確認します。特に、NoteEditor.java
ファイル内の LinedEditText
の定義をご覧ください。
このファイルの主なポイントは以下のとおりです。
-
定義
クラスは次の行で定義されます。
public static class LinedEditText extends EditText
LinedEditText
は、NoteEditor
アクティビティ内で内部クラスとして定義されていますが、NoteEditor
クラスの外部からNoteEditor.LinedEditText
としてアクセスできるよう公開されています。また、
LinedEditText
はstatic
です。つまり、親クラスのデータへのアクセスを許可するいわゆる「合成メソッド」は生成しません。つまり、NoteEditor
との関連性が強いものではなく、別のクラスとして動作します。これにより、外部クラスから状態にアクセスする必要がない内部クラスをより簡潔に作成できます。生成されるクラスを小さくして、他のクラスから簡単に使用できます。LinedEditText
はEditText
(この場合はカスタマイズするビュー)を拡張します。完了すると、新しいクラスは通常のEditText
ビューに置き換えることができます。 -
クラスの初期化
通常どおり、先にスーパークラスを呼び出します。これはデフォルトのコンストラクタではありませんが、パラメータ化されたコンストラクタです。
EditText
は、XML レイアウト ファイルからインフレートするときにこれらのパラメータで作成されます。したがって、コンストラクタもそれらを取得してスーパークラスのコンストラクタに渡す必要があります。 -
オーバーライドされたメソッド
この例では
onDraw()
メソッドのみをオーバーライドしていますが、独自のカスタム コンポーネントを作成するときに、他のメソッドをオーバーライドする必要がある場合があります。このサンプルでは、
onDraw()
メソッドをオーバーライドすることで、EditText
ビュー キャンバスに青い線を描画できます。キャンバスは、オーバーライドされたonDraw()
メソッドに渡されます。super.onDraw()
メソッドは、メソッドが終了する前に呼び出されます。スーパークラス メソッドを呼び出す必要があります。この場合は、含めたい線を描画した後、最後に関数を呼び出します。 -
カスタム コンポーネント
これでカスタム コンポーネントが用意できました。では、どのように使用すればよいでしょうか。NotePad の例では、カスタム コンポーネントは宣言型レイアウトから直接使用されるため、
res/layout
フォルダのnote_editor.xml
を確認してください。<view xmlns:android="http://schemas.android.com/apk/res/android" class="com.example.android.notepad.NoteEditor$LinedEditText" android:id="@+id/note" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/transparent" android:padding="5dp" android:scrollbars="vertical" android:fadingEdge="vertical" android:gravity="top" android:textSize="22sp" android:capitalize="sentences" />
カスタム コンポーネントは XML で汎用ビューとして作成され、クラスは完全なパッケージを使用して指定されます。定義する内部クラスは、
NoteEditor$LinedEditText
表記を使用して参照されます。これは、Java プログラミング言語で内部クラスを参照する標準的な方法です。カスタムビュー コンポーネントが内部クラスとして定義されていない場合は、XML 要素名を使用してビュー コンポーネントを宣言し、
class
属性を除外できます。次に例を示します。<com.example.android.notepad.LinedEditText id="@+id/note" ... />
この場合、
LinedEditText
クラスは独立したクラスファイルになります。クラスがNoteEditor
クラス内にネストされている場合、この方法は機能しません。定義内の他の属性とパラメータは、カスタム コンポーネント コンストラクタに渡されてから、
EditText
コンストラクタに渡される属性であるため、EditText
ビューに使用するパラメータと同じです。独自のパラメータを追加することもできます。
カスタム コンポーネントの作成は、必要なだけ複雑です。
より高度なコンポーネントでは、さらに多くの on
メソッドをオーバーライドして独自のヘルパー メソッドを導入し、プロパティと動作を大幅にカスタマイズできます。想像力を存分に発揮して、コンポーネントに実行させる必要があることに留意してください。