코틀린 커스텀 다이얼로그

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. 액티비티로 데이터 전달하기

다이얼로그(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
        }
    })
}