[안드로이드] DataBinding 으로 TextView 업데이트 하기

기존에 xml에서 특정 뷰에 대한 접근을 위해서는 다음과 같이 findViewById 함수를 사용했습니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        val btn = findViewById<Button>(R.id.testBtnId)

        btn.setOnClickListener {
            Toast.makeText(this, "clicked", Toast.LENGTH_LONG).show()
        }
    }
}

 

하지만 xml의 특정 View를 계속 findViewById로 가져오게 되면 코드가 불필요하게 길어지게 될것입니다.

 

또한 자주 갱신되는 값을 화면에 뿌려야하는 경우에도 번거롭지 않을 수가 없습니다.

 

DataBinding은 xml과 데이터간의 연결을 만들어 위와같은 단점을 보완할 수 있게 합니다.

---

1. DataBinding 사용 준비

DataBinding을 사용하기 위해서 먼저 Gradle Scripts에서 bulild.gradle(Module: ...) 이라고 되어있는 파일을 열어줍니다.

 

그리고 android 부분을 다음과 같이 수정해줍니다.

 

android {
    
    ...
    
    dataBinding {
        enabled true
    }
}

 

그리고 아래와 같은 메시지가 위에 떴다면 Sync Now를 눌러줍니다.

 

2. Counter 클래스 생성 및 작성

이제 버튼을 몇번 눌렀는지를 화면에 나타내는 앱을 만들어보겠습니다.

 

버튼을 몇번 눌렀는지를 기억하는 객체를 만들기 위해 Counter.kt를 생성해주고 다음과 같이 작성해주었습니다.

package com.example.databinding_ex

class Counter (var clickCount: Int) {
    fun plusClkCount(newCount: Int) {
        this.clickCount += newCount
    }
}

 

3. xml에 바인딩을 활용한 코드 작성

데이터 바인딩을 위해서 바인딩을 하게되는 화면에 어떤 데이터를 사용할지 정의해야합니다.

 

먼저 기본적인 layout을 만들어준 다음, data 안에 variable을 만들어주고 다음과 같이 작성합니다.

 

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="counter"
            type="com.example.databinding_ex.Counter" />
    </data>
   
    ...
    
</layout>

 

이제 버튼을 누르면 counter 안에 있는 clickCount가 바뀌어 TextView에 적용되는 화면을 작성해야합니다.

 

TextView의 android:text에 '@{}'를 사용하여 counter.clickCount를 넣어주어야합니다.

 

이때 android:text는 String형이기 때문에 바로 Int값을 넣어주면 앱이 정상적으로 작동하지 않습니다.

 

따라서 Integer.toString 메서드를 사용하여 문자열로 바꾸고 넣어줍니다.

 

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="counter"
            type="com.example.databinding_ex.Counter" />
    </data>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context=".MainActivity"
        android:orientation="vertical">

        <TextView
            android:textSize="50sp"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="@{Integer.toString(counter.clickCount)}">

        </TextView>

        <Button
            android:id="@+id/testBtnId"
            android:text="btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </Button>
    </LinearLayout>
</layout>

그럼 다음과 같은 화면이 완성됩니다.

 

 

 

4. MainActivity에 DataBinding 관련 코드 작성

onCreate가 실행되지 전에 먼저 바인딩을 만들어줘야합니다. 따라서 onCreate 위에 바인딩을 만들어줍니다.

 

package com.example.databinding_ex

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.databinding_ex.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

		...
    }
}

 

이제 앱이 시작되었을 때, 사용할 바인딩에 contentView를 설정해주어야합니다.

 

onCreate에 원래 작성되어있었던 setContentView 다음에 작성해야함을 주의하세요.

 

그리고 counter 객체를 생성해 주겠습니다.

 

package com.example.databinding_ex

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.example.databinding_ex.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        
        val counter = Counter(0)
    }
}

 

이제 binding에서 xml에 작성한 버튼의 id를 찾은다음 OnClickListener를 설정해주겠습니다.

 

counter의 필드가 변경될때마다 binding.counter(xml의 data>variable에 작성한 name 값)에 Counter 객체를 할당하도록 해야합니다.

 

package com.example.databinding_ex

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.example.databinding_ex.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        val counter = Counter(0)

        binding.testBtnId.setOnClickListener {
            counter.plusClkCount(1)
            binding.counter = counter
        }
    }
}

 

버튼을 누르면 TextView의 text에 버튼을 누른 횟수가 표기되는 앱이 완성되었습니다.