다이얼로그

• 기본 다이얼로그
• 커스텀 다이얼로그

 

이외에 시간 다이얼로그, 프로그래스바 다이얼로그도 있지만 이 경우는 특수하게 쓰이는 경우이고 자주 쓰이는 위의 두 가지를 오늘 집중적으로 포스팅 하려고 한다. (나중에 시간이 여유되면 다른 다이얼로그 내용도 추가할 예정이다!)

 

기본 다이얼로그

// DialogActivity.kt , 해당 코드는 버튼 이벤트 발생 내부 코드에 위치시키면 적절하다.
var builder = AlertDialog.Builder(this@DialogActivity)
builder.setTitle("저는 다이얼로그 제목입니다.")
builder.setMessage("저는 기본 다이얼로그를 출력하는 메세지입니다!")
builder.setIcon(R.drawable.ic_heart)

 

일단은 다이얼로그를 사용하려면 builder를 생성해야 한다.

builder는 AlertDialog 클래스의 Builder를 인자로 context를 받아와서 생성할 수 있다.

이후에는 해당 객체의 setTitle, setMessage, setIcon 메소드를 사용해 UI를 변경할 수 있다.

화면 출력

 

아직 설명은 안했는데 다이얼로그 화면에 보면 아래 3개의 문구가 보인다.

3가지 기본적으로 제공되는 버튼

기본 다이얼로그는 버튼을 기본적으로 3개 지원한다.

버튼이 눌렸을 때 어떻게 이벤트를 발생시킬까? 이를 위해서는 listener 객체를 만들어야 한다.

val listener = DialogInterface.OnClickListener { dialog, which ->
                when(which) {
                    DialogInterface.BUTTON_POSITIVE ->
                        binding.tvTitle.text = "Positive button is clicked!"

                    DialogInterface.BUTTON_NEGATIVE ->
                        binding.tvTitle.text = "Negative button is clicked!"

                    DialogInterface.BUTTON_NEUTRAL ->
                        binding.tvTitle.text="Neutral button is clicked!"
                }
            }

 

listener 는 DialogInterface의 onClickListener 에 대한 객체이다.

positive 버튼이 눌렸을 때, negative 버튼이 눌렸을 때, neutral 버튼이 눌렸을 때 원하는 이벤트를 처리해주면 된다.

(나는 따로 textView를 설정하여 해당 text 값이 변하도록 만들었다.)

 

builder.setPositiveButton("확인",listener)
builder.setNegativeButton("취소",listener)
builder.setNeutralButton("뒤로가기",listener)

builder.show()

 

이후 처음에 생성한 builder 객체에 2가지 인자를 넘기면 된다.

setPositiveButton에 대한 인자를 예로 들자면, 첫번째 인자에는 positivebutton의 텍스트를 무엇으로 지정할 것인지, 두번째는 해당 버튼이 눌렸을 때 이벤트(DialogInterface.onClickListener) 객체인 listener 을 넣어준다.

 

마지막으로는 builder.show() 를 꼭 넣어줘야 한다.

 

---

 

커스텀 다이얼로그

커스텀 다이얼로그는 아까처럼 기본 화면을 보여주는 것이 아니라 원하는 대로 커스텀 해서 다이얼로그 화면을 띄우는 것이다. 따라서 따로 xml 파일에다가 원하는 레이아웃을 만들어줘야한다.

val customView = layoutInflater.inflate(R.layout.customdialog,null)
builder.setView(customView)

 

builder는 아까와 동일한 방식으로 만들어주고, layoutInflater 을 통해서, 커스텀한 레이아웃을 받아오고

builder의 setView에다가 해당 뷰를 설정해주는 과정이 중요하다.

 

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

builder.show()

 

listener를 만들기 전에 그 아래 코드를 먼저 설명하는게 더 좋을 것 같아서 코드 순서를 바꿔봤다.

사실, builder.set ~~ Button 에서는 무조건 3가지 버튼을 넣을 필요는 없고, 원하는 버튼만 지정하면 화면에 해당 버튼만 출력된다. (위의 코드에서는 setNeutralButton 을 안써서 다이얼로그 화면에도 중립 버튼은 뜨지 않는다.)

 

코드 상으로는, PositiveButton 이 눌렸을 때만 listener 이벤트가 발생하도록 만들었다. (null 을 줄 경우에는 아무런 이벤트도 발생하지 않는다) 이제 이벤트를 발생시키는 listener 코드를 보자.

val listener = DialogInterface.OnClickListener { dialog, which ->
                val alert = dialog as AlertDialog
                val etName = alert.findViewById<EditText>(R.id.et_name)
                val etAge = alert.findViewById<EditText>(R.id.et_age)
                binding.tvTitle.text="이름: ${etName?.text}"
                binding.tvTitle.append("/나이: ${etAge?.text}")
}

 

아까 기본 다이얼로그에서는 when 문으로 Positive 버튼이 눌렸을 때, Negative 버튼이 눌렸을 때, Neutral 버튼이 눌렸을 때 분기를 나눠줬지만,  우리는 방금 전 코드를 봤듯이 PositiveButton이 눌렸을 떄만 listener 을 넣어줘서 분기를 나누지 않는다. 즉, positiveButton이 눌렸을 때의 이벤트 코드를 작성하면 된다.

 

사실 해당 코드가 교육(부트캠프)자료를 참고해서 잘 이해가 가지 않는데,

커스텀한 customDialog의 값을 가져와서 다이얼로그 액티비티 화면에 그 값을 뿌려주는 코드를 설명한 것이다.

binding을 한번 더 쓰면 하나의 중괄호 내에 두개의 바인딩이 들어가서 보기 힘드니 findViewById를 써준 것일까?

왜 alert 를 통해서 가져오는 것일까?

이 부분은 아직 잘 이해를 못했고 일단 저렇게 써주면 커스텀 다이얼로그 앱이 정상적으로 작동한다! (자료를 더 찾아보고 이해가 되면 이 부분은 글을 수정하겠다)