[Android] Custom Dialog 띄우기 (Kotlin)

 

 

 

LayoutInflater 이해하기

 

다이얼로그를 만들다 보면 개발 툴에서 제공하지 않는, 개발자가 원하는 형태의 창을 구성하고 싶을 때가 있습니다. 이를 '커스텀 다이얼로그'라고 합니다. 커스텀 다이얼로그도 AlertDialog를 이용합니다.

 

커스텀 다이얼로그가 어떻게 만들어지는지 공부하기 전에 LayoutInflater라는 클래스를 이해해야 합니다. 이 클래스는 커스텀 다이얼로그뿐만 아니라 매우 다양한 곳에서 이용되므로 꼭 알고 있어야 합니다.

 

LayoutInflater(레이아웃 전개자) 클래스는 레이아웃 XML 파일을 코드에서 초기화(흔히 전개라고 표현)하는 기능을 제공합니다. 즉, XML 파일은 단순히 디자인 정보가 담긴 텍스트일 뿐이며, 결국 화면에서 보이려면 XML에 선언한 대로 실제 뷰 객체를 생성해서 메모리에 올려야 합니다. 그리고 이 작업을 LayoutInflater가 해줍니다.

 

 

 

Q. 화면 구성 시 setContentView() 함수를 사용하는 것과 LayoutInflater 객체를 사용하는 것의 차이?

 

A. 액티비티 XML 파일을 작성하면 setContentView() 함수에서 액티비티가 포함한 UI 구성요소들을 메모리에 할당하게 됩니다. 이 때 setContentView() 함수는 내부적으로 LayoutInflater 객체를 참조합니다.

 

이런 면에서 setContentView() 함수와 LayoutInflater의 기능은 같지만 사용하는 목적이 다릅니다. 액티비티 UI가 이미 생성된 이후에 추가적인 UI 요소들을 동적으로 생성해야할 경우에는 LayoutInflater 객체를 사용해야 합니다. 액티비티는 액티비티 객체가 생성될 때 액티비티 UI도 생성하므로 생성 시점이 명확한 반면, 언제 생성해야 할 지 정확한 시점을 알 수 없는 UI 요소들은 inflater로 동적 생성합니다.

 

즉, 액티비티의 화면을 구성하는 레이아웃 XML 파일이라면 LayoutInflater가 아니라 setContentView() 함수를 이용하면 됩니다. 하지만 커스텀 다이얼로그, 리스트 뷰, 리사이클러 뷰의 항목 화면, 프래그먼트를 위한 XML 파일 등 액티비티의 화면을 목적으로 하지 않는 레이아웃 XML 파일은 LayoutInflater를 이용합니다.

 

---

 

 

XML 파일 초기화하기

 

LayoutInflater로 레이아웃 XML 파일을 초기화하는 작업은 두 가지 방법이 있습니다. 뷰 바인딩을 사용하는 방법과 그렇지 않은 방법입니다. 먼저 뷰 바인딩을 사용하지 않고 XML 파일을 전개하는 방법입니다.

 

1. 뷰 바인딩을 사용하지 않은 XML 파일 초기화

// 뷰 바인딩을 사용하지 않은 XML 파일 초기화

val inflater = getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

val rootView = inflater.inflate(R.layout.activity_tmp, null)

 

우선 getSystemService() 함수로 LayoutInflater를 얻습니다. 그리고 inflate() 함수를 호출하면서 초기화할 레이아웃 XML 파일 정보를 매개변수로 전달합니다. 위 코드의 activity_tmp는 임의로 설정한 XML 파일 이름입니다.

 

inflate() 함수의 반환값은초기화된 XML의 루트 태그에 해당하는 객체입니다. 만약 XML 파일의 루트 태그가 <LinearLayout>이라면 LinearLayout 객체를 반환합니다.

 

 

 

2. 뷰 바인딩을 사용한 XML 파일 초기화

 

다음은 뷰 바인딩을 적용한 XML 파일 전개 방법입니다. 뷰 바인딩 기법을 이용한다면 XML 초기화 코드를 조금 더 간단하게 작성할 수 있습니다.

// 뷰 바인딩을 적용한 XML 파일 초기화

val binding = ActivityTmpBinding.inflate(layoutInflater)

val rootView = binding.root

 

초기화할 XML에 해당하는 바인딩 클래스의 inflate() 함수를 호출하면서 매개변수로 layoutInflater 객체를 전달만 해주면 알아서 초기화되고 루트 뷰 객체를 얻을 수 있습니다.

 

 

---

 

 

커스텀 다이얼로그 만들기

 

커스텀 다이얼로그를 만들기 위해서는 먼저 다이얼로그를 구성하는 레이아웃 XML 파일을 작성해야 합니다. res/layout 폴더에 dialog_custom.xml 파일을 다음처럼 작성했다고 가정하겠습니다.

// dialog_custom.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Input text" />
        
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="male" />
            
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="female" />
    </RadioGroup>
    
</LinearLayout>

 

 

 

이제 이 dialog_custom.xml 파일을 LayoutInflater로 초기화해서 다이얼로그에 적용하면 됩니다. AlertDialog의 setView() 함수에 매개변수로 해당 뷰 객체를 전달하면 창의 내용 영역에 출력됩니다.

// 커스텀 다이얼로그 출력

val dialogBinding = DialogCustomBinding.inflate(layoutInflater)

AlertDialog.Builder(this).run {
    setTitle("Custom Dialog")
    setView(dialogBinding.root)
    setPositiveButton("닫기", null)
    show()
}

 

 

출력 결과