美文网首页
MVVM基础篇

MVVM基础篇

作者: Method | 来源:发表于2021-01-29 20:23 被阅读0次

Android 官方推荐的应用架构如下图:


mvvm.png

MVP、MVVM区别

MVP 和 MVVM 都是为了解决界面和数据的分离问题,两者只是采用了不同的实现方案。MVP 之间的交互主要是通过接口实现的,其主要弊端就是需要编写大量接口。而 MVVM 则是通过数据绑定的方式实现交互,虽然其实现需要依赖具体的一些框架工具,但明显大大减少了开发者需要编写的代码量。

创建一个MVVM登录案例

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="viewModel"
            type="com.example.hellokotlin.structure.mvvm.LoginViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <EditText
            android:id="@+id/editTextTextPersonName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="2dp"
            android:layout_marginLeft="2dp"
            android:layout_marginBottom="47dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="@={viewModel.phone}"
            app:layout_constraintBottom_toTopOf="@+id/editTextTextPersonName2"
            app:layout_constraintStart_toStartOf="@+id/editTextTextPersonName2" />

        <EditText
            android:id="@+id/editTextTextPersonName2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="207dp"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="@={viewModel.pwd}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="78dp"
            android:text="Button"
            android:onClick="@{()->viewModel.login()}"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName2" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

View层

/**
 * View 层
 * 通过viewmodel livedata 监听数据变化 显示
 */
class LoginActivity:AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)
        val loginViewModel = ViewModelProvider(this)[LoginViewModel::class.java]
        loginViewModel.loginResult.observe(this, Observer {
            if(it){
                println("登录成功")
                finish()
            }else{
                println("登录失败")
            }
        })

    }
}

viewmodel层

/**
 * viewModel层
 */
class LoginViewModel : ViewModel() {
    val phone = ObservableField<String>()
    val pwd = ObservableField<String>()
    val repository = LoginRepository()

    private val _loginResult by lazy {
        MutableLiveData<Boolean>()
    }

    //保证其他类只能监听 不能更改
    val loginResult: LiveData<Boolean> = _loginResult
    fun login() {
        if (phone.get().isNullOrEmpty()) {
            println("请输入手机号")
            return
        }

        if (pwd.get().isNullOrEmpty()) {
            println("请输入密码")
            return
        }
        _loginResult.value = repository.loginFromService(phone.get(), pwd.get())
    }
}

model层

/**
 * 数据仓库
 * 1.可以从网络获取数据
 * 2.可以从数据库获取数据等
 */
class LoginRepository {
    fun loginFromService(phone: String?, pwd: String?):Boolean {
        return Random.nextBoolean()
    }
}

相关文章

  • MVVM基础篇

    Android 官方推荐的应用架构如下图: MVP、MVVM区别 MVP 和 MVVM 都是为了解决界面和数据的分...

  • vue

    一.Vue基础 MVVM框架 MVVM是Model-View-ViewModel的缩写。MVVM借鉴了MVC的思想...

  • 无Vue最全知识点,面试必备(基础到进阶,覆盖vue3.0,持续

    基础篇 说说你对MVVM的理解 Model-View-ViewModel的缩写,Model代表数据模型,View代...

  • iOS架构篇-4 架构模式MVVM

    @[TOC](iOS架构篇-4 架构模式MVVM) MVVM原理 MVVM(Model–View–Viewmode...

  • 2018-04-16

    MVVM+RAC使用体验(附demo) MVVM介绍 MVVM是在MVC的基础上演变而来的,MVC的核心就是将各个...

  • 基础知识梳理

    iOS基础 1.mvc、mvvm iOS 关于MVC和MVVM设计模式的那些事 2.autoReless 自动释放...

  • Vue.js实战初阅

    一、基础篇 包括数据的双向绑定、计算属性、基本指令、自定义指令及组件等。 Vue在设计上使用MVVM(Model-...

  • iOS MVVM 一分钟教程(无RAC, Swift版)

    这是MVVM基础用法,相比MVP, 最大的不同点在于, MVVM要负责对V的更新 Model ViewModel ...

  • Android MVVM框架

    MVVM是Model-View-ViewModel的简写,MVVM在MVP的基础上实现了数据视图的绑定(DataB...

  • 浅谈iOS中MVVM设计模式

    MVVM 所谓mvvm就是在mvc的基础上将业务逻辑抽离出来放到viewModel中,如下: 1:model层,A...

网友评论

      本文标题:MVVM基础篇

      本文链接:https://www.haomeiwen.com/subject/nzjctltx.html