各式各樣的對話窗格

有些輸入資料或需要與使用者互動確認的場景,可使用AlertDialog元件
在這個blog https://givemepass.blogspot.com/2011/11/alertdialog.html
有非常詳盡的用法介紹

自定義

除了預設可用的,我覺得dialog滿方便的一點就是可以自定義畫面來處理一些簡單的資料
不用考慮是否還要使用其它activity或fragment(不過官方有推薦裝入fragment使用)

也是來簡單的範例認識一下

xml

首先新增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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray">

    <TextView
        android:id="@+id/tv_dialog_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="TextView"
        android:textSize="14sp"
        app:layout_constraintBottom_toTopOf="@+id/guideline2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.507" />

    <EditText
        android:id="@+id/ed_multi_line"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="@android:color/white"
        android:ems="10"
        android:gravity="start|top"
        android:inputType="textMultiLine"
        android:maxLines="6"
        android:minLines="2"
        app:layout_constraintBottom_toTopOf="@+id/guideline3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/guideline2"
        app:layout_constraintVertical_bias="0" />

    <Button
        android:id="@+id/btn_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:text="選日期"
        app:layout_constraintBottom_toTopOf="@+id/ed_multi_line"
        app:layout_constraintStart_toEndOf="@+id/tv_dialog_date"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="116dp"
        android:text="金額"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="@+id/tv_dialog_date"
        app:layout_constraintStart_toEndOf="@+id/tv_dialog_date"
        app:layout_constraintTop_toTopOf="@+id/tv_dialog_date"
        app:layout_constraintVertical_bias="0.0" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="90dp" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.71" />

    <EditText
        android:id="@+id/ed_money"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="number"
        app:layout_constraintBottom_toBottomOf="@+id/textView2"
        app:layout_constraintStart_toEndOf="@+id/textView2"
        app:layout_constraintTop_toTopOf="@+id/textView2" />

    <Button
        android:id="@+id/btn_confirm"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="確認"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btn_cancel"
        app:layout_constraintTop_toBottomOf="@+id/ed_multi_line" />

    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="取消"
        app:layout_constraintBaseline_toBaselineOf="@+id/btn_confirm"
        app:layout_constraintEnd_toStartOf="@+id/btn_confirm"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

AlertDialog.Builder

其它預設的AlertDialog要使用時,通常直接呼叫AlertDialog.Builder即可
若使用自定義的話,須要先將畫好的layout inflate才行

 val dialogItem = LayoutInflater.from(this).inflate(R.layout.dialog_add, null)

接着就可以用AlertDialog.Builder呼叫setView方法,將inflate的view傳進去

AlertDialog.Builder(this@MainActivity)
                .setTitle("新增項目")
                .setView(dialogItem)
                .show()

因爲我們的dialog是點選fab後執行,所以就放到setOnClickListener{}中

fab.setOnClickListener {
            AlertDialog.Builder(this@MainActivity)
                .setTitle("新增項目")
                .setView(dialogItem)
                .show()
        }