DialogFragmentでカスタマイズしたオリジナルのダイアログを表示しよう！

Androidアプリ開発
2024.10.24

ダイアログの使用するタイミング、Androidのダイアログの種類は以下の記事でまとめているのでご覧ください♪

初心者でもできる！Androidでアラートダイアログを実装してユーザーに優しい通知を作ろう
初心者向けに、Androidでアラートダイアログを実装する方法をわかりやすく解説！ポジティブ、ネガティブ、中立ボタンの設定やダイアログの活用ポイントを学んで、ユーザーに優しいアプリを作りましょう
reidevnote.com
2024.10.21

今回はDialogFragment（ダイアログフラグメント）を使用して、オリジナルのダイアログを表示させる方法を解説します！

DialogFragment（ダイアログフラグメント）を使用すると柔軟なカスタマイズが可能で、アプリに合わせたデザインを持つダイアログを作成することができます。

DialogFragment（ダイアログフラグメント）とは？

DialogFragmentは、ダイアログを画面に表示するための仕組みで、画面の回転や他のライフサイクルの変化に対応しやすく、ダイアログの状態を保持することができます。

DialogFragmentクラスとは？

DialogFragmentは、Fragmentの一部として動作するダイアログを提供するクラスです。Fragmentの特徴を持っているため、他のFragmentやActivityと同じライフサイクルを共有し、FragmentManagerを使ってバックスタックに追加したり、ナビゲーションを管理することが可能です。

＼＼より詳しい内容は、公式のDevelopersリファレンスをご確認ください／／

DialogFragment  |  Android Developers
developer.android.com

注意:
従来のandroid.app.DialogFragmentは、APIレベル28（Android 9）で非推奨となっているため、最新のプロジェクトではandroidx.fragment.app.DialogFragmentを使用することが推奨されます。


ダイアログフラグメントの実装方法

ダイアログフラグメントを実装方法について、手順ごとに解説します！以下のステップで処理を記述します。

1. ダイアログ用のレイアウトを作成する
2. ダイアログフラグメントを継承したクラスを作成する
3. AlertDialog.Builderのインスタンスを作成
4. レイアウトをインフレートして取得する
5. レイアウト内の画面部品を初期化・設定する
6. AlertDialog.BuilderにViewを設定する
7. ダイアログのタイトルを設定する
8. ポジティブ・ネガティブボタンを設定する
9. ダイアログのオブジェクトを生成する
10. ダイアログフラグメントを表示する

ステップが多いですが頑張りましょう！


1. ダイアログ用のレイアウトを作成する

ダイアログで使用するカスタムレイアウトは、XMLファイルとして定義します。このレイアウトファイルでは、ボタンやテキスト、入力フィールドなど、ユーザーに表示するUIコンポーネントを配置できます。

例：fragment_sample_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/dialogMessege"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="カテゴリーを選択してください"
        android:textSize="18sp" />

    <EditText
        android:id="@+id/categoryInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="カテゴリー名を入力" />

</LinearLayout>

2. ダイアログフラグメントを継承したクラスを作成する

DialogFragmentを継承した新しいクラスを作成し、そのクラスの中でダイアログの生成や表示を行います。DialogFragmentの中で最も重要なメソッドの一つがonCreateDialogです。このメソッドをオーバーライドすることで、カスタムダイアログの表示を制御できます。

例：SampleDialogFragment.java

public class SampleDialogFragment extends DialogFragment {

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        //処理を記述
    }
}
引数クラス概要
第一引数Bundle savedInstanceState画面の回転などでActivityやFragmentが再生成される際に、状態を一時的に保存・復元するためのクラス
状態管理が必要な場合には役立つ

3. AlertDialog.Builderのインスタンスを作成

AlertDialog.Builderクラスのインスタンスを作成します。

例：SampleDialogFragment.java

AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());

フラグメントは独自のコンテキスト（Context）を持っていないため、getActivity()やgetContext()メソッドを使って親のActivityやFragmentのコンテキストを取得する必要があります。

getActivity()とgetContext()の違い

getActivity()とgetContext()はどちらもフラグメントが親のActivityまたはContextにアクセスするためのメソッドです。

メソッド名概要
getActivity()フラグメントがアタッチされている親のActivityを取得
getContext()フラグメントのContextを取得

・Activityからダイアログフラグメントを表示する場合
getActivity()やgetContext()を使用する。特にActivityに関する特定の操作が必要な場合は、getActivity()を使用すると良い。
・Fragmentからダイアログフラグメントを表示する場合
getContext()を使用する。


4. レイアウトをインフレートして取得する

DialogFragment内でカスタムレイアウトを使用したい場合、LayoutInflaterを使ってXMLレイアウトファイルをインフレートし、Viewオブジェクトを取得します。

例：SampleDialogFragment.java

LayoutInflater inflater = requireActivity().getLayoutInflater();
View view = inflater.inflate(R.layout.fragment_sample_dialog, null);
メソッド・クラス名概要
LayoutInflaterXMLで定義されたレイアウトを、プログラム上のViewオブジェクトに変換するためのクラス
requireActivity()親のActivityを取得し、Activityが確実に存在することを保証
getLayoutInflater()Activityに関連するLayoutInflaterを取得し、XMLレイアウトをViewに変換
inflate()レイアウトファイルをインフレートして、Viewオブジェクトを作成
インフレートとは？

インフレートとは、XMLで定義されたレイアウトを、実際の画面に表示できる形に変換するプロセスのことです。XMLファイルに書かれたレイアウト（ボタンやテキストなどのUI要素）をJavaやKotlinコードで扱えるViewオブジェクトに変換し、それを画面に表示できるようにします。

インフレートを使うことで、定義済みのレイアウトをプログラムの中で操作したり、カスタマイズしたりすることができます。これにより、レイアウトファイルに記述されたUI要素を動的に扱うことが可能になります。


5. レイアウト内の画面部品を初期化・設定する

インフレートしたビューからUIコンポーネント（ボタンやテキストフィールドなど）を取得し、必要な設定を行います。viewのfindViewByIdメソッドを使用して、各コンポーネントのIDを取得し、ActivityやFragmentと同様に、画面部品に対してテキストの表示やリスナーの設定などの操作を行います。

例：SampleDialogFragment.java

TextView dialogMessage = view.findViewById(R.id.dialogMessage);
dialogMessage.setText("新しいメッセージを設定しました");

EditText categoryInput = view.findViewById(R.id.categoryInput);
categoryInput.setHint("新しいカテゴリー名を入力");

6. AlertDialog.BuilderにViewを設定する

インフレートしたビューをAlertDialog.Builderに設定することで、カスタムレイアウトをダイアログに表示することができます。この手順によって、XMLで定義したカスタムレイアウトをダイアログに適用し、ボタンや入力フィールドなどのUIコンポーネントを持つ複雑なダイアログを作成できます。

例：SampleDialogFragment.java

builder.setView(view);

7. ダイアログのタイトルを設定する

ダイアログの上部に表示されるタイトルを設定します。タイトルをレイアウトに含める場合はこの処理は不要です。

例：SampleDialogFragment.java

builder.setTitle("タイトル");

8.ポジティブ・ネガティブボタンを設定する

ポジティブボタンやネガティブボタンの動作を設定します。

＼＼ダイアログの選択・実装方法については以下の記事でまとめているのでご覧ください♪／／

初心者でもできる！Androidでアラートダイアログを実装してユーザーに優しい通知を作ろう
初心者向けに、Androidでアラートダイアログを実装する方法をわかりやすく解説！ポジティブ、ネガティブ、中立ボタンの設定やダイアログの活用ポイントを学んで、ユーザーに優しいアプリを作りましょう
reidevnote.com
2024.10.21

9. ダイアログのオブジェクトを生成する

設定したダイアログの構成要素（タイトル、メッセージ、ボタンなど）を元に、create()メソッドを呼び出して、AlertDialogという「ダイアログそのもの」のオブジェクトを作成します。

例：SampleDialogFragment.java

AlertDialog dialog = builder.create();
return dialog;

10.ダイアログフラグメントを表示する

最後にFragmentManagerを使ってダイアログフラグメントを呼び出し、表示します。これにより、ダイアログが画面にポップアップ形式で表示されます。

例：XXActivity.javaなど

SampleDialogFragment dialogFragment = new SampleDialogFragment ();
dialogFragment.show(getSupportFragmentManager(), "SampleDialogFragment");

show()
第一引数にはFragmentManagerを渡し、第二引数にはフラグメントの識別子となるタグを指定します


処理をまとめると…

今までの解説をまとめると、ダイアログフラグメントを使ってカスタムダイアログを表示するための流れは以下のようになります。

例：fragment_sample_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/dialogMessege"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="カテゴリーを選択してください"
        android:textSize="18sp" />

    <EditText
        android:id="@+id/categoryInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="カテゴリー名を入力" />

</LinearLayout>

例：SampleDialogFragment.java

public class SampleDialogFragment extends DialogFragment {

    @NonNull
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
		//ダイアログビルダーを生成
		AlertDialog.Builder builder = new AlertDialog.Builder(getActivity(),R.style.CustomAlertDialog);

		//レイアウトの設定
		LayoutInflater inflater = requireActivity().getLayoutInflater();
		View view = inflater.inflate(R.layout.fragment_category_dialog, null);
		
		//ダイアログのレイアウトの設定
		builder.setView(view);

		//ダイアログのボタンの設定
		//キャンセルボタンの設定
		builder.setNeutralButton("キャンセル", new DialogInterface.OnClickListener() {
			@Override
			public void onClick(DialogInterface dialogInterface, int i) {
				// キャンセルボタンの処理
		});
		//OKボタンの設定
		builder.setPositiveButton("OK", new DialogInterface.OnClickListener() {
			@Override
			public void onClick(DialogInterface dialogInterface, int i) {
				// キャンセルボタンの処理
		});

		//ダイアログオブジェクトを生成し、リターン
		AlertDialog dialog = builder.create();
		return dialog;
	}
}

例：XXActivity.javaなど

//ダイアログの表示
SampleDialogFragment dialogFragment = new MyDialogFragment();
dialogFragment.show(getSupportFragmentManager(), "SampleDialogFragment");

どうだったでしょうか？意外と難しかったですかね？


まとめ

今回はダイアログフラグメントについて解説しました！

Activityで行う処理とダイアログで行う処理が混ざってしまい、少しややこしい部分もあったかもしれませんが、それぞれの役割や流れを理解することで、ダイアログの表示やカスタマイズがスムーズにできるようになると思います！

今回は、カスタムレイアウトを使ってダイアログフラグメントを表示する方法を紹介しましたが、既存のポジティブボタンやネガティブボタンにも変更を加えたり、スタイルを適用することも可能です。

今回の解説内容が、皆さんの開発に役立ち、カスタムダイアログの実装に役立つことを願っています！

タイトルとURLをコピーしました