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

听说你已经会了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的整体流程图

这张图描述了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
    }
}

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

效果展示

MVI.gif

源码github

Have Fun!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,179评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,229评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,032评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,533评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,531评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,539评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,916评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,813评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,568评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,654评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,354评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,937评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,918评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,152评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,852评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,378评论 2 342

推荐阅读更多精彩内容