MVI 设计模式尝鲜(实现一个联网的天气查询Dome)

原创 2018年01月09日 00:00:00

?wxfrom=5&wx_lazy=1


作者 | PcDack

地址 | https://www.jianshu.com/p/dcb7b536066c

声明 | 本文是 PcDack 原创投稿,转发请联系原作者授权。


听说你已经会了 MVP,MVC,MVVP 那么 MVI 在向你招手

是什么

Model-View-Intent是安卓最新的设计模式。它的灵感来自于于André Staltz的Cycle.js ,并且被 Hannes Dorfmann带到安卓世界。

Model-View-Intent

你可能看过Model在其他的设计模式比如MVC,MVP或者MVVP。但是MVI的Model和其他设计模式的完全不一样:

  • Model 代表一种状态(数据的显示,你的控件的可视或者隐藏,RecyclerView的滑动位置等等)。Model在MVI中比其他的设计模式更加的形式化。你应用的一个页面可能包含一个或多个Model对象。Model在一个Domain层被定义和管理。

  • View 代表一个定义一系列用户动作的可观察对象的接口和一个渲染方法

  • Intent 不是android.content.Intent !这个Intent 简单的说是一种意图,或者说一种动作,或者说一种用户与APP交互产生的命令。对于每一个用户动作(意图/命令)被View分发,被Presenter 观察(是的,MVI也是有Presenter 的,是不是应该改名叫MVIP,啊哈)。

MVI的整体流程图

cmOLumrNib1faGGIwxC5S8YV3v9jzhQE2BnjN81pBZT8JibicB93IEZ9G3PI5crAeiawhtEjbGicvRE0ESaeHb8jxBA

这张图描述了MVI模式的响应,和数据的流动方向。我们的Model是被Domain层管理和维护的,用来对用户的某种意图/动作/命令,做出反应的。只要有新的Model被创建,那么,意味着我们的View肯定要被更新。

为什么

这种模式,打开了开发安卓的新思路。我们可以将整个项目按照用户的操作/命令/动作来设计APP。

如何做

使用到的依赖

MVI模式快速开发的依赖

//MVI需要的依赖
   // Mosby
   compile "com.hannesdorfmann.mosby3:mvi:$mosbyVersion"
   // RxBinding
   compile "com.jakewharton.rxbinding2:rxbinding-kotlin:$rxBindingVersion"
   compile "com.jakewharton.rxbinding2:rxbinding-support-v4-kotlin:$rxBindingVersion"
   compile "com.jakewharton.rxbinding2:rxbinding-appcompat-v7-kotlin:$rxBindingVersion"
   // RxJava and RxAndroid
   compile "io.reactivex.rxjava2:rxjava:$rxJavaVersion"
   compile "io.reactivex.rxjava2:rxandroid:$rxAndroidVersion"
   compile "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"

为什么使用mosby库
使用Mosby库来构建MVI。这个库可以让我们关注程序设计的蓝图,例如MVI的内容和业务逻辑,而不是处理棘手RxJava API和内存管理。

网络请求依赖

//OKHTTP
   compile "com.squareup.okhttp3:okhttp:$okhttpVersion"
   compile "com.squareup.okio:okio:$okioVersion"

结构

data
domain
mvi

其中data是用来进行数据请求的

domain用来管理Model

mvi用来管理View的

实现过程

MVI层

实现View

在MVI模式中,我们的View是由两部分构成的。在上面我们也说过了,就是一系列用户动作的可观察对象的接口和一个渲染方法

interface WeatherView:MvpView {
   //请求天气意图
   fun getWeatherIntent():Observable<Unit>
   //将请求的结果渲染到UI上
   fun renderToUi(state:GetWeatherState)
}

其中state,将在我们的Domain层定义

实现Presenter

在MVI模式中,Presenter是Domain和View层交互的桥梁,在这个例子中,我们需要将获取天气请求的意图/动作/命令,与获取天气数据绑定起来

class WeatherPresenter:MviBasePresenter<WeatherView,GetWeatherState>() {
   //绑定意图
   override fun bindIntents() {
       val getWeatherInfo=
               intent (WeatherView::getWeatherIntent)
                       .subscribeOn(Schedulers.io())
                       .switchMap{GetWeatherData.getWeather()}
                       .doOnNext { Log.d("状态",it.toString()) }
                       .observeOn(AndroidSchedulers.mainThread())
       subscribeViewState(getWeatherInfo,WeatherView::renderToUi)
   }
}

Domain层

在Domain层,我们用来实现Model,在这里例子中,我们只要完成一个Model,也就是天气请求的Model。请求天气这个Model下,有三种状态:1.加载状态2.数据获取状态3.错误状态

具体代码

sealed class GetWeatherState {
   object LoadingState:GetWeatherState()
   data class DataState(val weatherData:String):GetWeatherState()
   data class ErrorState(val error:Throwable):GetWeatherState()
}

获取数据的具体方法

object GetWeatherData {
   fun getWeather():Observable<GetWeatherState>{
       return WeatherRepository.loadWeatherInfoJson()             //在Data层实现
               .map<GetWeatherState>{GetWeatherState.DataState(it)}
               .startWith(GetWeatherState.LoadingState)
               .onErrorReturn { GetWeatherState.ErrorState(it) }
   }
}

Data层

数据请求的具体实现,我们这里,就是获取天气数据的获取

object WeatherRepository {
   private val URL = "http://www.dg121.com/index.php/portal/share/hour24"//东莞市天气数据公共接口
   fun loadWeatherInfoJson(): Observable<String> {
       return Observable.create(ObservableOnSubscribe<String> { e ->
           val okHttpClient = OkHttpClient()
           val request = Request.Builder()
                   .url(URL)
                   .build()
           val call = okHttpClient.newCall(request)
           try {
               val response = call.execute()
               e.onNext(response.body()!!.string())
               e.onComplete()
           } catch (ex: IOException) {
               e.onError(ex)
           }
       }).subscribeOn(Schedulers.io())
   }
}

最后的工作

实现MainActivity,MainActivity需要继承自MviActivity<WeatherView, WeatherPresenter>(),并且需要实现我们的View即WeatherView

class MainActivity : MviActivity<WeatherView, WeatherPresenter>(), WeatherView {
   //将意图与按钮点击关联起来,只要按钮点击,那么就相当于发送这个意图
   override fun getWeatherIntent()=get_weather_info_btn.clicks()
   //创建一个Presenter
   override fun createPresenter()= WeatherPresenter()
   override fun renderToUi(state: GetWeatherState) =//根据不同的状态,来选择不同的函数,实现不同的展示
           when(state){
               is GetWeatherState.LoadingState->renderLoadingUi()    //加载状态的UI
               is GetWeatherState.DataState->renderDataUi(state)     //渲染数据时的UI
               is GetWeatherState.ErrorState->renderErrorUi(state)   //出错后的UI
           }
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
   }
   private fun renderErrorUi(state: GetWeatherState.ErrorState) {
       progress_bar.visible=false
       info.text=state.error.message
   }
   private fun renderDataUi(state: GetWeatherState.DataState) {
       progress_bar.visible=false
       info.text=state.weatherData
   }
   private fun renderLoadingUi() {
       progress_bar.visible=true
   }
}

其中的关键点,我都已经注释了

效果展示

cmOLumrNib1faGGIwxC5S8YV3v9jzhQE2wrN3Oxo3usRZhexSGUtiaBwAB2AkeetNDicnys5VbeG4pKfZckXTGZLQ

源码github

https://github.com/pcdack/MyMVITest

cmOLumrNib1eLREdFXDP903Cib5UUIhU47xxdHpGS3zz1BEULSUgZwcDtO6nXjHCbubmt0FqnAzoeoiaLqHPibJj3Q

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android上实现一个简单的天气预报APP(三) 获取网络数据

前面我们已经配置好了界面布局,显示布局上的数据都是我们胡乱加载的,接下里我们要将这些数据更新为网络上的真实数据 1)检查网络连接状态 1.新建一个java类CheckNet 我们使用ConnectMa...
  • v_xchen_v
  • v_xchen_v
  • 2017年02月25日 11:36
  • 4773

用python写一个简单的天气预报

#!/usr/bin/env python3 # -*- coding: utf-8 -*- '通过百度天气API,获取天气信息' import json from urllib import r...
  • qzh3578
  • qzh3578
  • 2015年11月15日 19:42
  • 5230

Android上实现一个简单的天气预报APP(八) 从数据库读取城市数据

前面我们已经实现了今日天气的主界面布局,并可以从网络上实时获取天气数据更新到界面上,并通过按钮切入选择城市界面。接下来,我们通过读取数据库文件获取城市列表。 思路: 创建一个Application,A...
  • v_xchen_v
  • v_xchen_v
  • 2017年02月25日 11:40
  • 3122

一个拥有三层架构,asp.Net,设计模式的词条实例

  • 2008年07月29日 15:39
  • 1.69MB
  • 下载

JTABLE 一个小格子添加2个按钮实现国际化 使用观察者设计模式

package org.primary.c15UI.class08; import javax.swing.AbstractCellEditor; import javax.swing.JBu...
  • jinshu082
  • jinshu082
  • 2014年08月31日 22:18
  • 211

一个非常不错的Java设计模式

  • 2007年10月29日 21:40
  • 231KB
  • 下载

一个参考Junit的设计模式ppt

  • 2008年09月05日 11:04
  • 1024KB
  • 下载

采用MVC设计模式实现一个简单程序:

题:采用MVC设计模式实现一个简单程序: lUserRegister.html是一个包含有让用户填写注册信息的FORM表单的HTML页面; lUser.java是一个代表用户注册信息的普通Ja...
  • wsyouyou
  • wsyouyou
  • 2012年10月25日 17:36
  • 1255

DAO设计模式---实现一个简单的注册(上)

DAO设计模式是属于Java Web中对数据层的具体操作,使用DAO设计模式可以简化大量代码的编写和增加程序的可移植性,可以很方便在日后对代码的修改。 如果在JSP中使用JDBC操作数据库,那样在J...
  • Kezhongke
  • Kezhongke
  • 2012年09月16日 01:45
  • 1337

李兴华 DAO设计模式 实现 增删改查 分页查询 完整代码

  • 2016年08月04日 11:00
  • 5.57MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:MVI 设计模式尝鲜(实现一个联网的天气查询Dome)
举报原因:
原因补充:

(最多只允许输入30个字)