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

1. 데이터 바인딩
   1-1. 데이터 바인딩이란?
   1-2. 데이터 바인딩 vs 뷰 바인딩
2. 사용법
   2-1. gradle 추가
   2-2. 액티비티
   2-3. 레이아웃 파일

 

 

 

---

 

 

1. 데이터 바인딩

1-1. 데이터 바인딩이란?

// findViewById 쓸때는 이렇게 했었고
textView.text = "안녕" 

// 뷰 바인딩 쓸때는 이렇게 했다.
binding.textView.text = "안녕"

여태까지 우리는 텍스트 뷰에 문장을 넣기 위해 코드상에서 값을 집어넣는 작업을 해주었다.

 

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

근데 이걸 xml에 코드를 집어넣어서 해결하는 방법이 있다.

이렇게 하면 자연스레 액티비티에는 로직만을 위한 코드만 남게 되고 뷰와 관련된 작업은 레이아웃 파일에 정의된다.

데이터와 뷰를 연결하는 작업을 레이아웃에서 처리하는 기술,

이것을 우리는 데이터 바인딩이라고 부른다.

 

1-2. 데이터 바인딩 vs 뷰 바인딩

아래 내용은 stackoverflow의 글 Difference between DataBinding and ViewBinding을 참고하였다.

뷰 바인딩에 대한 내용은 여기에 포스팅 하였다.

ViewBinding과 DataBinding의 관계

 

그림에서 알 수 있듯이, 데이터 바인딩은 뷰 바인딩의 역할도 할 수 있을뿐더러

추가로 동적 UI 콘텐츠 선언, 양방향 데이터 결합도 지원한다.

땡! 데이터 바인딩이 기능은 다양하지만

뷰 바인딩이 상대적으로 간단하며 퍼포먼스 효율이 좋고 용량이 절약된다는 장점이 있다.

실제로 구글 공식문서에서는 단순히 findViewById를 대체하기 위한 거라면, 뷰 바인딩을 사용할 것을 권장하고 있다.

그러니 상황에 맞게 바인딩을 골라 사용하면 된다.

 

 

2. 사용법

아래 내용들은 Android Developer 공식문서와 슬기로운 코딩생활님 채널을 참고하였다.

2-1. gradle 추가

// 안드로이드 스튜디오 4.0 이상
android {
    ...
    buildFeatures {
        dataBinding = true
    }
}

// 안드로이드 스튜디오 3.6 ~ 4.0
android {
    ...
    dataBinding {
        enabled true
    }
}

 

2-2. 액티비티

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        binding.user = UserProfile("지은", "이")
    }
}

데이터 바인딩도 뷰 바인딩과 크게 다를 게 없다.

firstName과 lastName을 저장하는 UserProfile 클래스를 만들어 이름을 저장해주었다.

 

2-3. 레이아웃

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    
    <data>
        <variable
            name=""
            type="" />
    </data>
    
    // 여기에 뷰를 넣어준다.
</layout>

데이터 바인딩을 사용하기 위해서 우리가 기존에 알던 레이아웃 구조를 좀 바꾸어야 한다.

<layout> 태그가 가장 바깥쪽에 위치해있으며 그 안에 <data> 태그와 우리가 사용하던 레이아웃이 들어가는 형태이다.

 

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">
    <data>
        <variable
            name="user"
            type="com.example.selfstudy_kotlin.UserProfile" />
    </data>

    <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="@{user.firstName}" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@{user.lastName}" />
    </LinearLayout>
</layout>

실제 사용 예시이다.

<data>태그 안에 있는 <variable>는 데이터와 뷰를 연결하는 태그이다.

type에 연결하고 싶은 데이터가 있는 경로를 적어주고 name에 사용할 이름을 정해주면 된다.

 

예를 들어, 위 소스의 경우 'user'를 통해 'UserProfile'의 데이터에 접근이 가능하다.

변수를 사용할 때는 '@{}' 구문 안에 넣어주면 된다.

firstName에 접근하고 싶다면 @{user.firstName} 이런 식으로 말이다.

 

사실 viewModel, LiveData와 많이 쓰이는데, 그건 다음 포스팅에서 다룰 예정이다.

 

@{} 구문 안에는 다음과 같이 간단한 식을 넣을 수도 있다.

@{(userProfile.gender == UserProfile.GENDER_MALE) ? "남성" : "여성"}

하지만 이 표현식은 단위 테스트가 불가능하고 IDE 지원이 제한적이기 때문에 아주 간단한 식을 사용하기에 적절하다.

 

사용 가능한 표현식의 종류는 이곳에서 확인할 수 있다.

 

 

---

그 외 참고한 개발세끼님 블로그. 감사합니다. :D