[Android] 양방향 DataBinding

ViewModel & DataBinding

 

이전의 DataBinding은 앱의 뷰와 간접적으로 연결을 하고 있었습니다.

이제는 DataBinding을 View Model에 직접적으로 연결 할것입니다.

 

 

package com.anushka.viewmodeldemo1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import androidx.lifecycle.Observer
import androidx.lifecycle.ViewModelProvider
import com.anushka.viewmodeldemo1.databinding.ActivityMainBinding

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

        binding.myViewModel = viewModel
        
        viewModel.count.observe(this, Observer {
        	binding.countText.text = it.toString()
        })
    }
}

 

 

이런식으로 작성을 한다면 MainActivity의 onclicklistener 코드 부분을 제거할 수 있습니다.

 

이것이 DataBinding과 함께 onClickListener와 같은 이벤트 리스너를 사용하는 방법입니다.

 

LiveData & DataBinding

 

이번에는 LiveData의 observer 코드 부분을 제거할 것입니다.

 

 

지금 사용하고있는 것은 Int값입니다.

텍스트에 숫자를 표시하려면 int값을 String값으로 변환해야 합니다. 따라서 String.valueOf를 사용했습니다.

 

 

이제 MainActivity에 Viewmodel 객체에 실제 생명 주기 소유자를 제공해야합니다.

 

package com.anushka.viewmodeldemo1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import androidx.lifecycle.Observer
import androidx.lifecycle.ViewModelProvider
import com.anushka.viewmodeldemo1.databinding.ActivityMainBinding

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

        binding.lifecycleOwner = this

        binding.myViewModel = viewModel

    }
}

 

이제 Observer 부분은 필요하지 않습니다.

 

 

양방향 DataBinding

객체의 값이 변경되면 UI가 변경되고 UI가 변경되면 값이 변경됩니다. 변경 사항은 양방향으로 자동 업데이트됩니다.

 

MainViewModel

package com.example.twowaydemo1

import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel

class MainActivityViewModel : ViewModel() {

    val userName = MutableLiveData<String>()

    init {
        userName.value = "홍길동"
    }
}

 

레이아웃 파일

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

    <data>

        <variable
            name="viewModel"
            type="com.example.twowaydemo1.MainActivityViewModel" />
    </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">

        <EditText
            android:id="@+id/editText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:textSize="40sp"
            android:text="@={viewModel.userName}"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.294" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.userName}"
            android:textSize="40sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

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

 

EditText의 @{} 사이에 = 를 추가 하게되면 이것이 양방향 DataBinding이 동작하는 방식입니다.

 

MainActivity

package com.example.twowaydemo1

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import androidx.lifecycle.ViewModelProvider
import com.example.twowaydemo1.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding : ActivityMainBinding
    private lateinit var viewModel: MainActivityViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        viewModel = ViewModelProvider(this)[MainActivityViewModel::class.java]

        binding.viewModel = viewModel
        binding.lifecycleOwner = this
    }
}

 

 

 

변경되는 것을 확인할 수 있습니다.