data binding 실습 (단 방향, 양 방향 통신)

뷰바인딩에 대해서는 알고 있었지만 디자인 패턴에 대해 공부하다 보니 데이터 바인딩이라는 것을 알게되었다.

특히 데이터 바인딩에서 연결한다음,

실시간으로 변화를 감지하여 데이터가 전달이 되는 것을 실습해보기로 했다. 

 

build.gradle 에서 데이터 바인딩 사용 설정

    dataBinding {
        enabled = true
    }

MainActivity.kt

package com.dofury.pratice
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import com.dofury.pratice.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var viewModel: MyViewModel
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        viewModel = MyViewModel()

        binding.viewModel = viewModel
        binding.lifecycleOwner = this


        binding.baboButton.setOnClickListener {
            binding.tvText.text = "바보"
        }
    }
}

MyViewModel.kt

package com.dofury.pratice

import androidx.databinding.ObservableField
import androidx.lifecycle.ViewModel

class MyViewModel : ViewModel() {
    val text = ObservableField<String>()
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <data>
        <import type="android.view.View"/>
        <variable
            name="viewModel"
            type="com.dofury.pratice.MyViewModel" />
    </data>

    <LinearLayout
        android:orientation="vertical"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text='@={viewModel.text}'/>

        <EditText
            android:id ="@+id/et_text"
            android:text="@={viewModel.text}"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:id="@+id/baboButton"
            android:text="babo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>
</layout>

EditText를 수정할시 TextView내용도 같이 수정되는것을 목표로 했다.

또한 완벽한 양방향 통신을 확인하기 위해 버튼을 누를 시 TextView내용이 변하게 하였다.

 

결과