Kotlin의 MVVM 아키텍처의 간단한 예

이것은 Kotlin에서 모델-시도-모델(MVVM) 체계 구조를 어떻게 실현하는지 보여주는 아주 작고 간단한 예시 프로젝트입니다!
나는 많은 항목이 매우 간단하다고 생각한다. 심지어 많은 항목도 매우 간단하다!나는 확실히 여기에 단편을 추가했지만, 이것은 단지 나 개인이 그것들을 즐겨 사용하기 때문이다.세션을 사용하지 않으려면 MainFragment의 내용을 MainActivity에 추가하면 됩니다!
이 프로젝트에는 MainActivity,MainFragment,MainViewModel 및 DataModel만 포함됩니다.MainActivity는 텍스트와 단추가 포함된 MainFragment를 엽니다.이 단추를 누르면 DataModel에서 업데이트된 텍스트를 가져오고 LiveData를 사용하여 MainFragment에서 UI 업데이트를 터치합니다.

우리 시작합시다!

새 항목 만들기

빈 활동이 있는 새 안드로이드 스튜디오 프로젝트를 만들고 의존 항목(build.gradle 파일)으로 이동합니다.필요한 의존항을 추가합니다.

    def lifecycle_version = "2.2.0"
    def fragments_version = "1.2.5"

    // viewmodel
    implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"

    // fragments
    implementation "androidx.fragment:fragment-ktx:$fragments_version"

다음은 Android 설명서입니다.
ViewModels
Fragments
보기와 상호작용하는 코드를 작성하기 쉽기 때문에 보기 연결을 추가합니다.here에서 더 많은 정보를 얻을 수 있습니다.그러나 기본적으로findViewById () 를 사용해야 하는 필요성을 없애고 보기 연결을 사용하는 것이 추천하는 방법입니다. Kotlin 확장은 올해 이미 폐기되었기 때문입니다.

프로젝트 구조

프로젝트 구조의 이미지입니다.데이터와 관련된 모든 파일은 모델에 들어가야 하고, UI와 관련된 모든 파일은 보아야 하며, 모든viewmodel은viewmodel에 들어가야 한다.

main 이벤트를 추가합니다.kt 및 활성 mainxml

MainActivity를 추가하겠습니다. 다음은 레이아웃입니다!

package com.minjee.basicmvvmexample.view

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.add
import androidx.fragment.app.commit
import com.minjee.basicmvvmexample.R

/*
 *      MainActivity
 *      - opens our fragment which has the UI
 */
class MainActivity : AppCompatActivity(R.layout.activity_main) {

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

            // Adds our fragment
            supportFragmentManager.commit {
                setReorderingAllowed(true)
                add<MainFragment>(R.id.fragment_container_view)
            }
        }
    }
}

MainActivity는 기본적으로 우리의MainFragment만 엽니다.나는 세션을 사용하는 것을 좋아하기 때문에 만약 당신이 이렇게 하고 싶지 않다면, 보통 이벤트를 만들고, 우리가 MainFragment에서 작성한 코드를 MainActivity에 추가하면 됩니다.너는 약간의 변화를 필요로 할 수도 있지만, 기본적인 생각은 같다.

<!-- Has the fragment container view for displaying our fragment -->
<androidx.fragment.app.FragmentContainerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

여기는 조각을 보여주는 용기가 하나밖에 없어요.세션을 사용하지 않으려면 fragment main에서 작성한 내용을 추가하십시오.활성 main의 xml입니다.xml이 아니라너도 이곳에서 약간의 변화를 필요로 할 수 있지만, 기본적인 생각은 같다.

main 세션을 추가합니다.kt 및 fragment mainxml

다음에, 우리는 부분과 레이아웃을 추가합니다.

package com.minjee.basicmvvmexample.view

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import androidx.fragment.app.activityViewModels
import androidx.lifecycle.Observer
import com.minjee.basicmvvmexample.R
import com.minjee.basicmvvmexample.databinding.FragmentMainBinding
import com.minjee.basicmvvmexample.viewmodel.MainViewModel

/*
 *      MainFragment
 *      - shows the UI
 *      - listens to viewModel for updates on UI
 */
class MainFragment: Fragment() {

    // View Binding
    private var _binding: FragmentMainBinding? = null
    private val binding get() = _binding!!

    // Create a viewModel
    private val viewModel: MainViewModel by activityViewModels()

    override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        _binding = FragmentMainBinding.inflate(inflater, container, false)
        val view = binding.root
        return view
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        setupClickListeners()
        fragmentTextUpdateObserver()
    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }

    // Setup the button in our fragment to call getUpdatedText method in viewModel
    private fun setupClickListeners() {
        binding.fragmentButton.setOnClickListener { viewModel.getUpdatedText() }
    }

    // Observer is waiting for viewModel to update our UI
    private fun fragmentTextUpdateObserver() {
        viewModel.uiTextLiveData.observe(viewLifecycleOwner, Observer { updatedText ->
            binding.fragmentTextView.text = updatedText
        })
    }
}

지금 우리는 더 많은 코드가 생겼다.나는 그것을 더욱 쉽게 이해할 수 있도록 평론해 보았다.
우선 xml 레이아웃 대상을 쉽게 인용할 수 있도록 보기 연결을 진행합니다.그리고 우리는viewModel을 만들고 기본적인 세션 함수 (onCreateView (), onViewCreated (), onDestroyView () 가 있습니다.
우리가 추가한 첫 번째 코드는 setupClickListeners()입니다.여기서는 UI에서 단추에 대한 인용을 가져와viewModel의 함수를 사용하도록 설정하기만 하면 됩니다.MainFragment에는 UI 로직만 있어야 하기 때문입니다.MainFragment에서는 UI에 업데이트되는 데이터를 알 수 없습니다.이것은 단추를 눌렀을 때 텍스트가 업데이트되는 데만 관심을 가지고viewModel은 나머지 논리를 책임진다.
그리고 뷰 모델이 터치한 업데이트를 감청하는 관찰자가 있습니다.이 함수는 UI 텍스트를 실제로 업데이트하지만 삽입된 내용에는 영향을 주지 않습니다.그것은 업데이트를 해야 한다는 것만 안다.

<?xml version="1.0" encoding="utf-8"?>
<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/fragmentTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="You have just opened a fragment!"
        android:textSize="24sp"
        android:padding="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/fragmentButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Update text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/fragmentTextView" />
</androidx.constraintlayout.widget.ConstraintLayout>

이것은 단추와 텍스트 보기만 있는 간단한 xml 레이아웃입니다.

MainViewModel을 추가합니다.kt와 데이터 모델.kt

그리고 뷰모델이랑 모델을 추가할 수 있어요!

package com.minjee.basicmvvmexample.model

// Contains the data we want to show on UI (in MainFragment)
data class DataModel(val textForUI: String)

DataModel은 단순한 데이터 컨테이너 클래스로 문자열 값이 있으며 버튼을 클릭하면 UI에 표시됩니다.

package com.minjee.basicmvvmexample.viewmodel

import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import com.minjee.basicmvvmexample.model.DataModel

/*
 *      MainViewModel
 *      - viewModel that updates the MainFragment (the visible UI)
 *      - gets the data from model
 */
class MainViewModel: ViewModel() {

    // Create the model which contains data for our UI
    private val model = DataModel(textForUI = "Here's the updated text!")

    // Create MutableLiveData which MainFragment can subscribe to
    // When this data changes, it triggers the UI to do an update
    val uiTextLiveData = MutableLiveData<String>()

    // Get the updated text from our model and post the value to MainFragment
    fun getUpdatedText() {
        val updatedText = model.textForUI
        uiTextLiveData.postValue(updatedText)
    }
}

앞서 말씀드린 바와 같이viewModel은 UI 대상과 직접적인 관계가 없는 논리를 처리합니다.우선, 우리는 데이터 모델을 만들어서, 단추를 누르면 텍스트가 업데이트될 수 있도록 합니다.
다음에mainFragment에서 만든 관찰자의 업데이트를 터치하는 MutableLiveData를 추가합니다.GetUpdateText () 함수에서postValue () 를 호출하면 Observer를 터치하고MainFragment는 업데이트된 데이터로 UI 텍스트 요소를 업데이트할 수 있습니다.

요약

이렇게!my Github 에서 완전한 코드와 작업 항목을 찾을 수 있습니다.나는 이 블로그를 쓰고 GitHub에서 이 프로젝트를 만들고 싶다. 쉽게 복제될 수 있기 때문에 새로운 프로젝트를 시작할 때마다 처음부터 쓸 필요가 없다.) 너도 그 중에서 뭔가를 얻을 수 있기를 바란다.
만약 당신이 더 많은 강좌를 보고 싶다면, 나를 주목해 주세요!만약 당신이 내가 소프트웨어 개발자와 게임 애호가로서의 날에 대해 더 많은 것을 알고 싶다면, 또한 나의 인스타그램을 주목할 수 있습니다!