3. 간단한 Viewmodel 따라하기

https://medium.com/androiddevelopers/viewmodels-a-simple-example-ed5ac416317e

ViewModels : A Simple Example

이 페이지의 예제를 내식대로 따라해 보기로 하자.

​

데이터 바인딩의 기초와 위의 예제를 합친내용!

​

1. 환경 구축

build.gradle에 다음과 같이 추가해 준다.

 

android {
    ...
    //바인딩을 위함
    dataBinding {
        enabled = true
    }
}

dependencies {
    //라이브사이클 버전
    def lifecycle_version = "2.0.0"
    //Viewmodel and LiveData
    implementation "androidx.lifecycle:lifecycle-extensions:$lifecycle_version" 
    ...
}

 

2. Viewmodel 클래스 만들기

Wjviewmodel.kt

 

class Wjviewmodel : ObservableViewModel() {
    val scorewj = ObservableInt(0)
    val scorehj = ObservableInt(0)

    fun forhj(){
        scorehj.set(scorehj.get() + 1) //.increment() //이건 확장함수고? 이거보고 따라했다
    }
    fun forwj(){
        scorewj.increment()
    }
}
private fun ObservableInt.increment() {
    set(get() + 1)
}

 

여기서 obsevableviewmodel은 데이터 바인딩

​

/**
 * A ViewModel that is also an Observable, to be used with Data Binding.
 */
open class ObservableViewModel : ViewModel(), Observable {

    private val callbacks: PropertyChangeRegistry = PropertyChangeRegistry()

    override fun addOnPropertyChangedCallback(callback: Observable.OnPropertyChangedCallback) {
        callbacks.add(callback)
    }

    override fun removeOnPropertyChangedCallback(callback: Observable.OnPropertyChangedCallback) {
        callbacks.remove(callback)
    }

    /**
     * Notifies listeners that all properties of this instance have changed.
     */
    fun notifyChange() {
        callbacks.notifyCallbacks(this, 0, null)
    }

    /**
     * Notifies listeners that a specific property has changed. The getter for the property
     * that changes should be marked with [Bindable] to generate a field in
     * `BR` to be used as `fieldId`.
     *
     * @param fieldId The generated BR id for the Bindable field.
     */
    fun notifyPropertyChanged(fieldId: Int) {
        callbacks.notifyCallbacks(this, fieldId, null)
    }
}

위의 코드는 Viewmodel을 extend하는 클래스로 observable을 데이터바인딩과 쓸때 사용한다.

​

3. 레이아웃 설정하기

activity_main.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:tools="http://schemas.android.com/tools"
   >
    <data>
        <variable
            name="wjmodel"
            type="com.example.wjviemodelsimple.Wjviewmodel" />
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toStartOf="@id/textView2"
            app:layout_constraintBottom_toTopOf="@id/button"
           android:text="@{Integer.toString(wjmodel.scorehj)}"/>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/textView"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/button2"
            android:text="@{Integer.toString(wjmodel.scorewj)}"
            />


        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView"
            app:layout_constraintEnd_toStartOf="@id/button2"
            android:text="hj에게 1점"
            android:onClick="@{()->wjmodel.forhj()}"/>


        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/button"
            app:layout_constraintTop_toBottomOf="@+id/textView2"
            android:text="wj에게 1점"
            android:onClick="@{()->wjmodel.forwj()}"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

※여기서 엄청 오래걸렸는데 int형식의 데이터를 데이터바인딩을 통해 text로 보여주려면 다음과 같은 형식을 따라야 한다.

android:text="@{Integer.toString(wjmodel.scorehj)}"

여기서 <data/>를 사용하면 databing이된 class가 자동적으로 생성되므로 나처럼 먼저 activity에서 바인딩된 클래스를 찾느라 고생하지말자..

.

4.엑티비티(UI 컨트롤러)만들기

MainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //뷰모델과 연결해주기
        val viewModel = ViewModelProviders.of(this).get(Wjviewmodel::class.java)

        //데이터 바인딩
        val binding : ActivityMainBinding = DataBindingUtil.setContentView(this,R.layout.activity_main)

        //바인딩 레이아웃과 뷰모델 사용
        binding.wjmodel = viewModel
    }

}

위와 같이 설정해주면 끝

​

​

5. 결과