メモ:Android ダイアログボックスを作成する

続いて、ダイアログボックス作成について。
これについては方式がいろいろあり試行錯誤の上分からない点もあるのですが、一旦まとめておきます。方式はいろいろありますが、ここではその一例になります。

ダイアログボックス作成までの流れ


ダイアログの作成は基本的に Activity#onCreateDialog() で一括して行います。ダイアログの作成に一旦 Activity を介す事で、ダイアログの管理を Activity が担うことが出来て便利になるそうです。

onCreateDialog() メソッドの引数には int を取りますが、これは作成するダイアログを識別するための ID に利用します。この ID は特に規則はなく、 Activity のメンバ定数でローカルに決めてよさそうです。

public class SampleViews extends Activity {

/// 中略

static final int DIALOG_MESSAGE_ID = 1;
static final int DIALOG_CONFIG_ID = 2;
static final int DIALOG_DIALOG_ID = 3;

@Override
protected Dialog onCreateDialog(int id) {
Dialog dialog = null;
switch (id) {
case DIALOG_CONFIG_ID:
// ダイアログ作成(1)
break;
case DIALOG_MESSAGE_ID:
// ダイアログ作成(2)
break;
case DIALOG_DIALOG_ID:
// ダイアログ作成(3)
break;
}
return dialog;
}

onCreateDialog() メソッドを実装したら、Activity#showDialog()を呼び出すことにより、実際にダイアログボックス生成処理が行えるようになります。 showDialog() メソッドの引数には、上記で使用した定数を利用します。

showDialog(DIALOG_DIALOG_ID);


ダイアログボックス作成


上記サンプルの、「ダイアログ作成」とコメントをつけた箇所で実際にダイアログボックスを作成しますが、方法はいくつかあります。

メッセージボックス(AlertDialog)作成


AlertDialog とは、あらかじめシステムで用意されている、主にメッセージの表示などに用いられるものです。

AlertDialog の場合、以下の手順で作成します。

  1. AlertDialog.Builder インスタンスを作成
  2. AlertDialog.Builder インスタンスに対し各種パラメータをセット
  3. AlertDialog.Builder#create() 実行

以下は、タイトルとメッセージ、ボタンのみの簡単なサンプルです。サンプルなので文字列はべたべたに日本語を使っていますが、ここは本当は文字列リソースを使うべきです。

AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder
.setTitle("お知らせ")
.setMessage("確認してください")
.setPositiveButton("ok", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {

/* User clicked OK so do some stuff */
}
});
dialog = builder.create();


レイアウトファイルを用いたダイアログボックスの作成


レイアウトファイルを利用することで、もっと自由にデザインしたダイアログボックスを作成することも出来ます。この方法は、 AlertDialog を利用する方法と、素の Dialog を利用する方法がありますが、ここでは前者の方法を取っています。

この方法での手順は以下のようになります。

  1. LayoutInflater インスタンスの取得
  2. LayoutInflater インスタンスを利用してレイアウトファイルから View を作成
  3. AlertDialog.Builder インスタンスを作成
  4. AlertDialog.Builder インスタンスに対し各種パラメータをセット(View含む)
  5. AlertDialog.Builder#create() 実行

以下はその例です。

LayoutInflater factory = LayoutInflater.from(this);
final View view2 = factory.inflate(R.layout.d01_action_dlg, null);
AlertDialog.Builder builder2 = new AlertDialog.Builder(this);
builder2
.setView(view2)
.setTitle("確認画面")
.setMessage("確認してください")
.setPositiveButton("ok", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int whichButton) {

/* User clicked OK so do some stuff */
}
});
dialog = builder2.create();

ここでは LayoutInflater.inflate() の引数に R.layout.d01_action_dlg を指定してますが、これは d01_action_dlg.xml にレイアウトが記述されていることを表します。
例えばこのようにします。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
>
<!-- メインビュー -->
<com.examples.views.S01SimpleView
android:layout_width="200dp"
android:layout_height="200dp"
/>
</LinearLayout>

ビューは昨日のビューを使いまわしです。

このあたりの説明は以下にあるのですが、
http://developer.android.com/intl/ja/guide/topics/ui/dialogs.html
LayoutInflater の使い方が違っているような気がします。
最初ここに記述された方法で試してましたが思うように動かず、結局、 SDK 付属のサンプル ApiDemos に含まれる、 AlertDialogSamples を参考にしました。

ダイアログボックス呼び出し


ここで作成したダイアログボックスの呼び出しはケースバイケースですが、一例として、 View 上に配置させたボタンをクリックすると表示されるようにしました。

これは結構単純で、以下のようにしています。

  • view のレイアウトファイルにボタンを配置
  • ボタンの onClick プロパティに、ボタン押下時の呼び出しメソッド名を設定
  • Activity に、上記のメソッドを作成し、 showDialog() 呼び出し


レイアウトや Activity は昨日のサンプルを元に、まずはレイアウトファイルは次のように変更。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- ヘッダエリア -->
<TextView
android:id="@+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:layout_alignParentTop="true"
/>
<!-- ダイアログ表示ボタン -->
<Button
android:id="@+id/config"
android:text="config"
android:onClick="showSampleDialog"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
/>
<!-- フッタエリア -->
<TextView
android:id="@+id/footer"
android:text="@string/footer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignTop="@+id/config"
/>
<!-- メインビュー -->
<com.examples.views.S01SimpleView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="@+id/header"
android:layout_above="@+id/footer"
/>
</RelativeLayout>

ここではボタンの onClick に showSampleDialog を指定したので、 Activity に showSampleDialog() メソッドを定義します。

public void showSampleDialog(View view) {
showDialog(DIALOG_DIALOG_ID);
}


大体こんな感じになります。

画像

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 1

ナイス

この記事へのコメント

この記事へのトラックバック