대화창(이하 다이어로그)는 일반적으로 상대방에게 알림을 보여주거나 추가적인 정보를 주고받을 수 있는 화면 전체를 가리지 않고 일부만 차지하는 화면입니다. dialog를 view, fragment등을 통해서 조금 더 디테일하게 생성할 수 있지만 우선은 기본적인 AlertDialog.Builder로 생성해보도록 하겠습니다.
제목, 내용, positive, negative, neutral 버튼을 가지는 아주 간단한 dialog를 만들어본 후 기본 리스트, 라디오 버튼(단일 선택), 체크 박스(다중 선택) 다이어로그를 만들어보도록 하겠습니다.
레이아웃 구성
activity_main.xml
<?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"
tools:context=".MainActivity">
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="다이얼로그 생성 버튼!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>btn이라는 아이디를 가지는 버튼 하나만을 소유한 메인엑티비티 레이아웃입니다.
메인엑티비티 소스코드 구성
import android.app.AlertDialog
import android.app.Dialog
import android.content.DialogInterface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Toast
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val button = findViewById<Button>(R.id.btn)
button.setOnClickListener {
val builder = basicDialog()
builder.show()
}
}
fun basicDialog(): AlertDialog.Builder {
val builder = AlertDialog.Builder(this)
builder
.setTitle("다이얼로그 제목")
.setMessage("다이얼로그 메시지\n1줄\n2줄\n3줄")
.setCancelable(false)
.setPositiveButton("확인", object : DialogInterface.OnClickListener {
override fun onClick(p0: DialogInterface?, p1: Int) {
Toast.makeText(baseContext, "확인 버튼 클릭!", Toast.LENGTH_SHORT).show()
}
})
.setNegativeButton("취소", object : DialogInterface.OnClickListener {
override fun onClick(p0: DialogInterface?, p1: Int) {
Toast.makeText(baseContext, "취소 버튼 클릭!", Toast.LENGTH_SHORT).show()
}
})
.setNeutralButton("뉴트럴", object : DialogInterface.OnClickListener {
override fun onClick(p0: DialogInterface?, p1: Int) {
Toast.makeText(baseContext, "뉴트럴 버튼 클릭!", Toast.LENGTH_SHORT).show()
}
})
.create()
return builder
}
}메인 엑티비티는 이렇게 구성되어있습니다. basicDialog()라는 AlertDialog.Builder를 반환하는 함수를 만들고 btn아이디를 가진 버튼(다이얼로그 생성 버튼!)이 클릭된다면 반환된 AlertDialog.Buider를 show()하여 화면에 띄우도록 만들었습니다.
basicDialog의 소스코드를 보면 가장먼저 builder를 AlertDialog.Builder 객체로 생성해주고 빌더 패턴을 사용하여 다이어로그를 구성합니다.
setCancelable 이란?
setCancelable()은 다이어로그의 바깥쪽을 눌렀을 때 다이어로그가 종료되도록할 것인지 여부를 결정해줍니다.
기본 값은 true이며 true일 경우 다이어로그의 외부를 누른다면 다이어로그가 종료됩니다.
setCancelable(true) - 외부를 클릭하면 다이어그램 종료(default)
setCancelable(false) - 외부를 클릭해도 다이어그램 종료x
dialog의 구성
basicDialog 함수의 소스코드
fun basicDialog() : AlertDialog.Builder{
val builder = AlertDialog.Builder(this)
builder
.setTitle("다이얼로그 제목")
.setMessage("다이얼로그 메시지\n1줄\n2줄\n3줄")
.setCancelable(false)
.setPositiveButton("확인", object : DialogInterface.OnClickListener{
override fun onClick(p0: DialogInterface?, p1: Int) {
Toast.makeText(baseContext, "확인 버튼 클릭!", Toast.LENGTH_SHORT).show()
}
})
.setNegativeButton("취소", object : DialogInterface.OnClickListener{
override fun onClick(p0: DialogInterface?, p1: Int) {
Toast.makeText(baseContext, "취소 버튼 클릭!", Toast.LENGTH_SHORT).show()
}
})
.setNeutralButton("뉴트럴", object : DialogInterface.OnClickListener{
override fun onClick(p0: DialogInterface?, p1: Int) {
Toast.makeText(baseContext, "뉴트럴 버튼 클릭!", Toast.LENGTH_SHORT).show()
}
})
.create()
return builder
}
다이얼로그 제목 - 제목 부분입니다. setTitle()로 설정할 수 있습니다.
다이얼로그 메시지 1줄 ~ 3줄 - 메시지 내용 부분입니다. setMessage()로 설정할 수 있습니다.
뉴트럴 - neutral 버튼입니다. - setNeutralButton()으로 설정할 수 있습니다.
취소 - negative 버튼입니다. - setNegativeButton()으로 설정할 수 있습니다.
확인 - positive 버튼입니다. - setPositiveButton()으로 설정할 수 있습니다.
총 3가지 버튼이 있는데(positive, negative, neutral) positive는 가장 우측, positive의 바로 왼쪽이 negative, neutral은 가장 좌측에 존재하게 됩니다. 각 버튼은 최대 1개씩 가질 수 있습니다.
setPositiveButton을 예시로 들자면
.setPositiveButton("확인", object : DialogInterface.OnClickListener{
override fun onClick(p0: DialogInterface?, p1: Int) {
Toast.makeText(baseContext, "확인 버튼 클릭!", Toast.LENGTH_SHORT).show()
}
})
이러한 형태로 구성되어있는 것을 볼 수 있습니다. 첫번째 인자는 버튼의 텍스트내용 "확인"(String)을 받고
두번째 인자로 object : DiallgInterface.OnclickListener(인터페이스 객체)를 받아 클릭판정시 동작할 부분을 onClick을 오버라이드 해주고 내부에서 구현하여줍니다.
클릭 판정이되면 자동으로 dialog가 종료되고 onClick 메서드 내부에있는 코드가 동작하게 됩니다.
negative, neutral 버튼도 완전히 동일하게 구성됩니다.
builder를 다 구성하였으면 .create()를 통해 생성해주고 return builder을 통하여 AlertDialog.Builder(builder)객체를 반환해줍니다.
onCreate()에서 호출
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val button = findViewById<Button>(R.id.btn)
button.setOnClickListener {
val builder = basicDialog()
builder.show()
}
}onCreate에서 btn이 클릭된다면 basicDialog를 통해여 AlertDialog.Builder 객체를 받아오고 show()를 통해 다이어로그를 보여주도록 구성하였습니다.
결과
가장 먼저 보여드린 것 처럼 버튼을 누르면 다이어로그가 생성되고 각 버튼을 클릭하면 해당 버튼을 눌렀다고 클릭판정이 정상적으로 동작하는 것을 볼 수 있습니다.
기본 리스트 다이얼로그 만들기
fun listDialog(): AlertDialog.Builder {
val builder = AlertDialog.Builder(this)
val color = arrayOf("빨강", "주황", "노랑", "초록", "파랑", "남색", "보라", "하얀")
builder.setTitle("리스트 다이어로그")
.setItems(color, object : DialogInterface.OnClickListener {
override fun onClick(p0: DialogInterface?, pos: Int) {
Toast.makeText(baseContext, "${color[pos]}", Toast.LENGTH_SHORT).show()
}
})
builder.create()
return builder
}위와 같이 setItems에 첫번째 인자로 Array를 넣어줌으로써 리스트를 보여주는 다이어로그를 만들 수 있습니다.
클릭리스너 또한 구현하여 클릭된 아이템을 출력하도록 만들었습니다.
결과
단일 선택 리스트(라디오 버튼) 다이어로그 만들기
fun radioButtonDialog(): AlertDialog.Builder{
val itemList = arrayOf("1번 아이템", "2번 아이템", "3번 아이템")
var checkedItem = 0
val builder = AlertDialog.Builder(this)
builder.setTitle("라디오 버튼 다이얼로그")
.setSingleChoiceItems(itemList, checkedItem, object : DialogInterface.OnClickListener{
override fun onClick(p0: DialogInterface?, pos: Int) {
checkedItem = pos
}
})
.setPositiveButton("선택한 아이템 출력", object : DialogInterface.OnClickListener{
override fun onClick(p0: DialogInterface?, p1: Int) {
Toast.makeText(baseContext, "${itemList[checkedItem]}", Toast.LENGTH_SHORT).show()
}
})
builder.create()
return builder
}setSingleChoiceItems를 이용하여 리스트 항목 중 단일 선택을 지원하는 라디오 버튼을 가진 다이어로그를 만들 수 있습니다.
첫번째 인자인 itemList에는 Array가 들어가고 두번째 인자인 checkedItem은 default로 설정할(기본적으로 체크되어 있는) 아이템의 위치를 설정해줍니다. 저는 checkedItem을 0으로 두어 기본적으로 가장 첫번째 아이템이 선택되게 해놓았으며 클릭시 해당 아이템의 위치를 저장하여 positive버튼이 눌릴 때 그 아이템을 출력할 수 있도록 만들었습니다. 세번째 인자는 마찬가지로 DIalogInterface.OnclickListener를 받아 아이템이 클릭되었을 때 동작할 소스 코드를 구현할 수 있습니다.
결과
다중 선택 리스트(체크 박스) 다이어로그 만들기
fun checkBoxDialog(): AlertDialog.Builder{
var itemList = arrayOf("1번 아이템", "2번 아이템", "3번 아이템", "4번 아이템", "5번 아이템")
var checkedItems = arrayListOf<String>()
val builder = AlertDialog.Builder(this)
builder.setTitle("체크박스 다이얼로그")
.setMultiChoiceItems(itemList, null, object : DialogInterface.OnMultiChoiceClickListener {
override fun onClick(dialog: DialogInterface, pos: Int, isChecked: Boolean) {
if(isChecked){
checkedItems.add(itemList[pos])
} else if(checkedItems.contains(itemList[pos])){
checkedItems.remove(itemList[pos])
}
}
})
.setPositiveButton("선택한 아이템들 출력", object : DialogInterface.OnClickListener{
override fun onClick(p0: DialogInterface?, p1: Int) {
Toast.makeText(baseContext, "${checkedItems}", Toast.LENGTH_SHORT).show()
}
})
builder.create()
return builder
}setMultiChoiceItems를 이용하여 다중 선택이 가능한 체크 박스 다이어로그를 만들 수 있습니다.
첫번째 인자로 아이템리스트가 담긴 Array를 받고 두번째 인자로는 booleanArray를 받아 미리 체크될 항목을 지정할 수 있지만 저는 모든 항목을 기본적으로 체크해제할 것이기 때문에 null을 사용하였습니다. 마지막 세번째 인자로는 위의 클릭리스너들과는 다르게 OnMultiChoiceClickListener를 받습니다. onClick()을 오버라이딩해서 확인해보면 함수의 안자가 하나 추가된 것을 확인할 수 있습니다. 체크여부를 판별하기위한 Boolean타입입니다. 저는 알아보기 쉽도록 isChecked로 이름을 지정해주었습니다.
onClick()에서 체크 박스 클릭판정을 구현하였습니다. 만약 클릭시 체크가 되었다면 checkedItems에 아이템을 넣어줍니다. 만약 이미 checkedItems에 그 아이템이 존재한다면 제거해줍니다.
결과
최근댓글