[Kotlin] AlertDialog를 이용한 경고창(대화 상자) 띄우기

서론

이번 글에서는 앱을 사용할 때 사용자에게 팝업 메세지를 띄어줄 필요가 있는 경우에 사용하는 다이얼로그(Dialog)의 사용 방법에 대해서 간단하게 알아보고자 한다. 다이얼로그는 쉽게 말해서 팝업창이라고 생각해도 무방하며, 다이얼로그의 사용 목적은 서비스와 사용자가 대화 화면을 통해서 상호작용을 하는 데에 목적이 있다.

AlertDialog

AlertDialog는 사용자에게 경고 메세지를 띄울 때 사용하는 다이얼로그이다. 특히 해당 다이얼로그는 서비스를 사용할 때 사용자에게 선택을 요구하는 경우에 많이 사용된다.

 

예를 들어, 수정 사항을 저장하시겠습니까? 라는 문구가 있다면 사용자는 예 또는 아니오 두 개의 선택지 중에서 하나를 선택하는 경우가 될 수 있다. 물론, 꼭 선택을 할 때에만 사용하는 것은 아니고 단순 정보 전달을 목적으로 해당 다이얼로그를 사용하기도 한다.

 

이제 AlertDialog의 사용 방법을 알아보자.

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Dialog Example!"
        android:textSize="30dp"
        android:layout_marginTop="100dp"
        android:textAlignment="center"
        android:gravity="center_horizontal" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"
        android:layout_gravity="center_horizontal">

        <Button
            android:id="@+id/alertBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Alert Dialog"
            android:layout_marginRight="10dp"/>

        <TextView
            android:id="@+id/result"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="결과"
            android:textSize="26dp"/>

    </LinearLayout>

</LinearLayout>

위와 같이 코드를 구성하면 메인 액티비티 화면은 다음과 같은 결과를 얻을 수 있다.

 

이번 예제에서는 ALERT DIALOG 버튼을 눌렀을 때 다이얼로그가 생성되고,

다이얼로그에 존재하는 확인, 취소 버튼에 따라서 각각 다른 기능이 수행되도록 다이얼로그를 만들어보고자 한다.

 

이제 기능을 구현하기 위해 MainActivity.kt 파일을 수정하자.

MainActivity.kt 파일 수정하기

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

        val alertButton: Button = findViewById(R.id.alertBtn)
        val result: TextView = findViewById(R.id.result)

        alertButton.setOnClickListener {
            val alertBuilder = AlertDialog.Builder(this)

            alertBuilder.setTitle("Alert Dialog Title")
                .setMessage("Alert Dialog 예제 입니다")
                .setPositiveButton("확인", DialogInterface.OnClickListener { _, _ ->
                    result.setText("확인 버튼을 클릭함")
                })
                .setNegativeButton("취소", DialogInterface.OnClickListener { _, _ ->
                    result.setText("취소 버튼을 클릭함")
                })

            alertBuilder.show()
        }
    }
}

 

먼저, 다이얼로그를 위한 빌더 객체를 정의하고 정의된 객체를 통해서 다이얼로그의 구성 요소를 정의할 수 있다.

• setTitle()은 다이얼로그의 제목을 정의한다. (생략 가능)
• setMessage()는 다이얼로그가 실행됐을 때 전달할 내용을 정의한다.
• setPositiveButton(), setNegativeButton()은 각각 확인, 취소 버튼을 의미한다.
  • 둘 중에 하나만 사용할 수도 있으며 두 개 모두 사용하지 않는 경우에는 단순 정보 전달을 위한 다이얼로그가 된다.
  • 첫번째 인자에는 버튼에 들어갈 내용을 정의하고, 두번째 인자에는 해당 버튼이 클릭되었을 때 수행될 기능을 정의한다.
• show() 메서드는 다이얼로그를 사용자(화면)에게 보여주는 기능을 담당한다.

AlertDialog가 실행된 모습

우리가 정의했던 모습으로 다이얼로그가 생성되는 것을 확인할 수 있다.

이제 확인 버튼을 누르면 메인 화면의 결과 문자가 다음과 같이 바뀌는 것을 볼 수 있다.

 

마찬가지로 확인 버튼이 아니라 취소 버튼을 클릭한다면 TextView의 문자가 취소 버튼을 클릭함 으로 바뀌는 것을 확인할 수 있을 것이다.

---

출처

• https://developer.android.com/guide/topics/ui/dialogs#kotlin