[안드로이드] Databinding(데이터 바인딩)

이전에 LiveData에 대해 정리하면서 나중에 dataBinding과 MVVM, Room 등을 정리한다고 했었다. 그래서 이번에는 dataBinding에 대해 포스팅을 할 것이다.

dataBinding은 무엇인가

안드로이드 개발 문서에 따르면 데이터 바인딩은 레이아웃의 UI 구성요소를 앱의 데이터 소스와 결합할 수 있도록 지원하는 라이브러리라고 나와있다. 내가 봐도 조금 어려운 문장들이어서 쉽게 풀어서 설명해보겠다.
안드로이드 개발을 할 때 xml 파일로 view를 만들어주고 java나 kotlin으로 Activity를 만들어준다. 그리고 Activity와 view를 연결해주는 작업을 하게 된다. 아래와 같이 말이다.

val _btnLogin : Button = findViewById(R.id.main_btn_login)

하지만 Activity에서 view에 직접적으로 접근할 수 있다면, Activity에 view를 binding 시켜준다면, 모든 변수를 위의 예시와 같이 넣어야 할 필요가 없어진다. 그리고 그것을 가능하게 해주는 것이 바로 dataBinding인 것이다.

기존에 개발하는 방식과 무엇이 다른가

• Activity에서 view의 변수를 선언해주는 방법
• ButterKnife를 사용하여 개발하는 방법

위 2가지는 기존에 주로 사용하던 방식이다. 첫 번째인 view의 변수를 선언해주는 방법은 dataBinding이 무엇인지에 대하여 설명할 때 작성했던 방법이다.

val _btnLogin : Button = findViewById(R.id.main_btn_login)

간단한 변수 선언과 findViewById를 통하여 Id값으로 View를 찾으면 되는 간단한 방법이다. 하지만 view가 10개 혹은 극단적으로 20개 이상이 된다면 저렇게 선언해줘야 하는 변수도 계속 많아 진다는 것을 의미한다. 내가 아무것도 모를 때 그래서 아는데 완전싫다.....

두번째 방법인 ButterKnife를 활용해서 view와 Activity의 콜라보를 살펴보자.

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); } @OnClick(R.id.main_btn_login) void onLogin(){ // Login Action }

첫 번째 방법과 비교하면, 따로 변수를 선언하여 findViewById를 해줄 필요가 없다. 그리고 dataBinding과 비슷하게 Activity에 view를 bind 시켜서 사용해준다. 그치만 난 최신 트렌드를 따라가고 싶고, ButterKnife보다는 dataBinding이 트렌디 하기때문에 ButterKnife를 과감히 버릴것이다. 미안하다 버터나이프야!

databinding을 사용하는 간단한 예시

1. dataBinding 사용 설정

먼저 app 수준의 build.gradle에 들어가서 dataBinding 사용 설정을 해준다.

dataBinding{ // 이 부분을 android 태그 안에 추가해주세요 enabled = true }

Java로 dataBinding을 설정하면 아래 태그만 작성해주면 되지만, kotlin에서는 추가 작업이 필요하다.

apply plugin: 'kotlin-kapt' ... dependencies{ ... kapt 'com.android.databinding:compiler:4.0.2' }

2. 사용예제

view를 먼저 설정해보겠다. dataBinding을 사용하고자 하는 xml에 들어가서 최상단의 layout위에 아래 코드를 집어넣었다.나는 예제를 만들어 주었기 때문에 activity_main.xml에 넣어주었다.

<?xml version="1.0" encoding="utf-8"?> <layout> <data> <variable name="activity" type="kr.uni.bindingtest.MainActivity" /> </data> <androidx.constraintlayout.widget.ConstraintLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/main_show_text_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="SHOW" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/main_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Binding Test" android:textAlignment="center" android:textSize="25sp" android:visibility="gone" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> </layout>

view를 설정해줬으면 이제 Activity 차례이다. MainActivity.kt로 가서 Activity에 view를 아래와 같이 바인딩 하자.

class MainActivity : AppCompatActivity() { lateinit var binding: ActivityMainBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = DataBindingUtil.setContentView(this, R.layout.activity_main) } } binding.mainShowTextBtn.setOnClickListener { }

이런식으로 접근이 가능하다. 사실상 ButterKnife와 많이 비슷하다. 하지만!! 나는 트렌드를 따라가고 싶으니까 dataBinding을 사용할거다.

3. 간단한 프로그램 예제

사용예제를 보았으니 TextView의 Visibility가 INVISIBLE일 때 버튼을 누르면 Visibility가 VISIBLE이 되고 VISIBLE일 때 INVISIBLE이 되는 프로그램을 만들어 보았다.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <layout> <data> <variable name="activity" type="kr.uni.bindingtest.MainActivity" /> </data> <androidx.constraintlayout.widget.ConstraintLayout 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" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/main_show_text_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="@{activity::showText}" android:text="SHOW" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/main_text" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Binding Test" android:textAlignment="center" android:textSize="25sp" android:visibility="invisible" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> </layout>

여기서 한 가지 짚고 넘어가면 Button View에서 android:onClick="@{activity::showText}" 를 넣어주었다.
이것이 무엇을 의미하는 것이냐면, 최상단 layout -> data 태그 안에 variable에 activity라는 이름으로 MainActivity를 넣어주어 MainActivity에 접근할 때 activity라는 이름을 쓰겠습니다~라고 해두었다. 그리고 MainActivity에 정의해둔 showText라는 fun에 버튼을 클릭할 떄 접근하겠습니다~라고 해둔것이다.
좀 더 자세히 설명하면@{variable에 선언한 변수명 :: 함수명}과 같이 onClick에 접근을 해 주어야 하는 것이다.

MainActivity.kt

class MainActivity : AppCompatActivity() { lateinit var binding: ActivityMainBinding override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) binding = DataBindingUtil.setContentView(this, R.layout.activity_main) binding.activity = this@MainActivity } fun showText(view: View) { binding.mainText.visibility = if (binding.mainText.visibility == View.VISIBLE) { View.GONE } else { View.VISIBLE } } } 

결과
아주 잘나온다. 흐뭇

---

MVVM과 Room으로 가는 험난한 과정 중 첫 단추인 dataBinding이다. 완전 생기초를 했고, 앞으로 더더욱 공부해서 다음 포스팅을 얼른 올려야겠다. 화이팅~

2021년 12월 7일 추가
뭐지 viewBinding인 것 같은데 누가봐도….. 난 왜 저런걸 dataBinding이라고 해둔 걸까…..? 완전 뭐랄까 좀 그니까 그래….. 그럴 수 있지 그때는 내가 뭘 모르고 막 열의에 가득차서 글을 싸지르기 바빴으니까…

나중에 좀 바꿔야겠다. 아무래도 내가 좀 착각했던 것 같다.