[Kotlin] AlertDialog를 이용하여 콤보 박스(Combobox) 만들기

서론

이전 글에서 AlertDialog를 이용하여 선택창을 구현하는 예제를 다루었다. 이번 글에서는 AlertDialog를 응용하여 확인, 취소 2개의 선택지 중에서 선택하는 것이 아니라, 리스트에 들어있는 여러 데이터 중에서 하나를 선택하는 콤보박스 다이얼로그를 구현해보고자 한다.

 

AlertDialog에 대한 개념과 간단한 예시는 이전 글에서 다루었으므로 해당 글에서는 다루지 않으며 추가 이해가 필요한 분들은 아래 글을 참고하면 좋을 것 같다.

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

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

구현하기

이번 예제는 위 글의 코드를 일부 수정하여 구현할 예정이다.

 

먼저 이전 글에서 다룬 MainActivity의 레이아웃 구성은 다음과 같았다. 이번 예제에서도 위 레이아웃을 그대로 사용할 것이며 기능만 일부 수정하고자 한다.

 

이번에는 ALERT DIALOG 버튼을 누르면 확인, 취소 버튼을 선택하는 것이 아니라 리스트 내에 존재하는 여러 개의 데이터를 보여주게끔 다이얼로그를 바꿔보자.

 

[기존 코드]

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()
        }
    }
}

기존 코드에서는 setMessage()를 사용하여 다이얼로그를 통해 전달할 내용을 정의했다.

이번 글에서는 setMessage() 대신에 setItmes()를 사용하여 리스트 데이터를 다이얼로그를 통해 전달할 것이다.

 

코드를 다음과 같이 수정하자.

 

[수정 코드]

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)

        var myList: Array<String> = arrayOf("월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일")

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

            alertBuilder.setTitle("Alert Dialog Title")
                    .setItems(myList, DialogInterface.OnClickListener { dialogInterface, index ->  result.text = myList[index]+"이 선택됨"})
            alertBuilder.show()
        }
    }
}

문자열 타입의 데이터를 담고있는 배열 myList를 선언하고, setItems()의 인자로 해당 배열을 넣어주었다.

setItems()의 두번째 인자는 다이얼로그 내에서 클릭 이벤트가 실행되었을 때 발생하는 함수이다. 해당 함수의 2번째 반환값인 index가 의미하는 것은 클릭한 배열 데이터의 인덱스 값(원소 위치)를 리턴한다.

 

즉, 다이얼로그가 실행되고 화요일 이라는 요소를 클릭하면 index 값은 화요일의 위치인 1을 반환한다는 의미이다. 그리고 반환된 인덱스 값을 통해서 TextView의 문자열을 수정하는 기능을 수행한다.

 

해당 코드의 결과는 다음과 같다.

결과