[안드로이드 스튜디오 정리#14] Data Binding

이 게시물은 다음 링크를 참조하여 학습했습니다.

데이터 결합 라이브러리  |  Android 개발자  |  Android Developers

코틀린 데이터 바인딩(Data binding)

Android in A..Z - DataBinding (양방향 데이터 바인딩)

이번 게시물은 데이터바인딩에 대한 내용이다.

1. 데이터 바인딩?

안드로이드에서 정의하는 데이터 바인딩은 "프로그래매틱 방식이 아니라 선언적 형식으로 레이아웃의 UI 구성요소를 앱의 데이터 소스와 결합할 수 있는 지원 라이브러리" 이다.

정의만 봤을 때는 어떤 의미인지 대강은 알겠지만 구체적으로는 감이 잘 잡히지 않았다.

 

뷰 바인딩을 배운 후라면 일반적으로 뷰에 어떤 값을 넣을 때 아래와 같이 넣어줬다.

binding.tv_test.setText("Hello World!")

근데 이걸 데이터 바인딩을 사용하면 액티비티가 아닌 xml 파일에서 아래와 같이 사용할 수 있다.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@{data.name}" />

이렇게 데이터 바인딩을 사용하게 되면 뷰와 관련된 작업을 액티비티에서 빼내고, 액티비티에서 로직만을 코딩할 수 있다.

 

데이터 바인딩은 뷰 바인딩의 역할 뿐만 아니라, 동적 UI 콘텐츠 선언, 양방향 데이터 바인딩 기능도 지원한다.

그럼 뷰 바인딩을 안쓰고 데이터 바인딩만 쓰면 되는게 아닌가 싶지만, 안드로이드 공식문서에서는 findViewByID()만을 목적으로 할 때는 뷰 바인딩을 쓰는걸 권장한다.

뷰 바인딩은 데이터 바인딩에 비하면 기능이 적지만 성능이 우수하다고 한다.

** 여기서 양방향 데이터 바인딩은 EditText, RadioButton 등 Data가 변하는 View에서 역으로 Data를 바인딩 하는 것이다.

2. 사용법

2-1. gradle 추가

모듈 수준 gradle( build.gradle(Module: 프로젝트명) )에서 다음 항목을 추가 시켜준다.

안드로이드 버전이 4.0 이상일 때

android {
    ...
    buildFeatures {
        dataBinding = true
    }
}

안드로이드 버전이 3.6 ~ 4.0 일때

android {
    ...
    dataBinding {
        enabled = true
    }
}

2-2. 레이아웃

데이터 바인딩을 할 때 레이아웃은 일반적으로 우리가 알던 레이아웃과는 조금 다르다.

<layout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto">
        <data>
            <variable
                name="viewmodel"
                type="com.myapp.data.ViewModel" />
        </data>
        <ConstraintLayout... /> <!-- UI layout's root element -->
    </layout>
    

1. 먼저, 최상단 태그에 <layout></layout>이 들어간다

2. 그 다음에 데이터 바인딩을 위한 <data></data>가 들어가고, <variable> 태그 안에 우리가 사용할 데이터의 이름과 타입을 지정해준다.

3. 그 다음에 우리가 사용할 뷰에 데이터를 다음과 같이 입력해주면 된다.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{data.name}" />
 
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{data.age}" />
    </LinearLayout>

데이터 바인딩의 수식 관련된 내용은 아래 링크에 잘 정리되어 있다.

레이아웃 및 결합 표현식  |  Android 개발자  |  Android Developers

2-3. 액티비티

데이터 바인딩 또한 뷰 바인딩과 이름 짓는 방법이 똑같다.

자동적으로 생성되는 클래스의 이름은 xml파일의 이름을 카멜 표기법으로 바꾸고 끝에 Binding을 붙힌 것과 같다.

예를 들어 레이아웃 파일 이름이 activity_main.xml일 때 다음과 같다.

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
 
        val binding: ActivityMainBinding = DataBindingUtil.setContentView(
                this, R.layout.activity_main)
 
        binding.user = User("Test", "User")
    }
 

위처럼 하거나 layoutInflater를 사용해서

    val binding: ActivityMainBinding = ActivityMainBinding.inflate(getLayoutInflater())
 
    

다음과 같이 사용할 수도 있다.

또한 ListView, RecyclerView의 어댑터나 Fragment에서 사용할 때, DataBinding 클래스 또는 DataBindingUtil 클래스의 inflate 메서드를 활용할 수도 있다.

    val listItemBinding = ListItemBinding.inflate(layoutInflater, viewGroup, false)
    // or
    val listItemBinding = DataBindingUtil.inflate(layoutInflater, R.layout.list_item, viewGroup, false)