안녕하세요, 반갑습니다!
다이얼로그(Dialog) 란 뭘까요?
먼저 지식백과에서는 어떻게 설명하고 있는지 봤습니다.
네, 이렇듯 다이얼로그(Dialog) 는 안드로이드/IOS 관계없이 사용자의 응답을 받기 위한 기능으로 쓰입니다.
그런데 대게 기본 라이브러리의 이 다이얼로그(Dialog) 를 자기의 입맛대로 바꿔서 사용합니다.
개발자가 원하는, 그리고 앱의 컨셉에 맞게 바꾸기 위해서인데요.
말이 필요 없을 것 같습니다.
바로 설명 하겠습니다.
다이얼로그(Dialog)
내 입맛대로 커스텀하기!
1. 커스텀 다이얼로그(Custom Dialog)로 사용할 코틀린 클래스 만들기
먼저 커스텀 다이얼로그(Custom Dialog)가 될 코틀린 클래스를 아래처럼 만들어 줍니다.
class CustomDialog(context: Context) { ①
private val dialog = Dialog(context) ②
fun myDig() { ③
dialog.show()
}
}
① 파라미터로 액티비티의 Context 를 전달 받습니다.
다이얼로그(Dialog)가 어떤 액티비티에서 나와야하는지 알려줘야하기 때문이죠.
②, 다이얼로그(Dialog) 에 context 를 넘겨 줍니다.
이제 액티비티에서 이 다이얼로그(Dialog) 를 호출하기 위해서는 ③ 함수를 호출 하면 됩니다.
하지만 이 상태로는 화면엔 아무것도 나오지 않습니다.
저희는 클래스 하나만 만들었기 때문인데요.
아래 처럼 코딩해주세요.
빨갛게 나오는건 모두 import 해주시면 됩니다.
fun MyDig() {
dialog.setContentView(R.layout.custom_dialog) ①
//Dialog 크기 설정
dialog.window!!.setLayout(WindowManager.LayoutParams.MATCH_PARENT,
WindowManager.LayoutParams.WRAP_CONTENT) ②
dialog.setCanceledOnTouchOutside(true) ③
dialog.setCancelable(true) ④
.
.
.
}
① setContentView() 가 있어야 비로소 이 클래스와 보여질 화면, 즉 레이아웃이 연결됩니다.
이 레이아웃은 잠시 후에 만들어 보겠습니다.
② 다이얼로그(Dialog)의 크기를 설정해 주는 코드입니다.
이 코드가 없다면 이쁜 모양이 아닌, 딱 내용이 있는 만큼만 나와요. 이렇게요.
③ 다이얼로그(Dialog) 영역 밖을 터치했을 때, 다이얼로그(Dialog)가 사라지도록 하는 부분입니다.
단, 다이얼로그(Dialog)가 작은 크기이고, 응답을 받아야 한다면 이 코드는 안하시는 게 좋습니다.
사용자가 자신도 모르게 터치하는 경우를 방지하기 위함입니다.
④ 취소가 가능하도록 하는 코드 입니다.
2. Dialog 의 Layout.xml 만들기
이제 보여줄 화면, Layout을 만들어 볼까요?
fun MyDig() {
dialog.setContentView(R.layout.custom_dialog)
.
.
.
}
위와 같이 R.layout.<파일 명> 으로 만들어 주시면 됩니다!
이 setContentView() 에 작성한 이름과 같아야 해요~!
저는 단순하게 만들어봤습니다.
3. 액티비티에서 커스텀 다이얼로그(Custom Dialog) 띄우기
띄우는 건 정말 간단합니다.
딱 2줄만 액티비티에 작성해주세요.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?)
.
.
.
val dialog = CustomDialog(this) ①
dialog.myDig() ②
}
}
① 커스텀 다이얼로그(Custom Dialog) 를 객체로 만들어줍니다.
② dialog.show() 가 있는 함수, myDig() 를 호출합니다.
4. 결과
그럼 짠! 이렇게 내 입맛대로 만든 다이얼로그를 띄우는데 성공했습니다!
 |
|
하지만, 띄우기만 해서는 의미가 없겠죠?
데이터를 주고 받을 수 있어야 합니다.
커스텀 다이얼로그에서 입력한 정보를 액티비티로 전달해보도록 하겠습니다.
4. 액티비티로 데이터 전달하기
다이얼로그(Dialog) 에서 어떤 액션을 취했는지 액티비티로 데이터를 전달하는 코드 입니다.
커스텀 다이얼로그(Custom Dalog) 클래스 입니다.
저는 데이터를 넘겨주는 방법으로 interface 를 사용했습니다.
fun MyDig() {
.
.
.
}
interface ButtonClickListener {
fun onClicked(myName: String)
}
private lateinit var onClickedListener: ButtonClickListener
fun setOnClickedListener(listener: ButtonClickListener) {
onClickedListener = listener
}
interface 는 CustomDialog(context: Context) 클래스 안에 정의 및 선언해주세요.
그리고 CustomDialog() 의 MyDig() 함수 안에 아래와 같이 코드를 넣어주세요.
fun MyDig() {
.
.
.
val edit = dialog.findViewById<EditText>(R.id.edit)
val btnDone = dialog.findViewById<Button>(R.id.btnDone) ①
val btnCancel = dialog.findViewById<Button>(R.id.btnCancel)
btnDone.setOnClickListener { ②
onClickedListener.onClicked(edit.text.toString()) ③
dialog.dismiss() ④
}
btnCancel.setOnClickListener {
dialog.dismiss()
}
.
.
.
}
① Layout.xml 의 각 View 아이디 입니다.
② '완료' 버튼의 setOnClickListener { } 입니다.
③ '완료' 버튼을 누르면 제가 만들어둔 interface 로 인해 editText 에 입력된 내용이 액티비티로 전달됩니다.
그리고 ④ 는 아무런 액션도 없이 다이얼로그(Dialog)를 사라지게 합니다.
5. 액티비티에서 데이터 받기
커스텀 다이얼로그 클래스에서 버튼을 클릭하게 되면 메인 액티비티에서는 받을 수 있는 준비를 해야 합니다.
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?)
.
.
.
dialog.myDig()
//다이얼로그에서 정의한 interface를 통해 데이터를 받아온다.
dialog.setOnClickedListener(object : CustomDialog.ButtonClickListener {
override fun onClicked(myName: String) {
result.text = myName
}
})
}
끝났습니다.
결과는 다음과 같습니다.
 |
 |
 |
 |
축하합니다!
내 입맛대로 만든 커스텀 다이얼로그(Custom Dialog)를 만들고 띄우는데 성공하셨습니다!
잘 만들어졌나요?
혹시 잘 따라오셨음에도 안되는 부분이 있거나, 제 글에 문제가 있다면 댓글을 남겨주세요!
감사합니다!