[Android] 다이얼로그 - Dialog

panax·2021년 8월 15일

android

Android

목록 보기

1/16

1. Dialog

다이얼로그는 사용자에게 정보를 보여주거나 추가 정보를 입력하기 위해 사용되는 작은 창입니다.

2. Dialog 클래스

다이얼로그를 사용하기 위해서는 다이얼로그 클래스를 사용해야 합니다.

Dialog

다이얼로그의 기본 클래스

Alert Dialog

Dialog 클래스를 상속하는 클래스.
제목, 최대 3개의 버튼 등을 표시할 수 있습니다.

DatePickerDialog

Alert Dialog 클래스를 상속하는 클래스
날짜를 선택할 때 사용합니다.

TimePickerDialog

Alert Dialog 클래스를 상속하는 클래스
시간을 선택할 때 사용합니다.

3. Alert Dialog

간단한 정보를 표시하거나 간단한 입력을 표시할 때 주로 사용하는 다이얼로그입니다.

val builder = AlertDialog.Builder(this)

builder.setTitle("제목")
	.setMessage("메시지")
    	.setPositiveButton("OK", { dialog, id -> })
        .setNegativeButton("Cancel", { dialog, id -> })

val dialog = builder.create()
dialog.show()

다이얼로그의 모든 요소는 필수가 아니기 때문에 필요하지 않은 요소는 추가하지 않아도 됩니다.
실제로 빌더 클래스를 생성하고 바로 create 메서드를 호출해도 실행에는 문제가 없습니다.

AlertDialog는 메시지와 3가지 목록 중 한 가지만 사용할 수 있습니다.
이는 간단한 정보를 표시하는데는 유용하지만 복잡한 형태를 표현할 때는 적합하지 않습니다.

4. Custom Dialog

Alert Dialog 보다 복잡한 다이얼로그를 만들려면 Dialog 클래스를 상속한 커스텀 다이얼로그가 필요합니다.

class CustomDialog(context: Context) : Dialog(context) {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContentView(R.layout.layout_dialog)
    }
}

Dialog 클래스를 상속받는 클래스를 만들고 onCreate 메소드에서 사용할 레이아웃을 setContentView 메서드로 설정하면 원하는 다이얼로그를 만들 수 있습니다.

버튼 등을 사용하려면 findViewById 메서드 또는 뷰 바인딩 등을 사용하시면 됩니다.

val dialog = CustomDialog(this)
dialog.show()

커스텀 다이얼로그는 다른 다이얼로그와 동일하게 사용하시면 됩니다.

5. 버튼 이벤트 추가

버튼 이벤트를 추가하고 이벤트 결과를 액티비티에 추가하기 위해서는 다음 방식을 사용할 수 있습니다.

class CustomDialog(context: Context) : Dialog(context) {

	private val listener: DialogListener = context as DialogListener

    	interface DialogListener {
        	fun onDialogPositiveClick(dialog: Dialog)
        	fun onDialogNegativeClick(dialog: Dialog)
    	}
    ...
}

다이얼로그에 클릭 이벤트에 대한 인터페이스를 만들고 context를 받도록 만듭니다.

class MainActivity : AppCompatActivity(), CustomDialog.DialogListener {

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

        val button = findViewById<Button>(R.id.button)

        button.setOnClickListener {
            val dialog = CustomDialog(this)
            dialog.show()

        }
    }

    override fun onDialogPositiveClick(dialog: Dialog) {
        Toast.makeText(this, "POS", Toast.LENGTH_SHORT).show()
    }

    override fun onDialogNegativeClick(dialog: Dialog) {
        Toast.makeText(this, "NEG", Toast.LENGTH_SHORT).show()
    }
}

다이얼로그를 호출할 액티비티에 위에서 만든 리스너를 설정합니다.
그리고 액티비티를 다이얼로그에 전달하면 버튼 이벤트를 사용할 수 있습니다.

6. Custom Dialog 크기 조절

Custom Dialog는 원하는 레이아웃을 표현할 수 있지만 레이아웃의 크기가 예상한 것과 다르게 표현됩니다.
이는 최상위 레이아웃의 크기를 match_parent하면 다이얼로그를 생성할 때 자동으로 wrap_content로 바꾸는 것이 원인으로 보입니다.

다이얼로그의 크기를 조절하는 방법은 3가지로, 이외에도 다른 방법들이 있을 것으로 생각됩니다.

크기 고정

match_parent 대신 200dp와 같은 고정된 값으로 크기를 설정하면 이에 맞게 다이얼로그가 표시됩니다.

하지만 이 방법은 화면 크기에 상관없이 고정된 크기로 만들기 때문에 가로, 세로 모드처럼 화면 크기가 변하는 경우 문제가 발생할 수 있습니다.

onStart

    override fun onStart() {
        super.onStart()

        val layoutParams = this.window?.attributes
        layoutParams?.height = WindowManager.LayoutParams.MATCH_PARENT
        layoutParams?.width = WindowManager.LayoutParams.MATCH_PARENT
        this.window?.attributes = layoutParams
    }

커스텀 다이얼로그의 onStart 메서드에서 레이아웃의 크기를 설정하면 다이얼로그의 크기를 바꿀 수 있습니다.
이 경우 레이아웃의 크기를 match_parent로 만들 수 있기 때문에 크기를 고정하는 방식보다는 안전합니다.

style

class CustomDialog(context: Context , @StyleRes themeResId: Int) : Dialog(context, themeResId)

먼저 다이얼로그의 스타일을 설정하기 위해 생성자에 스타일 Id를 입력할 수 있어야 합니다.

val dialog = CustomDialog(this, R.style.CustomDialogStyle)

그 다음 사용할 스타일을 입력하면 됩니다.

    <style name="CustomDialogStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="android:windowMinWidthMajor">60%</item>
        <item name="android:windowMinWidthMinor">60%</item>
    </style>