DialogFragment を利用したカスタムダイアログの表示 - Android
DialogFragmentを用いてカスタムダイアログを表示するコードを紹介します。
UI
以下のUIを作成します。
MainActivity
MainActivityにはボタンを一つ配置します。
dialog.xml
LyoutXMLファイルを一つ追加します。ダイアログに表示するレイアウトになります。今回はTextView, EditText, Buttonを1つづつ配置しました。
コード
下記のコードを記述します。
MainActivity.java
package com.iPentec.dialogfragmentdemo;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.support.v4.app.FragmentActivity;
public class MainActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
public void button1_click(View view){
CustomDialogFragment cdf = new CustomDialogFragment();
cdf.show(getSupportFragmentManager(),"dialog");
}
}
解説
MainActivity クラス定義
初期状態ではActivityクラスの派生クラスとなっていますが、これを
public class MainActivity extends Activity {
以下のFragmentActivityクラスの派生クラスに変えます。
public class MainActivity extends FragmentActivity {
button1_click
CustomDialogFragment cdf = new CustomDialogFragment();
にて、CustomDialogFragmentクラスのインスタンスを作成します。
cdf.show(getSupportFragmentManager(),"dialog");
showメソッドを呼び出しカスタマイズされたダイアログを表示します。
CustomDialogFragment.java
package com.iPentec.dialogfragmentdemo;
import android.app.Dialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.view.WindowManager;
public class CustomDialogFragment extends DialogFragment {
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
Dialog dialog = new Dialog(getActivity());
dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
dialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
dialog.setContentView(R.layout.dialog);
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
dialog.findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
dismiss();
}
});
return dialog;
}
}
解説
onCreateDialogクラスをオーバーライドしカスタムダイアログのコードを記述します。
ダイアログクラスのインスタンスを作成します。
Dialog dialog = new Dialog(getActivity());
ダイアログの設定をします。
//タイトルバーなしのダイアログを表示
dialog.getWindow().requestFeature(Window.FEATURE_NO_TITLE);
//フルスクリーンでダイアログを表示します。
dialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN);
//ダイアログに表示するレイアウトを指定します。
dialog.setContentView(R.layout.dialog);
//背景色を投下に設定します。
dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
以下はダイアログのボタンのClickイベントハンドラになります。
dialog.findViewById(R.id.button1).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
dismiss();
}
});
実行結果
プロジェクトを実行します。下図の画面が表示されます。[Button]をタップします。
タップすると下図の画面が表示されます。背景色が透明のため見難いですが、中央にカスタマイズされたダイアログが表示されています。
ダイアログのTextには文字も入力できます。
ダイアログの[OK]ボタンをタップするとダイアログが閉じます。
著者
iPentecのプログラマー、最近はAIの積極的な活用にも取り組み中。
とっても恥ずかしがり。
最終更新日: 2024-01-04
作成日: 2013-05-23