DialogFragment の表示方法と Theme の変更方法を解説してみようと思います。本記事ではまずはじめにダイアログの表示方法について解説し、そのあとにダイアログの Theme の変更方法について解説しようと思います。ダイアログの表示方法に詳しい方は Theme の変更方法だけ見ていただいても有益な情報が得られるかと思います。
はじめに DialogFragment を使ったダイアログの作成方法について解説します。
まず次のように DialogFragment を継承したクラス（NormalDialogFragment）を作成します。
class NormalDialogFragment : DialogFragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.dialog_fragment_normal, container, false)
}
}上記で作成した DialogFragment では onCreateView で読み込んだ XML ファイルのレイアウトをダイアログに表示するようになっています。なので XML ファイルを編集して DialogFragment に表示するレイアウトを変更します。今回は次のような ConstraintLayout の中に TextView を配置したレイアウトを表示してみます。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="400dp"
android:layout_height="300dp"
android:background="#50ff0000">
<TextView
android:layout_width="300dp"
android:layout_height="200dp"
android:background="@color/white"
android:gravity="center"
android:text="@string/normal_dialog_fragment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>DialogFragment を生成するには DialogFragment を生成したあとに show（）を呼び出すだけで表示できます。
DialogFragment().show(fragmentManager, tag)今回は MainActivity に配置した Button をタップしたときに DialogFragment を表示するようにします。次のようなレイアウトを定義して、MainActivity で Button をタップしたときに DialogFragment を生成して、show（） を呼び出すようにしてやります。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:padding="8dp"
tools:context=".MainActivity">
<Button
android:id="@+id/normal_dialog_fragment_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/normal_dialog_fragment" />
</LinearLayout>class MainActivity : AppCompatActivity(R.layout.activity_main) {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val normalDialogFragmentButton = findViewById<Button>(R.id.normal_dialog_fragment_button)
normalDialogFragmentButton.setOnClickListener {
// Activity で show を呼び出す場合には
// 第1引数の fragmentManager に supportFragmentManager をセットしてやります。
// 第2引数の tag は fragmentManager からタグ指定で Fragment を取得するためのものです。
// なので第2引数の tag には任意の文字列をタグとして指定してあげればOKです。
NormalDialogFragment().show(supportFragmentManager, "TAG")
}
}
}ここまで実装したらあとはアプリを起動して動作確認してみましょう。アプリを起動してボタンをタップすると次のような感じでダイアログが表示されます。
このように作成したレイアウトが中心に表示され、レイアウトの領域外は半透明の黒背景となります。 ちなみにこの半透明の黒背景をタップすることでダイアログを閉じれます。 （この表示や動作はカスタマイズできます、デフォルトでは上記の表示・動作するようになっています。）
ダイアログが上手く表示できているかのように見えるのですが、よく見ると作成したレイアウトと異なっています。以下のように赤色背景が表示される想定でしたが、赤色背景が表示される領域が確保されていないため表示できていません。
| XMLファイルに定義したもの | 実際に表示されたもの |
|---|---|
 |
 |
なぜこのような仕組みになっているかまではわからないのですが DialogFragment が XML ファイルから View を生成したあとルートビューである ConstraintLayout の layout_width と layout_height に match_parent が設定されるためです。ですので DialogFragment ではルートビューの layout_width や layout_height でダイアログの大きさを調整しようとすると上手くいかないので注意が必要です。
先程はシンプルな DialogFragment を表示してみましたが実際の開発ではもう少し手の混んだレイアウトのDialogFragment を実装するかなと思います。DialogFragment では Theme を変更することで表示や動作を変更できるようになっています。今回はよく使いそうな Theme をまとめて紹介します。
Theme は onCreate で setStyle を呼び出すことで変更できます。 今回は以下のクラスとレイアウトを用意し Theme を変更していきます。
class NormalDialogFragment : DialogFragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
return inflater.inflate(R.layout.dialog_fragment_normal, container, false)
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setStyle(getStyle(), getThemeResId())
}
private fun getStyle(): Int = STYLE_NORMAL
private fun getThemeResId(): Int = R.style.Theme_AppCompat_Dialog
}<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#50ff0000">
<TextView
android:layout_width="300dp"
android:layout_height="200dp"
android:background="@color/white"
android:gravity="center"
android:text="@string/normal_dialog_fragment"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout> <style name="Theme.Sample.BlackDialog" parent="Theme.MaterialComponents.Light.Dialog">
<item name="android:windowBackground">@android:color/black</item>
</style>
<style name="Theme.Sample.RoundedDialog" parent="Theme.MaterialComponents.Light.Dialog">
<item name="dialogCornerRadius">16dp</item>
</style>
<style name="Theme.Sample.BackgroundDimDisabledDialog" parent="Theme.MaterialComponents.Light.Dialog">
<item name="android:backgroundDimEnabled">false</item>
</style>
<style name="Theme.Sample.WindowCloseOnTouchOutsideDisableDialogFragment" parent="Theme.MaterialComponents.Light.Dialog">
<item name="android:windowCloseOnTouchOutside">false</item>
</style>
<style name="Theme.Sample.FullScreenDialog" parent="Theme.MaterialComponents.Light.Dialog">
<item name="android:windowBackground">@android:color/white</item>
<item name="android:windowIsFloating">false</item>
</style>
DialogFragment を使う際には本記事で紹介したポイントを押させておけばおおよそのダイアログを作成できると思います。ポイントを押さえれば難しいことはないのでサクッとダイアログを実装できるようになりましょう。今回作成した DialogFragment はこちらです。興味があるかたはこちらのリポジトリを確認してください。
