[Day15] Andoroid - Kotlin笔记： MVVM简介

MVVM由三项组成。
分别为(Model、View、ViewModel)

先来上MVVM架构图，方便下文介绍
文末会附上简单例子讲解。

View

• View就是使用者看到的页面，
  xml以及我们负责显示xml数据的Activity和Fragment都属於View层。

ViewModel

• ViewModel负责接收View的需求，
  撰写逻辑与处理耗时工程，
  并向Model读出或写入资料。

• ViewModel的生命周期：
  使用一个空的Fragment来进行生命周期管理。
  生命周期会与View共存，但和View互不影响。
  (更准确地来说，Activity在前台被销毁时，得到的是同个ViewModel，
  Activity在後台被销毁时，就会是重建的ViewModel)
  详细介绍可以看这里

LiveData

• 简单来说可以把它想成一个live(活着)的data。
  LiveData能够动态侦测到Data的改变。

• 因为ViewModel是处理逻辑的地方，
  我们会把LiveData写在ViewModel中。

• 在ViewModel跑完逻辑後，会将结果写入LiveData。
  这时在View层，能够透过LiveData的observe，
  来取得更改後的资料，更新UI。

简单举例：

在登入页面按下登入按钮回到首页，首页要能判别状态为已登入，并展示使用者名称。

流程是这样走的：
资料以LoginResult这个Data Class做范例：

1. Model层：

@JsonClass(generateAdapter = true)
data class LoginResult(

    @Json(name = "token")
    val token: Long,

    @Json(name = "userName")
    val userName: String? = null,

}

2. View 层 (activity or fragment)

点击事件触发login的API，
call API这行为跟介面无关，是耗时流程，
因此会写在ViewModel。

  fun initOnClick() {

      btn_login.setOnClickListener {
          viewModel.login()
      }

  }

同时在View层，透过观测LiveData，
我们会接收已经拿到资料的loginResult，
在View层展示使用者的名字。
(View只做和UI有关的事)

  fun initObserver() {
        //activity用this, fragment用viewLifecycleOwner
        viewModel.loginResult.observe(this, { result ->
            tv_name.text = result.name
        })

  }

注：

• viewLifecycleOwner是和onCreateView()、onDestroyView()绑在一起。
• this则是与onCreate()、onDestroy()整个生命周期相关，会存活更久一些。

3. ViewModel 层

    val loginResult: LiveData<LoginResult>
        get() = _loginResult

    fun login(account: String, password: String) {

        //送出post request的api参数
        val loginRequest = LoginRequest(
            account = account,
            password = password,
        )
        
        viewModelScope.launch {
            doNetwork(androidContext) {
              //这边做api逻辑，根据专案用volley、retrofit、okhttp，写法会不同
              //後面章节会再带到call api的部分。
                callLoginApi(loginRequest)
            }?.let { result ->

                //使用`postValue`来更新LiveData
                _loginResult.postValue(result)
            }
        })
    }