写在前面
这是使用Kotlin开发MVVM应用程序的第二部分—Retrofit及RxJava
在前一部分中我们简单了解了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。
是现在主流的网络请求库,不了解的看
是一个在 Java VM 上使用可观测的序列来组成异步的、基于事件的程序的库。不了解的当然是推荐经久不衰的
准备工作做好后,先看看现在的MVVM结构
![e5a63b8072851600e715ffa3dcfac600.png](https://i-blog.csdnimg.cn/blog_migrate/a542f2d7d1e7b067710d019ac0aafcac.jpeg)
mvvm
这次我们的Model层的数据源来自网络,并且在ViewModel中使用RxJava进行数据的转换。
开始正文
在MVVM中是怎么处理网络数据的?
带着问题看文章是个好习惯。—ditclear
这次我们先来看看xml布局文件
<?xml version="1.0" encoding="utf-8"?> android:onClick="@{()->vm.loadArticle()}" android:text="load article"/> android:text="@{vm.articleDetail}" tools:text="点击按钮,调用ViewModel中的loadArticle方法,通过DataBinding更新UI"/>
要做的和上一篇差不多,只是现在多了网络请求。
看看现在的项目结构:
![013e18f08b235600365168ee68b483d9.png](https://i-blog.csdnimg.cn/blog_migrate/16651e004d2596ba9240c17c3d105a60.jpeg)
结构
相比上一篇,多了一个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 }}
基本一模一样,只是改变了数据源而已。
看一下效果:
![fac4955ff9b8bd1b614f917267a0e2e6.gif](https://i-blog.csdnimg.cn/blog_migrate/5f04103a9ac286e3f872f763097e9b6a.gif)
好的,目的达到了。你可以在这里查看变更
优化
为了更有说服力,我优化了一下UI,并加入loading的效果。
![6e9f93d6ec50a2e51d5efb2f45c74a67.gif](https://i-blog.csdnimg.cn/blog_migrate/1b6bfac229e0c985f0119d923738667b.gif)
还算有点模样,那么现在就到了本篇的重点了,怎么像这样处理返回的网络数据?。
再来看看xml布局文件,由于篇幅原因,所以这里只截取主要部分,详细请查看
这里使用到了一个第三方库 ,使用方法是这样的
markdownView.loadMarkdown("## Hello Markdown");
并没有提供setMarkDown(markdown:String)方法,相信这种情况很常见,经常需要我们改动第三方库达到项目的需求。所以这里需要自定义一下BindingAdapter,具体见
@BindingAdapter(value = "markdown")fun bindMarkDown(v: MarkdownView, markdown: String?) { markdown?.let { v.setMarkdown(it) }}
眼尖的同学就发现了,这不是有setMarkdown方法吗?
别急,其实这只是使用kotlin给MarkdownView添加的扩展函数,具体见
fun MarkdownView.setMarkdown(markdown : String?){ loadMarkdown(markdown)}
再来瞧瞧我们的 ,依然捡重点
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? -> }) }}
这里一个重点:doOnSubscribe和doAfterTerminate
doOnSubscribe是在订阅开始时会触发的方法,可以代替onStart()
而doAfterTerminate是在Single成功或者失败之后会触发的方法,可以代替onComplete()
我们再来优化一下loadArticle方法
- 使用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