使用Kotlin构建MVVM应用程序—第二部分:Retrofit及RxJava

使用Kotlin构建MVVM应用程序—第二部分:Retrofit及RxJava_第1张图片

目录

  • 使用Kotlin构建MVVM应用程序—总览篇
  • 使用Kotlin构建MVVM应用程序—第一部分:入门篇
  • 使用Kotlin构建MVVM应用程序—第二部分:Retrofit及RxJava
  • 使用Kotlin构建MVVM应用程序—第三部分:Room

写在前面

这是使用Kotlin开发MVVM应用程序的第二部分—Retrofit及RxJava

在前一部分中我们简单了解了MVVM的基本概念和写法。如果你没有看过上一篇,请先快速浏览一遍,因为本系列是循序渐进的。可以在这里查看使用Kotlin构建MVVM应用程序—第一部分:入门篇

如果第一篇是入了门,那这一篇就有点实战的意思了,更加贴近我们具体的需求,本文将阐述如何在MVVM中处理网络数据。

Retrofit及RxJava

我们先加入依赖

    //rx android
    compile 'io.reactivex.rxjava2:rxandroid:2.0.1'
    compile 'io.reactivex.rxjava2:rxjava:2.1.3'
    //retrofit
    compile 'com.squareup.retrofit2:retrofit:2.3.0'
    compile 'com.squareup.retrofit2:converter-gson:2.3.0'
    compile 'com.squareup.retrofit2:adapter-rxjava2:2.3.0'
    compile 'com.google.code.gson:gson:2.8.0'

这次相比上一篇稍微加了点难度,这次加入了网络请求库Retrofit和Rxjava。

Retrofit是现在主流的网络请求库,不了解的看官网

RxJava是一个在 Java VM 上使用可观测的序列来组成异步的、基于事件的程序的库。不了解的当然是推荐经久不衰的给 Android 开发者的 RxJava 详解

准备工作做好后,先看看现在的MVVM结构

使用Kotlin构建MVVM应用程序—第二部分:Retrofit及RxJava_第2张图片
MVVM

这次我们的Model层的数据源来自网络,并且在ViewModel中使用RxJava进行数据的转换。

开始正文

在MVVM中是怎么处理网络数据的?

带着问题看文章是个好习惯。—ditclear

这次我们先来看看xml布局文件




    
        
        
    
        
        

要做的和上一篇差不多,只是现在多了网络请求。

看看现在的项目结构:

使用Kotlin构建MVVM应用程序—第二部分:Retrofit及RxJava_第3张图片
结构

相比上一篇,多了一个PaoService.kt

interface PaoService{
    //文章详情
    @GET("article_detail.php")
    fun getArticleDetail(@Query("id") id: Int): Single
}

为了简单起见,就只有一个加载文章详情的接口getArticleDetail

简单示例

我们现在使用PaoService作为我们的数据源(Model层),提供数据给我们的PaoViewModel(ViewModel层)

class PaoViewModel(val remote: PaoService) {
    //////////////////data//////////////
    val articleDetail = ObservableField()
    //////////////////binding//////////////
    fun loadArticle() {
        //为了简单起见这里先写个默认的id
        remote.getArticleDetail(8773)
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe({ t: Article? ->
                    articleDetail.set(t?.toString())
                }, { t: Throwable? ->
                    articleDetail.set(t?.message ?: "error")
                })
    }
}

和上一篇对比来看相差也不大,只是现在我们的数据来自网络。
再来看看PaoActivity.kt(View层)

class PaoActivity : AppCompatActivity() {

    lateinit var mBinding : PaoActivityBinding
    lateinit var mViewMode : PaoViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding=DataBindingUtil.setContentView(this,R.layout.pao_activity)

        //////model
        val remote=Retrofit.Builder()
                .baseUrl("http://api.jcodecraeer.com/")
                .addCallAdapterFactory(RxJava2CallAdapterFactory.create())
                .addConverterFactory(GsonConverterFactory.create())
                .build().create(PaoService::class.java)

        /////ViewModel
        mViewMode= PaoViewModel(remote)
        ////binding
        mBinding.vm=mViewMode
    }
}

基本一模一样,只是改变了数据源而已。

看一下效果:

好的,目的达到了。你可以在这里查看变更

https://github.com/ditclear/MVVM-Android/commit/efd77a850069803d53b5128e62f9ff4f259641fa

优化

为了更有说服力,我优化了一下UI,并加入loading的效果。


image

还算有点模样,那么现在就到了本篇的重点了,怎么像这样处理返回的网络数据?

再来看看xml布局文件,由于篇幅原因,所以这里只截取主要部分,详细请查看pao_activity.xml


                

这里使用到了一个第三方库MarkdownView,使用方法是这样的

markdownView.loadMarkdown("## Hello Markdown");

并没有提供setMarkDown(markdown:String)方法,相信这种情况很常见,经常需要我们改动第三方库达到项目的需求。所以这里需要自定义一下BindingAdapter,具体见NormalBinds.kt

@BindingAdapter(value = "markdown")
fun bindMarkDown(v: MarkdownView, markdown: String?) {
    markdown?.let {
        v.setMarkdown(it)
    }
}

眼尖的同学就发现了,这不是有setMarkdown方法吗?

别急,其实这只是使用kotlinMarkdownView添加的扩展函数,具体见NormalExtens.kt

fun MarkdownView.setMarkdown(markdown : String?){
    loadMarkdown(markdown)
}

再来瞧瞧我们的PaoActivity.kt,依然捡重点

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menu?.let {
        menuInflater.inflate(R.menu.detail_menu,it)
    }
    return super.onCreateOptionsMenu(menu)
}

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    item?.let {
        when(it.itemId){
            R.id.action_refresh -> mViewMode.loadArticle()
        }
    }
    return super.onOptionsItemSelected(item)
}

啊?这叫重点吗?不就是操作一下menu菜单吗?

嗯,不错,很平常的操作,关键在于R.id.action_refresh -> mViewMode.loadArticle()这里。

由于许多无法预料的原因,不可避免的我们无法在xml文件中去绑定数据和事件,需要在Activity/Fragment调用viewmodel里的方法。为什么要提这一点呢?当然是后面需要用到。

再来瞧瞧我们的PaoViewModel.kt

class PaoViewModel(val remote: PaoService) {
    //////////////////data//////////////
    val loading=ObservableBoolean(false)//加载
    val content = ObservableField()//内容
    val title = ObservableField()//标题
    //////////////////binding//////////////
    fun loadArticle() {
        //为了简单起见这里先写个默认的id
        remote.getArticleDetail(8773)
                .subscribeOn(Schedulers.io())
                .delay(1000,TimeUnit.MILLISECONDS)//为了加载效果更明显,这里延迟1秒
                .observeOn(AndroidSchedulers.mainThread())
                .doOnSubscribe { loading.set(true) }//开始请求数据,设置加载为true
                .doAfterTerminate { loading.set(false) }//请求完成,设置加载为false
                .subscribe({ t: Article? ->
                    t?.let {
                        title.set(it.title)
                        it.content?.let {
                            val articleContent=Utils.processImgSrc(it)
                            content.set(articleContent)
                        }
                    }
                }, { t: Throwable? ->  })
    }
}

这里一个重点:doOnSubscribedoAfterTerminate

doOnSubscribe是在订阅开始时会触发的方法,可以代替onStart()

doAfterTerminate是在Single成功或者失败之后会触发的方法,可以代替onComplete()

我们再来优化一下loadArticle方法

  1. 使用kotlin的扩展将异步操作组合起来

这里我们定义一个Rxjava的扩展函数

fun  Single.async(withDelay: Long = 0): Single =
        this.subscribeOn(Schedulers.io())
                .delay(withDelay, TimeUnit.MILLISECONDS)
                .observeOn(AndroidSchedulers.mainThread())

所以可以将其转换成这样

remote.getArticleDetail(8773)
                .async(1000)
                .doOnSubscribe { loading.set(true) }
                .doAfterTerminate { loading.set(false) }
                .subscribe(...)

2 . 不依赖于具体实现

loading.set(true) 和 loading.set(false) 现在就能达到我们想要的效果

但是如果万一我们需要使用另一种加载方式,那么就需要去改这里,一个方法还好,如果多个方法都这么写,就比较麻烦了。所以最好定义两个方法startLoad()stopLoad(),代表开始加载和结束加载。

fun loadArticle() {
        //为了简单起见这里先写个默认的id
        remote.getArticleDetail(8773)
                .async(1000)
                .doOnSubscribe { startLoad()}
                .doAfterTerminate { stopLoad() }
                .subscribe({ t: Article? ->
                    t?.let {
                        title.set(it.title)
                        it.content?.let {
                            val articleContent=Utils.processImgSrc(it)
                            content.set(articleContent)
                        }

                    }

                }, { t: Throwable? ->
                })
    }
//...
fun startLoad()=loading.set(true)
fun stopLoad()=loading.set(false)

嗯好的,现在看着顺眼些了,那么还有一个问题,如果出现error了怎么处理,好像还没处理到,假设这里有一个需求是:当加载失败的时候,使用Snackbar或者Toast、Diglog提示错误信息。

假设是Toast,那我们需要调用

Toast.makeText(context,"error msg",Toast.LENGTH_SHORT).show()

这里需要上下文Context,错误的做法是

  1. 将activity或者fragment的Context作为参数传进了,然后直接在ViewModel里使用。❌

    因为ViewModel里不应该有任何上下文Context的引用(除了App的ApplicationContext),而应该尽量是纯Java/kotlin代码。一是为了单元测试的便捷性,二是为了防止内存泄漏。

  2. 使用一个回调到Activity或者Fragment中去处理 ❌

    这也就是我在第一部分中提过的跑偏了,这不就又变为MVP了吗(ps:自己也在这条路上跑了好几步)

  3. 聪明点的做法是再自定义一个@BindAdapter,通过绑定使用View的context ✔️·

    @BindingAdapter(value = "toast")
    fun bindToast(v: View,msg:Throwable ?){
        msg?.let {
            Toast.makeText(v.context,it.message,Toast.LENGTH_SHORT).show()
        }
    }
    

    这种做法可行,但我个人来说不太喜欢,因为我比较喜欢下一种。

  4. 充分利用RxJava ✔️·

    其实Rxjava和MVVM的思想上有一致的地方。

    • Observable.create/just/from...等操作符用于提供数据源,可以认为是MVVM的M层
    • Observable.map/flatMap/reduce...等操作符用于数据的转换,将其变为订阅者需要的数据,这不正是ViewModel的功能
    • Subscriber...就相当于View层去使用这些数据

    其实更像是MVP,因为在Subscriber中成功和失败。。。等等的回调,既然Subscriber中就有这些回调,那为什么不加以利用?

    怎么充分利用RxJava

    只需要将loadArticle方法改造成为一个Single

    fun loadArticle():Single
    = remote.getArticleDetail(8773) .async(1000) .doOnSuccess { t: Article? -> t?.let { title.set(it.title) it.content?.let { val articleContent=Utils.processImgSrc(it) content.set(articleContent) } } } .doOnSubscribe { startLoad()} .doAfterTerminate { stopLoad() }

    doOnSuccess操作符中我们对数据进行了处理,然后在acticity中需要更改一下调用时的写法。

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        item?.let {
            when(it.itemId){
                R.id.action_refresh -> mViewMode.loadArticle()
                        .subscribe { _, error -> dispatchError(error) }
                else -> { }
            }
        }
        return super.onOptionsItemSelected(item)
    }
    
    //依旧不依赖于具体实现,可以是Toast/Dialog/Snackbar等等
    private fun dispatchError(error:Throwable?){
        error?.let { 
            Toast.makeText(this,it.message,Toast.LENGTH_SHORT).show()
        }
    }
    

    到此,在MVVM中怎么处理网络数据就基本告一段落。

    接下来

    处理内存泄漏问题RxLifecycle

    不多说,可以使用CompositeDisposable将所有的订阅都统一解除,我习惯于使用RxLifecycle,更加方便

    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
            item?.let {
                when(it.itemId){
                    R.id.action_refresh -> mViewMode.loadArticle().compose(bindToLifecycle())
                            .subscribe { _, error -> dispatchError(error) }
                    else -> { }
                }
            }
            return super.onOptionsItemSelected(item)
        }
    

    使用compose操作符绑定一下就好了,这也是我更倾向于这样的写法的原因之一。
    更新:18.7.5:建议使用AutoDispose代替RxLifecycle
    RxLifecycle 的作者推荐使用AutoDispose,他认为AutoDispose的设计更为优秀,为此写了一篇Why Not RxLifecycle?
    不过对于我们开发者而言,其实变化不大。
    添加AutoDispose依赖

    //autodispose
    implementation 'com.uber.autodispose:autodispose:0.8.0'
    implementation 'com.uber.autodispose:autodispose-android-archcomponents:0.8.0'

然后

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        item?.let {
            when(it.itemId){
                R.id.action_refresh -> mViewModel.loadArticle()
                        .`as`(AutoDispose.autoDisposable(AndroidLifecycleScopeProvider.from(this, Lifecycle.Event.ON_DESTROY)))
                        .subscribe({},{dispatchError(it)})
                else -> { }
            }
        }
        return super.onOptionsItemSelected(item)
    }

对于习惯使用RxLifeCycle的开发者建议扩展成RxLifeCycle的形式

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        item?.let {
            when(it.itemId){
                R.id.action_refresh -> mViewModel.loadArticle()
                        .bindLifeCycle(this)
                        .subscribe({},{dispatchError(it)})
                else -> { }
            }
        }
        return super.onOptionsItemSelected(item)
    }

fun   Single.bindLifeCycle(owner: LifecycleOwner): SingleSubscribeProxy {
    return this.`as`(AutoDispose.autoDisposable(AndroidLifecycleScopeProvider.from(owner, Lifecycle.Event.ON_DESTROY)))
}

结尾

本项目的github地址:https://github.com/ditclear/MVVM-Android

更多的例子可以查看:https://github.com/ditclear/PaoNet

这是使用Kotlin构建MVVM项目的第二部分,主要讲了怎么在MVVM中较好的处理从网络返回的数据和解决内存泄漏问题。

其实回过头来看会发现,这样的方式基本告别了回调,写着都感觉好舒服,于是问自己为什么以前没想到呢?本来就该这样处理啊!至于原因的话,可能是现在Android项目中使用MVVM的例子太少,这样的方式在github上很少出现,导致自己没转过弯。所以写本文的目的之一是分享,二是希望android开发者不要盲目追从MVP,而遗忘了MVVM。

第三篇我会在本项目的基础上进行数据持久化,即加入android架构组件的Room数据库,敬请期待。

你可能感兴趣的:(使用Kotlin构建MVVM应用程序—第二部分:Retrofit及RxJava)