kotlin中mainactivity无法直接调用xml中的控件_使用Kotlin构建MVVM应用程序—第二部分：Retrofit及RxJava...

写在前面

这是使用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结构

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"/>

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

看看现在的项目结构：

结构

相比上一篇，多了一个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 }}

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

看一下效果：

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

优化

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

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

再来看看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方法

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