[Android] DataBinding Code

xml에서 data태그를 사용하여 레이아웃 파일에서 직접 View에 텍스트를 할당하는 실습

DataBindingActivity

class DataBindingActivity : AppCompatActivity() {

    lateinit var binding : ActivityDatabindingBinding

    var test = "Test"
    var testInclude = "Include"
    private var count = 0
    private var includeCount = 0



    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_databinding) // 인스턴스 생성

        binding.apply {

            activity = this@DataBindingActivity // xml에서 정의한 data 이름 activity와 xml이어줌 레이아웃과 연결결

            btnChange.setOnClickListener {
                test = "Test ${++count}"
                testInclude = "Include ${++includeCount}"

                invalidateAll() // data가 변한 후 연결된 view들에 변화를 알려주는 함수, UI를 새로고침 하기 위해서 모든 바인딩 표현식을 무효화하고 새로운 리바인드를 요청
            }
        }
    }
}

activity_databinding.xml

<?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:bind="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="activity"
            type="com.example.jetpackapp.databinding.DataBindingActivity" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".databinding.DataBindingActivity">

        <!--뷰 모델 값을 대입하기 위해 @{} 사용 -->
        <TextView
            android:id="@+id/text_test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{activity.test}"
            app:layout_constraintBottom_toTopOf="@id/btn_change"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed" />

        <Button
            android:id="@+id/btn_change"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="+1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/text_test" />

        <!--bind를 통해 include layout에 선언된 변수에 현재 레이아웃에 있는 변수 전달-->
        <include
            android:id="@+id/include_layout"
            layout="@layout/include_databinding"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            bind:user="@{activity}" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

include_databinding.xml

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

    <data>
        <variable
            name="user"
            type="com.example.jetpackapp.databinding.DataBindingActivity" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/includeTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{user.testInclude}"
            android:textSize="30sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

🚩결과

버튼을 누르면 버튼 상단에 있는 Text와 화면 하단에 있는 Text가 변하는 것을 확인할 수 있다.
버튼 상단에 있는 Text는 xml에서 android:text="@{activity.test}" 로 선언하여 DataBindingActivity의 test라는 변수의 값이 변경될 때 마다 변하는 것이고,
화면 하단의 Include 또한 위와 같은 방식을 사용한 것이다. 다만 xml에서 다른 layout을 include하여 그 내부에서 변경되도록 한 것이다.

👉Next
LiveData에 대한 내용