🔎 View Binding이란

뷰와 상호작용하는 코드를 쉽게 작성할 수 있게 해주는 기능.
모듈에서 뷰 바인딩을 활성화하면 해당 모듈에 있는 각 XML 레이아웃 파일에 대해 바인딩 클래스를 생성함.
바인딩 클래스의 인스턴스는 해당 레이아웃의 ID가 있는 모든 뷰에 대한 직접적인 참조를 포함.
뷰 바인딩은 findViewById를 대체함.

• 설정
  모듈에서 뷰 바인딩을 활성화하려면 모듈 수준의 build.gradle 파일에서 viewBinding 옵션을 true로 설정.

android {
    ...
    buildFeatures {
        viewBinding = true
    }
}

레이아웃 파일의 바인딩 클래스를 생성하고 싶지 않은 경우 tools:viewBindingIgnore="true" 를 추가해야 함.

<LinearLayout
        ...
        tools:viewBindingIgnore="true" >
    ...
</LinearLayout>

📝 사용법

각 바인딩 클래스에는 루트 뷰와 ID가 있는 모든 뷰에 대한 참조가 포함됨.
바인딩클래스의 이름은 XML 파일의 이름을 파스칼 케이스로 변환하고, "Binding"이라는 단어를 뒤에 추가하여 생성됨.

result_profile.xml 이라는 레이아웃 파일이 있는 경우

<LinearLayout ... >
    <TextView android:id="@+id/name" />
    <ImageView android:cropToPadding="true" />
    <Button android:id="@+id/button"
        android:background="@drawable/rounded_button" />
</LinearLayout>

생성된 바인딩 클래스명은 ResultProfileBinding.

위의 코드에서 ImageView는 id를 가지고 있지 않으므로 바인딩 클래스에서 이를 참조하지 않음.

바인딩 클래스는 해당 레이아웃 파일의 루트뷰를 참조할 수 있는 getRoot() 라는 메서드를 가지고 있음.
👉 ResultProfileBinding 클래스에서는 getRoot() 메서드가 LinearLayout 루트 뷰를 반환하게 됨.

액티비티에서 뷰 바인딩 사용

액티비티에서 바인딩 클래스의 인스턴스를 설정하기 위해 onCreate() 메서드에서 다음을 수행함.

1. 생성된 바인딩 클래스에 포함된 정적 inflate() 메서드를 호출.
   👉 액티비티에서 사용할 바인딩 클래스의 인스턴스가 생성됨.

2. 루트 뷰에 대한 참조를 얻기 위해 getRoot()를 호출하거나 코틀린 프로퍼티 구문을 사용.

3. 루트 뷰를 setContentView()에 전달하여 화면에서 활성 뷰로 만듦.

private lateinit var binding: ResultProfileBinding

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ResultProfileBinding.inflate(layoutInflater)
    val view = binding.root
    setContentView(view)
}

4. 바인딩 클래스 인스턴스를 사용

binding.name.text = viewModel.name
binding.button.setOnClickListener { viewModel.userClicked() }

프래그먼트에서 뷰 바인딩 사용

프래그먼트에서 바인딩 클래스의 인스턴스를 설정하기 위해 onCreateView() 메서드에서 다음을 수행.

1. 생성된 바인딩 클래스에 포함된 정적 inflate() 메서드를 호출.
   👉 프래그먼트에서 사용할 바인딩 클래스의 인스턴스가 생성됨.

2. 루트 뷰에 대한 참조를 얻기 위해 getRoot()를 호출하거나 코틀린 프로퍼티 구문을 사용.

3. 루트 뷰를 onCreateView()메서드에 반환하여 화면에서 활성 뷰로 만듦.

private var _binding: ResultProfileBinding? = null
// This property is only valid between onCreateView and
// onDestroyView.
private val binding get() = _binding!!

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    _binding = ResultProfileBinding.inflate(inflater, container, false)
    val view = binding.root
    return view
}

override fun onDestroyView() {
    super.onDestroyView()
    _binding = null
}

4. 바인딩 클래스 인스턴스를 사용

binding.name.text = viewModel.name
binding.button.setOnClickListener { viewModel.userClicked() }

프래그먼트는 뷰보다 오래 살아남음. 따라서 프래그먼트의 onDestroyView()에서 바인딩 클래스 인스턴스에 대한 모든 참조를 정리해야 함. (가비지 컬렉터가 메모리를 회수하려 해도 binding이 레퍼런스를 가지고 있어 회수하지 못해 메모리 누수 발생)

---

📝 tools:viewBindingType 속성

# 세로모드 xml
# in res/layout/example.xml

<TextView android:id="@+id/user_bio" />

# 가로모드 xml
# in res/layout-land/example.xml

<EditText android:id="@+id/user_bio" />

TextView가 TextView와 EditText의 공통 상위 클래스이므로 TextView타입을 가진 userBio 필드를 노출시킬 것으로 기대하지만, 기술적 제약으로 인해 뷰 바인딩 코드 생성기는 결정을 내릴 수 없어 View 타입 필드를 생성함.

따라서 binding.userBio as TextView와 같이 캐스팅 해야 함.

문제를 해결하기 위해 tools:viewBindingType 속성 지원. 이를 사용하여 컴파일러에게 생성된 코드에서 사용할 타입을 알려줄 수 있음.

# in res/layout/example.xml (unchanged)

<TextView android:id="@+id/user_bio" />

# in res/layout-land/example.xml

<EditText android:id="@+id/user_bio" tools:viewBindingType="TextView" />

• 또 다른 예시

# in res/layout/navigation_example.xml

<BottomNavigationView android:id="@+id/navigation" tools:viewBindingType="NavigationBarView" />

# in res/layout-w720/navigation_example.xml

<NavigationRailView android:id="@+id/navigation" tools:viewBindingType="NavigationBarView" />

하나는 BottomNavigationView를 포함하고 다른 하나는 NavigationRailView를 포함하는 두 개의 레이아웃이 있는 경우, 두 클래스는 NavigationBarView를 확장함.

현재 레이아웃에 어떤 하위 클래스가 있는지 정확히 알 필요가 없을 경우 tools:viewBindingType을 사용하여 두 레이아웃에서 생성된 유형을 NavigationBarView로 설정.

❗ tools:viewBindingType 사용 시 주의점

1. 값이 android.view.View를 상속한 클래스여야 함.
2. 값은 해당 태그의 상위 클래스여야 함.

동작하지 않는 코드

  <TextView tools:viewBindingType="ImageView" /> <!-- ImageView is not related to TextView. -->
  <TextView tools:viewBindingType="Button" /> <!-- Button is not a superclass of TextView. -->

---

📝 findViewById와의 차이점

• findViewById 사용 보다 좋은 점

1. Null safety
   뷰 바인딩은 뷰에 직접적으로 참조하기 때문에 잘못된 뷰 id로 인한 널 포인터 예외의 위험이 없음.

2. Type safety
   바인딩 클래스의 각 필드는 xml 파일에서 참조하는 뷰와 일치하는 형식을 가짐.
   👉 클래스 캐스트 예외의 위험이 없다는 것을 의미.

📝 Data binding과의 차이점

view binding과 data binding은 모두 뷰를 직접 참조하는 데 사용할 수 있는 바인딩 클래스를 생성.

1. data binding 보다 좋은 점

• 빠른 컴파일: 뷰 바인딩은 annotation processing이 필요 없으므로 컴파일 시간이 빨라짐.
• 사용 편의성: 특별한 태그가 있는 XML 레이아웃 파일이 필요하지 않으므로 사용이 용이하며 모듈에서 한번 활성화 시키면 해당 모듈의 모든 레이아웃에 적용됨.

2. 제한 사항

• layout variables or layout expressions를 지원하지 않아 XML 레이아웃 파일의 동적 UI 컨텐츠를 선언하는데 이용 불가.
• Two-way binding을 지원하지 않음.

프로젝트에 따라서 view binding과 data binding을 모두 사용하는 것이 가장 좋을 수 있음.

데이터 바인딩은 고급 기능을 필요로 하는 레이아웃에 사용하고, 뷰 바인딩은 그렇게 않은 레이아웃에 사용.