[android] 데이터 바인딩이나 커스텀 렌더링 구현

21 Dec 2023

android

안드로이드 앱을 개발하다 보면 데이터 바인딩이나 커스텀 렌더링을 구현해야 하는 경우가 많이 있습니다. 이번에는 데이터 바인딩과 커스텀 렌더링을 구현하는 방법에 대해 알아보겠습니다.

데이터 바인딩이란?

데이터 바인딩은 뷰와 모델을 바로 연결하여 코드를 통해 레이아웃의 구성요소를 쉽게 업데이트할 수 있게 해주는 기능입니다. XML 레이아웃 파일에서 바인딩 표현식을 사용하여 구성요소와 모델 속성을 연결하고, 뷰 모델 클래스를 사용하여 UI 컴포넌트에 라이브 데이터를 자동으로 바인딩할 수 있습니다.

데이터 바인딩 구현하기

데이터 바인딩 켜기

먼저 앱 수준의 build.gradle 파일에 다음과 같이 데이터 바인딩을 활성화합니다.
```
android {
    ...
    buildFeatures {
        dataBinding = true
    }
}
```

XML 레이아웃 파일에서 바인딩 사용

데이터 바인딩을 적용할 XML 레이아웃 파일에서 다음과 같이 레이아웃 태그 안에 <layout> 태그를 추가합니다.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.userName}" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Click"
            android:onClick="@{viewModel::onButtonClick}" />

    </LinearLayout>
</layout>

뷰 모델 생성

데이터바인딩을 위해 뷰 모델 클래스를 생성하고 해당 클래스를 레이아웃 파일에 연결합니다.

class MainViewModel : ViewModel() {
    val userName = MutableLiveData<String>()
       
    fun onButtonClick() {
        // 버튼 클릭시 동작 구현
    }
}

뷰와 뷰모델 바인딩

액티비티 또는 프래그먼트에서 뷰와 뷰 모델을 바인딩하여 화면에 표시합니다.

val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)
binding.viewModel = MainViewModel()
binding.lifecycleOwner = this

커스텀 렌더링이란?

커스텀 렌더링은 안드로이드의 기본 뷰나 레이아웃을 개선하거나 완전히 새로운 뷰나 레이아웃을 만들어 특정한 동작을 구현하는 것을 말합니다. 이를 통해 앱의 UI를 보다 유연하게 커스터마이징할 수 있습니다.

커스텀 렌더링 구현하기

커스텀 뷰 만들기

커스텀 뷰를 만들기 위해 뷰 클래스를 상속받아 새로운 뷰를 정의하고 필요에 따라 메서드나 속성을 오버라이드하여 동작을 구현합니다.
```
class CustomView : View {
    // 커스텀 뷰의 동작 구현
}
```
커스텀장 뷰 레이아웃 추가

커스텀 뷰를 사용하기 위해 XML 레이아웃에서 해당 뷰를 추가합니다.
```
<com.example.app.CustomView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
```
커스텀 속성 정의

필요에 따라 커스텀 속성을 정의하여 XML에서 해당 속성을 사용할 수 있도록 합니다.
```
<declare-styleable name="CustomView">
    <attr name="customAttribute" format="string" />
</declare-styleable>
```

안드로이드 앱에서 데이터 바인딩과 커스텀 렌더링을 구현하는 방법에 대해 간단히 알아보았습니다. 이러한 기능을 활용하여 앱의 UI를 보다 다채롭게 구성할 수 있습니다.

참고 자료: Android Developers - Data Binding