LiveData+Retrofit網絡請求實戰

RxJava與Retrofit

在出現LiveData以前，Android上實現網絡請求最經常使用的方式是使用Retrofit+Rxjava。一般是RxJavaCallAdapterFactory將請求轉成Observable(或者Flowable等)被觀察者對象，調用時經過subscribe方式實現最終的請求。爲了實現線程切換，須要將訂閱時的線程切換成io線程，請求完成通知被觀察者時切換成ui線程。代碼一般以下：java

observable.subscribeOn(Schedulers.io())
          .observeOn(AndroidSchedulers.mainThread())
          .subscribe(subscriber)
複製代碼

爲了可以讓請求監聽到生命週期變化，onDestroy時不至於發生view空指針，要須要使用RxLifecycle或AutoDispose讓Observable可以監聽到Activity和Fragment的生命週期，在適當的生命週期下取消訂閱。android

LiveData與Retrofit

LiveData和Rxjava中的Observable相似，是一個被觀察者的數據持有類。可是不一樣的是LiveData具備生命週期感知，至關於RxJava+RxLifecycle。LiveData使用起來相對簡單輕便，因此當它加入到項目中後，再使用RxJava便顯得重複臃腫了(RxJava包1～2M容量)。爲了移除RxJava，咱們將Retrofit的Call請求適配成LiveData，所以咱們須要自定義CallAdapterFactory。根據接口響應格式不一樣，對應的適配器工廠會有所區別。本次便以廣爲人知的wanandroid的api爲例子，來完成LiveData網絡請求實戰。首先根據它的響應格式：git

{
	data:[],//或者{}
	errorCode:0,
	errorMsg:""
}
複製代碼

定義一個通用的響應實體ApiResponsegithub

class ApiResponse<T>(
    var data: T?,
    var errorCode: Int,
    var errorMsg: String
)
複製代碼

而後咱們定義對應的LiveDataCallAdapterFactoryjson

import androidx.lifecycle.LiveData
import retrofit2.CallAdapter
import retrofit2.Retrofit
import java.lang.reflect.Type
import retrofit2.CallAdapter.Factory
import java.lang.reflect.ParameterizedType

class LiveDataCallAdapterFactory : Factory() {
    override fun get(returnType: Type, annotations: Array<Annotation>, retrofit: Retrofit): CallAdapter<*, *>? {
        if (getRawType(returnType) != LiveData::class.java) return null
        //獲取第一個泛型類型
        val observableType = getParameterUpperBound(0, returnType as ParameterizedType)
        val rawType = getRawType(observableType)
        if (rawType != ApiResponse::class.java) {
            throw IllegalArgumentException("type must be ApiResponse")
        }
        if (observableType !is ParameterizedType) {
            throw IllegalArgumentException("resource must be parameterized")
        }
        return LiveDataCallAdapter<Any>(observableType)
    }
}
複製代碼

而後在LiveDataCallAdapter將Retrofit的Call對象適配成LiveDataapi

import androidx.lifecycle.LiveData
import retrofit2.Call
import retrofit2.CallAdapter
import retrofit2.Callback
import retrofit2.Response
import java.lang.reflect.Type
import java.util.concurrent.atomic.AtomicBoolean

class LiveDataCallAdapter<T>(private val responseType: Type) : CallAdapter<T, LiveData<T>> {
    override fun adapt(call: Call<T>): LiveData<T> {
        return object : LiveData<T>() {
            private val started = AtomicBoolean(false)
            override fun onActive() {
                super.onActive()
                if (started.compareAndSet(false, true)) {//確保執行一次
                    call.enqueue(object : Callback<T> {
                        override fun onFailure(call: Call<T>, t: Throwable) {
                            val value = ApiResponse<T>(null, -1, t.message ?: "") as T
                            postValue(value)
                        }

                        override fun onResponse(call: Call<T>, response: Response<T>) {
                            postValue(response.body())
                        }
                    })
                }
            }
        }
    }

    override fun responseType() = responseType
}
複製代碼

第一個請求

以首頁banner接口(www.wanandroid.com/banner/json)爲例，完成第一個請求。新建一個WanApi接口，加入Banner列表api，以及Retrofit初始化方法,爲方便查看http請求和響應，加入了okhttp自帶的日誌攔截器。bash

interface WanApi {
    companion object {
        fun get(): WanApi {
            val clientBuilder = OkHttpClient.Builder()
                .connectTimeout(60, TimeUnit.SECONDS)
            if (BuildConfig.DEBUG) {
                val loggingInterceptor = HttpLoggingInterceptor()
                loggingInterceptor.level = HttpLoggingInterceptor.Level.BODY
                clientBuilder.addInterceptor(loggingInterceptor)
            }
            return Retrofit.Builder()
                .baseUrl("https://www.wanandroid.com/")
                .client(clientBuilder.build())
                .addCallAdapterFactory(LiveDataCallAdapterFactory())
                .addConverterFactory(GsonConverterFactory.create())
                .build()
                .create(WanApi::class.java)
        }
    }
    /** * 首頁banner */
    @GET("banner/json")
    fun bannerList(): LiveData<ApiResponse<List<BannerVO>>>
}
複製代碼

BannerVO實體markdown

data class BannerVO(
    var id: Int,
    var title: String,
    var desc: String,
    var type: Int,
    var url: String,
    var imagePath:String
)
複製代碼

咱們在MainActivity中發起請求網絡

private fun loadData() {
    val bannerList = WanApi.get().bannerList()
    bannerList.observe(this, Observer {
        Log.e("main", "res:$it")
    })
 }
複製代碼

調試結果以下： app

LiveData的map與switchMap操做

LiveData能夠經過Transformations的map和switchMap操做，將一個LiveData轉成另外一種類型的LiveData，效果與RxJava的map/switchMap操做符相似。能夠看看兩個函數的聲明

public static <X, Y> LiveData<Y> map(
            @NonNull LiveData<X> source,
            @NonNull final Function<X, Y> mapFunction)


public static <X, Y> LiveData<Y> switchMap(
            @NonNull LiveData<X> source,
            @NonNull final Function<X, LiveData<Y>> switchMapFunction)
複製代碼

根據以上代碼，咱們能夠知道，對應的變換函數返回的類型是不同的：map是基於泛型類型的變換，而switchMap則返回一個新的LiveData。

仍是以banner請求爲例，咱們將map和switchMap應用到實際場景中： 1: 爲了可以手動控制請求，咱們須要一個refreshTrigger觸發變量，當這個變量被設置爲true時，經過switchMap生成一個新的LiveData用做請求banner

private val refreshTrigger = MutableLiveData<Boolean>()
private val api = WanApi.get()
private val bannerLis:LiveData<ApiResponse<List<BannerVO>>> = Transformations.switchMap(refreshTrigger) {
    //當refreshTrigger的值被設置時，bannerList
    api.bannerList()
}
複製代碼

2: 爲了展現banner，咱們經過map將ApiResponse轉換成最終關心的數據是List<BannerVO>

val banners: LiveData<List<BannerVO>> = Transformations.map(bannerList) {
	it.data ?: ArrayList()
}
複製代碼

LiveData與ViewModel結合

爲了將LiveData與Activity解耦，咱們經過ViewModel來管理這些LiveData。

class HomeVM : ViewModel() {
    private val refreshTrigger = MutableLiveData<Boolean>()
    private val api = WanApi.get()
    private val bannerList: LiveData<ApiResponse<List<BannerVO>>> = Transformations.switchMap(refreshTrigger) {
        //當refreshTrigger的值被設置時，bannerList
        api.bannerList()
    }

    val banners: LiveData<List<BannerVO>> = Transformations.map(bannerList) {
        it.data ?: ArrayList()
    }

    fun loadData() {
        refreshTrigger.value = true
    }
}
複製代碼

在activity_main.xml中加入banner佈局，這裏使用BGABanner-Android來顯示圖片

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools">
    <data>
        <variable name="vm" type="io.github.iamyours.wandroid.ui.home.HomeVM"/>
    </data>
    <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

        <cn.bingoogolapple.bgabanner.BGABanner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="120dp" android:paddingLeft="16dp" android:paddingRight="16dp" app:banner_indicatorGravity="bottom|right" app:banner_isNumberIndicator="true" app:banner_pointContainerBackground="#0000" app:banner_transitionEffect="zoom"/>

        <TextView android:layout_width="match_parent" android:layout_height="44dp" android:background="#ccc" android:gravity="center" android:onClick="@{()->vm.loadData()}" android:text="加載Banner"/>
    </LinearLayout>
</layout>
複製代碼

而後在MainActivity完成Banner初始化,經過監聽ViewModel中的banners實現輪播圖片的展現。

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        val vm = ViewModelProviders.of(this).get(HomeVM::class.java)
        binding.lifecycleOwner = this
        binding.vm = vm
        initBanner()
    }

    private fun initBanner() {
        binding.run {
            val bannerAdapter = BGABanner.Adapter<ImageView, BannerVO> { _, image, model, _ ->
                image.displayWithUrl(model?.imagePath)
            }
            banner.setAdapter(bannerAdapter)
            vm?.banners?.observe(this@MainActivity, Observer {
                banner.setData(it, null)
            })
        }
    }
}
複製代碼

最終效果以下：

加載進度顯示

SwipeRefreshLayout

請求網絡過程當中，必不可少的是加載進度的展現。這裏咱們列舉兩種經常使用的的加載方式，一種在佈局中的進度條(如SwipeRefreshLayout)，另外一種是加載對話框。爲了控制加載進度條顯示隱藏，咱們在HomeVM中添加loading變量，在調用loadData時經過loading.value=true控制進度條的顯示，在map中的轉換函數中控制進度的隱藏

val loading = MutableLiveData<Boolean>()
val banners: LiveData<List<BannerVO>> = Transformations.map(bannerList) {
    loading.value = false
    it.data ?: ArrayList()
}
fun loadData() {
    refreshTrigger.value = true
    loading.value = true
}
複製代碼

咱們在activity_main.xml的外層嵌套一個SwipeRefreshLayout，經過databinding設置加載狀態，添加刷新事件

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:layout_width="match_parent" android:layout_height="match_parent" app:onRefreshListener="@{() -> vm.loadData()}" app:refreshing="@{vm.loading}">
        ...
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
複製代碼

而後咱們再看下效果：

加載對話框KProgressHUD

爲了能和ViewModel解藕，咱們將加載對話框封裝到一個Observer中。

class LoadingObserver(context: Context) : Observer<Boolean> {
    private val dialog = KProgressHUD(context)
        .setStyle(KProgressHUD.Style.SPIN_INDETERMINATE)
        .setCancellable(false)
        .setAnimationSpeed(2)
        .setDimAmount(0.5f)

    override fun onChanged(show: Boolean?) {
        if (show == null) return
        if (show) {
            dialog.show()
        } else {
            dialog.dismiss()
        }
    }
}
複製代碼

而後在MainActivity添加這個Observer

vm.loading.observe(this, LoadingObserver(this))
複製代碼

效果：

咱們還能夠將 LoadingObserver註冊到 BaseActivity

class BaseActivity : AppCompatActivity() {
    val loadingState = MutableLiveData<Boolean>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        loadingState.observe(this, LoadingObserver(this))
    }
}
複製代碼

而後在HomeVM中添加一個attachLoading方法

class HomeVM:ViewModel{
     fun attachLoading(otherLoadingState: MutableLiveData<Boolean>) {
        loading.observeForever {
            otherLoadingState.value = it
        }
    }
}
複製代碼

最終若是想要顯示進度對話框，在BaseActivity到子類中，只需調用vm.attachLoading(loadingState)便可。

分頁請求

分頁請求是另個一經常使用請求，它的請求狀態就比刷新數據多了幾種。以wanandroid首頁文章列表api爲例，咱們在HomeVM中加入page,refreshing,moreLoading，hasMore變量控制分頁請求

private val page = MutableLiveData<Int>() //分頁數據
val refreshing = MutableLiveData<Boolean>()//下拉刷新狀態
val moreLoading = MutableLiveData<Boolean>()//上拉加載更多狀態
val hasMore = MutableLiveData<Boolean>()//是否還有更多數據
private val articleList = Transformations.switchMap(page) {
    api.articleList(it)
}

val articlePage = Transformations.map(articleList) {
    refreshing.value = false
    moreLoading.value = false
    hasMore.value = !(it?.data?.over ?: false)
    it.data
}

fun loadMore() {
    page.value = (page.value ?: 0) + 1
    moreLoading.value = true
}

fun refresh() {
    loadBanner()
    page.value = 0
    refreshing.value = true
}

複製代碼

用SmartRefreshLayout做爲分頁組件，來實現WanAndroid首頁文章列表數據的展現。

綁定SmartRefreshLayout屬性和事件

經過@BindingAdapter註解，將綁定SmartRefreshLayout屬性和事件封裝同樣，便於咱們在佈局文件經過databinding控制它。新建一個CommonBinding.kt文件，注意在gradle中引入kotlin-kapt

@BindingAdapter(value = ["refreshing", "moreLoading", "hasMore"], requireAll = false)
fun bindSmartRefreshLayout( smartLayout: SmartRefreshLayout, refreshing: Boolean, moreLoading: Boolean, hasMore: Boolean ) {
    if (!refreshing) smartLayout.finishRefresh()
    if (!moreLoading) smartLayout.finishLoadMore()
    smartLayout.setEnableLoadMore(hasMore)
}

@BindingAdapter(value = ["onRefreshListener", "onLoadMoreListener"], requireAll = false)
fun bindListener( smartLayout: SmartRefreshLayout, refreshListener: OnRefreshListener?, loadMoreListener: OnLoadMoreListener? ) {
    smartLayout.setOnRefreshListener(refreshListener)
    smartLayout.setOnLoadMoreListener(loadMoreListener)
}
複製代碼

而後在佈局中使用

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
                name="vm"
                type="io.github.iamyours.wandroid.ui.home.HomeVM"/>
    </data>

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
            android:id="@+id/refreshLayout"
            android:layout_width="match_parent"
            app:onRefreshListener="@{()->vm.refresh()}"
            app:refreshing="@{vm.refreshing}"
            app:moreLoading="@{vm.moreLoading}"
            app:hasMore="@{vm.hasMore}"
            app:onLoadMoreListener="@{()->vm.loadMore()}"
            android:layout_height="match_parent">

        <androidx.core.widget.NestedScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

            <LinearLayout
                    android:layout_width="match_parent"
                    android:orientation="vertical"
                    android:layout_height="wrap_content">

                <cn.bingoogolapple.bgabanner.BGABanner
                        android:id="@+id/banner"
                        android:layout_width="match_parent"
                        android:layout_height="140dp"
                        app:banner_indicatorGravity="bottom|right"
                        app:banner_isNumberIndicator="true"
                        app:banner_pointContainerBackground="#0000"
                        app:banner_transitionEffect="zoom"/>

                <androidx.recyclerview.widget.RecyclerView
                        android:id="@+id/recyclerView"
                        android:layout_width="match_parent"
                        android:layout_marginTop="5dp"
                        tools:listitem="@layout/item_article"
                        android:layout_height="wrap_content"/>
            </LinearLayout>
        </androidx.core.widget.NestedScrollView>
    </com.scwang.smartrefresh.layout.SmartRefreshLayout>

</layout>
複製代碼

分頁實現

而後在MainActivity中完成RecyclerView的邏輯

class MainActivity : AppCompatActivity() {
    lateinit var binding: ActivityMainBinding
    private val adapter = ArticleAdapter()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        val vm = ViewModelProviders.of(this).get(HomeVM::class.java)
        binding.lifecycleOwner = this
        binding.vm = vm
        binding.executePendingBindings()
        initBanner()
        initRecyclerView()
        binding.refreshLayout.autoRefresh()
    }

    private fun initRecyclerView() {
        binding.recyclerView.let {
            it.adapter = adapter
            it.layoutManager = LinearLayoutManager(this)
        }
        binding.vm?.articlePage?.observe(this, Observer {
            it?.run {
                if (curPage == 1) {
                    adapter.clearAddAll(datas)
                } else {
                    adapter.addAll(datas)
                }
            }
        })
    }

    private fun initBanner() {
       ...
    }
}
複製代碼

最終效果：

項目地址

github.com/iamyours/Wa…