[안드로이드] LiveData Component 예제코드(feat MVVM,Recycler View)

버튼을 누르면 livedata의 값이 변경되면서 리사이클러뷰 의 아이템 추가

 

안녕하세요 오늘은 안드로이드 AAC 중 LiveData Component 에 대해서 공부해보려구 합니다 ! 

 

LiveData 란 data의 변화를 감지할 수 있는 Data Holder 클래스 이고 일반적인 Observable 와는 다르게 생명주기를 알고 있다는 것이 특징입니다 !

 

위에 이미지는 버튼을 누르면 LiveData 값이 바뀌고 LiveData 값이 바뀌면 그것을 감지하여 리사이클러뷰 아이템을 추가하는 이미지 입니다 ! 

예제코드에서는 LiveData 뿐만 아니라 MVVM 과 RecyclerView 도 함께 사용합니다! 

 

LiveData에 대한 자세한 설명은 코드와 함께 설명하겠습니다

 

activity_main.xml

 

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <data>
        <variable
            name="model"
            type="com.example.mvvmproject.MainViewModel" />
    </data>

<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:id="@+id/rcv"
        app:layout_constraintTop_toTopOf="parent"/>

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="데이터 생성!!"
        android:layout_marginTop="20dp"
        android:id="@+id/btn"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/rcv"/>
</androidx.constraintlayout.widget.ConstraintLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </LinearLayout>

</LinearLayout>
</layout>

 

MainViewModel.kt

 

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

class MainViewModel : ViewModel() {


    var listItem = MutableLiveData<String>()

    var i = 1
    fun create (){
        listItem.value = (i++).toString()
    }
}

 

 

MVVM 패턴으로 안드로이드 개발 할때 LiveData Component는 ViewModel 에 만들고 사용하는것이 일반적입니다 

MutableLiveData 는 수정 가능한 LiveData를 의미합니다 값이 변경되는 경우에는 그냥 LiveData 가 아닌 MutableLiveData를 사용합니다!

 

그리고 나서 아래에 create() 메소드는 버튼을 눌렀을때 호출되는 메소드로 LiveData에 값을 i에 따라 변화시켜줍니다 ! 

 

코틀린에서 LiveData 의 값은 value입니다 

즉

listItem.value = "jason" 이라고 하면 LiveData 의 값이 jason으로 바뀌는것입니다

 

MainActivity.kt

model 은 ViewModel

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.databinding.DataBindingUtil
import androidx.lifecycle.Observer
import androidx.lifecycle.ViewModelProvider
import androidx.recyclerview.widget.LinearLayoutManager
import com.example.mvvmproject.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    lateinit var model : MainViewModel

    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

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

        model = ViewModelProvider(this).get(MainViewModel::class.java)

        binding.model = model


        var adapter = Adapter(ArrayList())

        binding.rcv.layoutManager = LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false)

        binding.rcv.adapter = adapter
        binding.btn.setOnClickListener {
                model.create()
        }
        model.listItem.observe(this , Observer {
            adapter.resetting(model.listItem.value!!)
        })

    }
}

 

여기서 데이터 바인딩 과 ViewModel 을 연결시켜주고 리사이클러뷰 도 연결시켜줍니다 !

 

그리고 버튼이 클릭 할 때 ViewModel 에 있는 create() 메소드가 실행 되게 클릭 리스너 안에 create() 를 호출합니다 

호출 하면 ViewModel 에 있는 LiveData의 값이 변경됩니다! 

 

그리고 여기서 중요한 것 ! 

 

model.listItem.observe(this,Observer{

      값이 변경되면 감지해서 해당 부분이 실행이 됨

..} 부분 입니다. 

 

LiveData 는 Observer 패턴을 기반으로 만든 Component입니다 그래서 data의 값이 변화 될때 그것을 감지 할 수 있고 observe 메소드 역시 감지 하는 메소드 입니다 Rx 를 알고 계시는 분들에게는 익숙하실 겁니다 ! 

 

저는 Observer{} 안에 adapter.resetting(model.listItem.value!!) 를 해서 리사이클러뷰 에 바뀐 데이터를 추가하고 리사이클러뷰에서 새로 추가된 데이터가 리사이클러뷰 에 나타나게 했습니다 ! 

 

Adapter.kt

 

import android.view.ViewGroup
import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class Adapter(var list : ArrayList<String>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        var view = View.inflate(parent.context, R.layout.item,null)
        return ViewHolder(view)
    }

    override fun getItemCount(): Int {
        return list.size
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        (holder as ViewHolder) .textView.text = list.get(position)
    }


    fun resetting(msg : String){
        list.add(msg)
        notifyDataSetChanged()
    }
    inner class ViewHolder(view : View) : RecyclerView.ViewHolder(view){
        var textView : TextView

        init {
            textView = view.findViewById(R.id.text)
        }
    }
}

 

이렇게 LiveData Component 를 사용하는 방법에 대해서 예제코드로 간단하게 공부해보았습니다 ! 

 

오늘 공부한 것을  활용하고 이용하여 더 LiveData Component 를 사용해보고 공부해보는것을 추천합니다 ^^

 

예제 코드는 아래에 깃헙 주소 를 들어가시면 다운받으실 수 있습니다 

 

github.com/jaeilssss/LiveDataExample

jaeilssss/LiveDataExample