【Android】MVI架构快速入门：从双向绑定到单向数据流

客官°小女子只卖身不卖艺 2022-11-21 11:18 503阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center]

--------------------

现在从事Android开发的，多少都要懂点架构知识，从MVC、MVP再到MVVM，想必大家对于其各自的优缺点早已如数家珍。今天介绍的MVI与MVVM非常接近，可以更针对性地解决一些MVVM中解决不了的问题

# 何为MVI？ #

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center 1]  
MVI即Model-View-Intent，它受Cycle.js前端框架的启发，提倡一种单向数据流的设计思想，非常适合数据驱动型的UI展示项目：

*  Model:  
    与其他MVVM中的Model不同的是，MVI的Model主要指UI状态（State）。当前界面展示的内容无非就是UI状态的一个快照：例如数据加载过程、控件位置等都是一种UI状态
 *  View:  
    与其他MVX中的View一致，可能是一个Activity、Fragment或者任意UI承载单元。MVI中的View通过订阅Intent的变化实现界面刷新（不是Activity的Intent、后面介绍）
 *  Intent:  
    此Intent不是Activity的Intent，用户的任何操作都被包装成Intent后发送给Model进行数据请求

# 单向数据流 #

--------------------

用户操作以Intent的形式通知Model => Model基于Intent更新State => View接收到State变化刷新UI。数据永远在一个环形结构中单向流动，不能反向流动：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center 2]  
这种单向数据流结构的MVI有什么优缺点呢？

*  优点
    
     *  UI的所有变化来自State，所以只需聚焦State，架构更简单、易于调试
     *  数据单向流动，很容易对状态变化进行跟踪和回溯
     *  state实例都是不可变的，确保线程安全
     *  UI只是反应State的变化，没有额外逻辑，可以被轻松替换或复用
 *  缺点
    
     *  所有的操作最终都会转换成State，所以当复杂页面的State容易膨胀
     *  state是不变的，每当state需要更新时都要创建新对象替代老对象，这会带来一定内存开销
     *  有些事件类的UI变化不适合用state描述，例如弹出一个toast或者snackbar

talk is cheap, show me the code，我们通过一个Sample看一下如何快速搭建一个MVI架构的项目。

# 代码示例 #

--------------------

代码结构如下：  
![202010312038457.png][]  
Sample中的依赖库

// Added Dependencies
    implementation "androidx.recyclerview:recyclerview:1.1.0"
    implementation 'android.arch.lifecycle:extensions:1.1.1'
    implementation 'androidx.lifecycle:lifecycle-viewmodel-ktx:2.2.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.2.0'
    implementation 'com.github.bumptech.glide:glide:4.11.0'
    
    //retrofit
    implementation 'com.squareup.retrofit2:retrofit:2.8.1'
    implementation "com.squareup.retrofit2:converter-moshi:2.6.2"
    
    //Coroutine
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.6"
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.6"

代码中使用以下API进行请求

https://reqres.in/api/users

将得到结果:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center 3]

## 1. 数据层 ##

### 1.1 User ###

定义`User`的data class

package com.my.mvi.data.model
    
    data class User(
        @Json(name = "id")
        val id: Int = 0,
        @Json(name = "first_name")
        val name: String = "",
        @Json(name = "email")
        val email: String = "",
        @Json(name = "avator")
        val avator: String = ""
    )

### 1.2 ApiService ###

定义ApiService，`getUsers`方法进行数据请求

package com.my.mvi.data.api
    
    interface ApiService { 
    
       @GET("users")
       suspend fun getUsers(): List<User>
    }

### 1.3 Retrofit ###

创建Retrofit实例

object RetrofitBuilder { 
    
        private const val BASE_URL = "https://reqres.in/api/user/1"
    
        private fun getRetrofit() = Retrofit.Builder()
            .baseUrl(BASE_URL)
            .addConverterFactory(MoshiConverterFactory.create())
            .build()
    
    
        val apiService: ApiService = getRetrofit().create(ApiService::class.java)
    
    }

### 1.4 Repository ###

定义Repository，封装API请求的具体实现

package com.my.mvi.data.repository
    
    class MainRepository(private val apiService: ApiService) { 
    
        suspend fun getUsers() = apiService.getUsers()
    
    }

## 2. UI层 ##

Model定义完毕后，开始定义UI层，包括View、ViewModel以及Intent的定义

### 2.1 RecyclerView.Adapter ###

首先，需要一个RecyclerView来呈现列表结果，定义MainAdapter如下：

package com.my.mvi.ui.main.adapter
    
    class MainAdapter(
        private val users: ArrayList<User>
    ) : RecyclerView.Adapter<MainAdapter.DataViewHolder>() { 
    
        class DataViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { 
            fun bind(user: User) { 
                itemView.textViewUserName.text = user.name
                itemView.textViewUserEmail.text = user.email
                Glide.with(itemView.imageViewAvatar.context)
                    .load(user.avatar)
                    .into(itemView.imageViewAvatar)
            }
        }
    
        override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
            DataViewHolder(
                LayoutInflater.from(parent.context).inflate(
                    R.layout.item_layout, parent,
                    false
                )
            )
    
        override fun getItemCount(): Int = users.size
    
        override fun onBindViewHolder(holder: DataViewHolder, position: Int) =
            holder.bind(users[position])
    
        fun addData(list: List<User>) { 
            users.addAll(list)
        }
    
    }

item\_layout.xml

<?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" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="60dp">
    
        <ImageView android:id="@+id/imageViewAvatar" android:layout_width="60dp" android:layout_height="0dp" android:padding="4dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
    
        <androidx.appcompat.widget.AppCompatTextView android:id="@+id/textViewUserName" style="@style/TextAppearance.AppCompat.Large" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="4dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toEndOf="@+id/imageViewAvatar" app:layout_constraintTop_toTopOf="parent"/>
    
        <androidx.appcompat.widget.AppCompatTextView android:id="@+id/textViewUserEmail" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="@+id/textViewUserName" app:layout_constraintTop_toBottomOf="@+id/textViewUserName" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

### 2.2 Intent ###

定义Intent用来包装用户Action

package com.my.mvi.ui.main.intent
    
    sealed class MainIntent { 
    
        object FetchUser : MainIntent()
    
    }

### 2.3 State ###

定义UI层的State结构体

sealed class MainState { 
    
        object Idle : MainState()
        object Loading : MainState()
        data class Users(val user: List<User>) : MainState()
        data class Error(val error: String?) : MainState()
    
    }

### 2.4 ViewModel ###

ViewModel是MVI的核心，存放和管理State，同时接受Intent并进行数据请求

package com.my.mvi.ui.main.viewmodel
    
    class MainViewModel(
        private val repository: MainRepository
    ) : ViewModel() { 
    
        val userIntent = Channel<MainIntent>(Channel.UNLIMITED)
        private val _state = MutableStateFlow<MainState>(MainState.Idle)
        val state: StateFlow<MainState>
            get() = _state
    
        init { 
            handleIntent()
        }
    
        private fun handleIntent() { 
            viewModelScope.launch { 
                userIntent.consumeAsFlow().collect { 
                    when (it) { 
                        is MainIntent.FetchUser -> fetchUser()
                    }
                }
            }
        }
    
        private fun fetchUser() { 
            viewModelScope.launch { 
                _state.value = MainState.Loading
                _state.value = try { 
                    MainState.Users(repository.getUsers())
                } catch (e: Exception) { 
                    MainState.Error(e.localizedMessage)
                }
            }
        }
    }

我们在`handleIntent`中订阅`userIntent`并根据Action类型执行相应操作。本case中当出现`FetchUser`的Action时，调用`fetchUser`方法请求用户数据。用户数据返回后，会更新State，`MainActivity`订阅此State并刷新界面。

### 2.5 ViewModelFactory ###

构造ViewModel需要Repository，所以通过ViewModelFactory注入必要的依赖

class ViewModelFactory(private val apiService: ApiService) : ViewModelProvider.Factory { 
    
        override fun <T : ViewModel?> create(modelClass: Class<T>): T { 
            if (modelClass.isAssignableFrom(MainViewModel::class.java)) { 
                return MainViewModel(MainRepository(apiService)) as T
            }
            throw IllegalArgumentException("Unknown class name")
        }
    
    }

2.6 定义MainActivity

package com.my.mvi.ui.main.view
    
    class MainActivity : AppCompatActivity() { 
    
        private lateinit var mainViewModel: MainViewModel
        private var adapter = MainAdapter(arrayListOf())
    
        override fun onCreate(savedInstanceState: Bundle?) { 
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            setupUI()
            setupViewModel()
            observeViewModel()
            setupClicks()
        }
    
        private fun setupClicks() { 
            buttonFetchUser.setOnClickListener { 
                lifecycleScope.launch { 
                    mainViewModel.userIntent.send(MainIntent.FetchUser)
                }
            }
        }
    
    
        private fun setupUI() { 
            recyclerView.layoutManager = LinearLayoutManager(this)
            recyclerView.run { 
                addItemDecoration(
                    DividerItemDecoration(
                        recyclerView.context,
                        (recyclerView.layoutManager as LinearLayoutManager).orientation
                    )
                )
            }
            recyclerView.adapter = adapter
        }
    
    
        private fun setupViewModel() { 
            mainViewModel = ViewModelProviders.of(
                this,
                ViewModelFactory(
                    ApiHelperImpl(
                        RetrofitBuilder.apiService
                    )
                )
            ).get(MainViewModel::class.java)
        }
    
        private fun observeViewModel() { 
            lifecycleScope.launch { 
                mainViewModel.state.collect { 
                    when (it) { 
                        is MainState.Idle -> { 
    
                        }
                        is MainState.Loading -> { 
                            buttonFetchUser.visibility = View.GONE
                            progressBar.visibility = View.VISIBLE
                        }
    
                        is MainState.Users -> { 
                            progressBar.visibility = View.GONE
                            buttonFetchUser.visibility = View.GONE
                            renderList(it.user)
                        }
                        is MainState.Error -> { 
                            progressBar.visibility = View.GONE
                            buttonFetchUser.visibility = View.VISIBLE
                            Toast.makeText(this@MainActivity, it.error, Toast.LENGTH_LONG).show()
                        }
                    }
                }
            }
        }
    
        private fun renderList(users: List<User>) { 
            recyclerView.visibility = View.VISIBLE
            users.let {  listOfUsers -> listOfUsers.let {  adapter.addData(it) } }
            adapter.notifyDataSetChanged()
        }
    }

MainActivity中订阅`mainViewModel.state`，根据State处理各种UI显示和刷新。

activity\_main.xml:

<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".ui.main.view.MainActivity">
    
        <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="gone" />
    
        <ProgressBar android:id="@+id/progressBar" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" android:visibility="gone" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
    
        <Button android:id="@+id/buttonFetchUser" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/fetch_user" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

如上，一个完整的MVI项目完成了。

# 最后 #

--------------------

MVI在MVVM的基础上，规定了数据的单向流动和状态的不可变性，这类似于前端的Redux思想，非常适合UI展示类的场景。MVVM也好，MVI也好都不是架构的最终形态，世界上没有完美的架构，要根据项目情况选择适合的架构进行开发。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/45440e0ac2474194b0971e751b4b60e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/252fecc25e4a439daca9dee2ff034595.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/f7f63adf336b40b1ba338f190f66c593.png
[202010312038457.png]: /images/20221120/320cb607a6c048258fa8700c10b42ea4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3ZpdGF2aXZh_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/862554c6a9574ce5b5770822d03f392c.png