[TIL] #29 Dialog

1. Dialog?

• 사용자에게 결정을 내리거나 추가 정보를 입력하라는 메시지를 표시하는 작은 창
• 대화상자는 화면을 가득 채우지 않으며 보통은 사용자가 다음으로 계속 진행하기 전에 조치를 취해야 하는 모달 이벤트에 사용됨

2. Dialog Structure

1) Title

• 선택 사항
• 콘텐츠 영역에 상세한 메시지,목록 또는 맞춤 레이아웃이 채워져 있는 경우에만 사용해야 함
• 단순한 메시지 또는 질문을 나타내야 하는 경우 제목은 없어도 됨

2) Contents

• 메시지,목록 또는 다른 맞춤 레이아웃을 표시 할 수 있음

3) Button

• 대화 상자 하나에 작업 버튼이 세 개를 초과하면 안됨

3. Example

1) AlertDialog

binding.btn1Alert.setOnClickListener {
    var builder = AlertDialog.Builder(this)
    builder.setTitle("기본 다이얼로그 타이틀")
    builder.setMessage("기본 다이얼로그 메세지")
    builder.setIcon(R.mipmap.ic_launcher)

    // 버튼 클릭했을때 작업
    val listener = object : DialogInterface.OnClickListener {
        override fun onClick(p0: DialogInterface?, p1: Int) {
            when (p1) {
                DialogInterface.BUTTON_POSITIVE ->
                    binding.tvTitle.text = "BUTTON_POSITIVE"
                DialogInterface.BUTTON_NEUTRAL ->
                    binding.tvTitle.text = "BUTTON_NEUTRAL"
                DialogInterface.BUTTON_NEGATIVE ->
                    binding.tvTitle.text = "BUTTON_NEGATIVE"
            }
        }
    }

    builder.setPositiveButton("Positive", listener)
    builder.setNegativeButton("Negative", listener)
    builder.setNeutralButton("Neutral", listener)

    builder.show()
}

2) Custom Dialog

binding.btn2Custom.setOnClickListener {
    val builder = AlertDialog.Builder(this)
    builder.setTitle("커스텀 다이얼로그")
    builder.setIcon(R.mipmap.ic_launcher)

    val v1 = layoutInflater.inflate(R.layout.dialog, null)
    builder.setView(v1)

    val listener = DialogInterface.OnClickListener { p0, p1 ->
        val alert = p0 as AlertDialog
        val edit1: EditText? = alert.findViewById<EditText>(R.id.editText)
        val edit2: EditText? = alert.findViewById<EditText>(R.id.editText2)

        binding.tvTitle.text = "이름 : ${edit1?.text}"
        binding.tvTitle.append(" / 나이 : ${edit2?.text}")
    }

    builder.setPositiveButton("확인", listener)
    builder.setNegativeButton("취소", null)

    builder.show()
}

3) DatePikerDialog

binding.btn3Date.setOnClickListener {
    val calendar = Calendar.getInstance()
    val year = calendar.get(Calendar.YEAR)
    val month = calendar.get(Calendar.MONTH)
    val day = calendar.get(Calendar.DAY_OF_MONTH)

    val listener = DatePickerDialog.OnDateSetListener { datePicker, i, i2, i3 ->
        // i년 i2월 i3일
        binding.tvTitle.text = "${i}년 ${i2 + 1}월 ${i3}일"
    }

    var picker = DatePickerDialog(this, listener, year, month, day)
    picker.show()
}

4) TimePickerDialog

binding.btn4Time.setOnClickListener {
    val calendar = Calendar.getInstance()
    val hour = calendar.get(Calendar.HOUR)
    val minute = calendar.get(Calendar.MINUTE)

    val listener = TimePickerDialog.OnTimeSetListener { timePicker, i, i2 ->
        binding.tvTitle.text = "${i}시 ${i2}분"
    }

    val picker = TimePickerDialog(this, listener, hour, minute, false) // true하면 24시간 제
    picker.show()
}

5) ProgressDialog

binding.btn5Porgress.setOnClickListener {
    val builder = AlertDialog.Builder(this)
    builder.setTitle("프로그래스바")
    builder.setIcon(R.mipmap.ic_launcher)

    val v1 = layoutInflater.inflate(R.layout.progressbar, null)
    builder.setView(v1)

    builder.show()
}

progressbar.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="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ProgressBar
        android:id="@+id/progressbar"
        android:layout_width="match_parent"
        android:layout_height="76dp"
        android:layout_gravity="center"
        android:layout_marginTop="48dp"
        android:indeterminate="false"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="loading..."
        android:textSize="16sp"
        android:layout_marginTop="16dp"/>
</LinearLayout>

---

[참고 사이트]

'대화상자', developer
'Dialogs', Material Design 3