[Android Kotlin] 안드로이드 코틀린 다이얼로그 Dialog

갤럭시나 아이폰을 사용하면 다이얼로그를 잘 알것이다. 어떤 버튼을 클릭했을 때나 이벤트가 실행되거나 완료되면 어떤 확인문구와 함께 작게 뜨는 창을 본적이 있을 것이다. 그것이 다이얼로그다. 다이얼로그에는 종류가 정말 많은데 코드가 어떻게 구현되는지 알아보도록 하자

 

 

 

activity_main.xml

<?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="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <Button
        android:id="@+id/btn1"
        android:text="dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn2"
        android:text="custom dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn3"
        android:text="picker dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn4"
        android:text="date select dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn5"
        android:text="date select dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

 

dialog.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:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:orientation="vertical">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Name" />

        <EditText
            android:id="@+id/editText2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Name" />
    </LinearLayout>
</LinearLayout>

 

MainActivity.kt

class MainActivity : AppCompatActivity() {

    var pro:ProgressDialog? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // 1. 기본 다이얼로그
        btn1.setOnClickListener {
            var builder = AlertDialog.Builder(this)
            builder.setTitle("기본 다이얼로그")
            builder.setMessage("기본 다이얼로그")
            builder.setIcon(R.mipmap.ic_launcher)

            // 버튼 클릭시에 무슨 작업을 할 것인가!
            var listener = object : DialogInterface.OnClickListener {
                override fun onClick(p0: DialogInterface?, p1: Int) {
                    when (p1) {
                        DialogInterface.BUTTON_POSITIVE ->
                            tv1.text = "BUTTON_POSITIVE"
                        DialogInterface.BUTTON_NEUTRAL ->
                            tv1.text = "BUTTON_NEUTRAL"
                        DialogInterface.BUTTON_NEGATIVE ->
                            tv1.text = "BUTTON_NEGATIVE"
                    }
                }
            }

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

            builder.show()
        }

        // 2. 커스텀 다이얼로그
        btn2.setOnClickListener {
            var builder = AlertDialog.Builder(this)
            builder.setTitle("커스텀 다이얼로그")
            builder.setIcon(R.mipmap.ic_launcher)

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

            // p0에 해당 AlertDialog가 들어온다. findViewById를 통해 view를 가져와서 사용
            var listener = DialogInterface.OnClickListener { p0, p1 ->
                var alert = p0 as AlertDialog
                var edit1: EditText? = alert.findViewById<EditText>(R.id.editText)
                var edit2: EditText? = alert.findViewById<EditText>(R.id.editText2)

                tv1.text = "${edit1?.text}"
                tv1.append("${edit2?.text}")
            }

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

            builder.show()
        }

        // 3. 날짜 다이얼로그
        btn3.setOnClickListener {
            var calendar = Calendar.getInstance()
            var year = calendar.get(Calendar.YEAR)
            var month = calendar.get(Calendar.MONTH)
            var day = calendar.get(Calendar.DAY_OF_MONTH)

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

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

        // 4. 시간 다이얼로그
        btn4.setOnClickListener {
            var calendar = Calendar.getInstance()
            var hour = calendar.get(Calendar.HOUR)
            var minute = calendar.get(Calendar.MINUTE)

            var listener = TimePickerDialog.OnTimeSetListener { timePicker, i, i2 ->
                tv1.text = "${i}시 ${i2}분"
            }

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

        // 5. 프로그레스 다이얼로그
        btn5.setOnClickListener {
            // 권장하진 않지만 사용은 가능하다.
            pro = ProgressDialog.show(this, "타이틀입니다.", "메시지입니다.")

            // 핸들러를 통해서 종료 작업을 한다.
            var handler = Handler()
            var thread = Runnable { pro?.cancel() }
            handler.postDelayed(thread,5000) // 딜레이는 5초
        }
    }
}

 

1. 기본 다이얼로그이다. 타이틀과 메시지, icon을 지정할 수 있고. .show()를 통해서 화면에 띄울 수 있다. setPositiveButton, setNegativeButton, setNeutralButton을 배치해서 해당 버튼 클릭시에 작업을 할 수 있다. 별도로 리스너를 작성해서 어떤 버튼이 눌렸냐를 골라서 처리할 수 있게 된다.

 

 

2. 커스텀 다이얼로그이다. 1.과 비슷하지만 setView를 통해서 메시지부분에 내가 만든 레이아웃을 삽입할 수도 있다. 삽입한 레이아웃의 뷰들의 아이디를 가져와서 작업을 하는 것도 가능하다.

 

 

3. 날짜 다이얼로그이다. 먼저 캘린더 객체를 가져와서 현재 날짜를 디폴트로 설정하고, 다이얼로그를 통해서 선택한 날짜를 가져올 수 있게된다.

 

 

4. 시간 다이얼로그인데, 날짜 다이얼로그와 마찬가지로 사용법은 같다.

 

 

5. 권장하진 않지만 프로그레스바가 들어간 다이얼로그도 사용할 수 있다. 밑의 쓰레드는 핸들러를 통해서 종료작업을 하고 있는 코드이다.

 

 

 

 

원하시는 방향으로 적용해서 사용하시면 됩니다. 기본 캘린더쪽은 기본자체도 이뻐서 따로 커스텀 없이 그대로 사용하시면 될 것 같습니다.