DialogFragment を利用したカスタムダイアログの表示

DialogFragmentを用いてカスタムダイアログを表示するコードを紹介します。

UI

以下のUIを作成します。

MainActivity

MainActivityにはボタンを一つ配置します。

dialog.xml

LyoutXMLファイルを一つ追加します。ダイアログに表示するレイアウトになります。今回はTextView, EditText, Buttonを１つづつ配置しました。

コード

下記のコードを記述します。

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(); 
    }
  });