[Kotlin][Android] 커스텀 다이얼로그 빠르게 만들기

이번 포스팅에선 코틀린으로 커스텀 다이얼로그를 만드는 방법에 대해 포스팅하겠습니다.

자바로 만드는 방법에 대해선 아래 포스팅을 참고해 주세요.

stickode.tistory.com/14

[Java][Android] 내 입맛대로 다이얼로그 커스텀하기

 

이 포스팅에서 사용된 모든 예제 코드는 아래 주소에서 확인하실 수 있습니다.

stickode.com/detail.html?no=2147

스틱코드

 

먼저 메인 액티비티의 xml을 만들겠습니다. 텍스트뷰 하나를 놓을 건데, 다이얼로그에서 이름을 입력하고 완료 버튼을 누르면 입력한 문자가 텍스트뷰에 들어가도록 할 겁니다.

<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"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이름이 무엇인가요?"
        android:textSize="25sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

그 다음 다이얼로그의 xml을 만들어줍니다. 여기서 만든 모양대로 다이얼로그가 만들어지게 됩니다.

저는 EditText와 버튼 2개가 있는 형태의 다이얼로그를 만들겠습니다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <EditText
        android:id="@+id/name_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:hint="여기에 이름을 입력해 주세요"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:layout_marginEnd="20dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/cancel_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="취소"/>

        <Button
            android:id="@+id/finish_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="완료"/>

    </LinearLayout>

</LinearLayout>

이제 이 xml을 사용하는 다이얼로그 코틀린 파일을 만들어줘야 합니다.

클릭 리스너를 정의하고 버튼별 클릭 리스너를 정의해줍니다.

import android.app.Dialog
import android.content.Context
import android.view.WindowManager
import android.widget.EditText
import kotlinx.android.synthetic.main.custom_dialog.*

class CustomDialog(context: Context)
{
    private val dialog = Dialog(context)
    private lateinit var onClickListener: OnDialogClickListener

    fun setOnClickListener(listener: OnDialogClickListener)
    {
        onClickListener = listener
    }

    fun showDialog()
    {
        dialog.setContentView(R.layout.custom_dialog)
        dialog.window!!.setLayout(WindowManager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT)
        dialog.setCanceledOnTouchOutside(true)
        dialog.setCancelable(true)
        dialog.show()

        val edit_name = dialog.findViewById<EditText>(R.id.name_edit)

        dialog.cancel_button.setOnClickListener {
            dialog.dismiss()
        }

        dialog.finish_button.setOnClickListener {
            onClickListener.onClicked(edit_name.text.toString())
            dialog.dismiss()
        }

    }

    interface OnDialogClickListener
    {
        fun onClicked(name: String)
    }

}

이제 메인 액티비티 파일을 작성해야 합니다. 지금 이 상태로 앱을 빌드하면 텍스트뷰가 화면에 보이는데, 이걸 눌러도 아무 반응도 없습니다.

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity()
{
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        textview.setOnClickListener {
            val dialog = CustomDialog(this)
            dialog.showDialog()
            dialog.setOnClickListener(object : CustomDialog.OnDialogClickListener {
                override fun onClicked(name: String)
                {
                    textview.text = name
                }

            })
        }
    }
}

다이얼로그 코틀린 파일에서 만든 인터페이스를 액티비티에서 사용해서, 다이얼로그에서 입력한 내용을 메인 액티비티의 텍스트뷰에 setText()하는 간단한 코드입니다.

 

여기까지 완성했다면 빌드해서 확인해 봅시다.

다이얼로그에서 입력한 내용이 액티비티의 텍스트뷰에 잘 들어가는 걸 볼 수 있습니다.