前言

本文屬于《Android構(gòu)建MVVM》系列開篇，共六個(gè)篇章，詳見目錄樹
該系列文章旨在為Android的開發(fā)者入門MVVM架構(gòu)，掌握其基本開發(fā)模式
輔以講解Android Architecture Components,使得更好的實(shí)現(xiàn)MVVM

目錄樹

1. 《Android構(gòu)建MVVM》系列(一) 之 MVVM架構(gòu)快速入門
   • 前言
   • 分層思想
   • 什么MVC/MVP ？
   • MVVM是什么，與MVC/MVP有何區(qū)別 ？
   • Android Architecture Components(架構(gòu)組件)
   • 一個(gè)MVVM的Demo
   • 結(jié)語
2. 《Android構(gòu)建MVVM》系列(二) 之 架構(gòu)組件 LiveData
3. 《Android構(gòu)建MVVM》系列(三) 之 架構(gòu)組件 ViewModel
4. 《Android構(gòu)建MVVM》系列(四) 之 架構(gòu)組件 Room
   5.《Android構(gòu)建MVVM》系列(五) 之 構(gòu)建更好的 Demo
5. 《Android構(gòu)建MVVM》系列(六) 之 總結(jié)與展望

正文

image

1F 分層思想

分層是一種思想，同時(shí)也是一種架構(gòu)模式。它的特點(diǎn)是專職，即某一層的職責(zé)是相同的、確定的；比如我們平時(shí)所謂的Dao、Controller層...他們都有明確的職責(zé)。

image

分層思想具體表現(xiàn)為，通過抽象某一類的邏輯構(gòu)成一個(gè)水平功能面，進(jìn)而對(duì)上層提供API；多個(gè)層面相互依賴、配合提供整體解決方案。層與層之間的依賴關(guān)系是自上而下的，即上層依賴下層，下層不能依賴上層，最底層的組件沒有依賴。
初學(xué)者往往搞不明白為什么明明可以直接編碼業(yè)務(wù)邏輯，還要去做所謂的分層架構(gòu)呢？
其實(shí)對(duì)僅僅實(shí)現(xiàn)需求來說，用不用分層架構(gòu)沒有關(guān)系的，不分層照樣可以實(shí)現(xiàn)；那么為什么我們還要徒增煩惱呢？有句話說的好：“存在即合理”，也就是說既然我們的前輩研究出了所謂的分層架構(gòu)，并且沿用至今；那么就一定有它的優(yōu)點(diǎn)，一定是解決了某一領(lǐng)域的痛點(diǎn)而誕生的。
當(dāng)你的項(xiàng)目隨著需求的增加和不斷調(diào)整，不可避免的就要去改動(dòng)已有的代碼，如果項(xiàng)目規(guī)模不大還好，如果是個(gè)老古董項(xiàng)目，可能某個(gè)類里面上萬行的代碼，沒有注釋，沒有采用分層架構(gòu)，相信我，你會(huì)哭的。

image

2F 什么是MVC/MVP ？

先來說說MVC吧，其實(shí)MVX模式都是分層思想的一種具體實(shí)現(xiàn)，上文提到的分層思想實(shí)際上是一種抽象層面的分層，著重表現(xiàn)在抽象和解耦。

image

MVC實(shí)際上是一種分層思想的踐行者和改進(jìn)者，在GUI編程中，MVC已經(jīng)有幾十年的歷史了。
顧名思義M(Model)即數(shù)據(jù)模型層，Model層很有意思，對(duì)于服務(wù)端編程來說我們把MVC中的M極有可能是包括了業(yè)務(wù)處理(Service)和實(shí)體類的，對(duì)于客戶端編程來說MVC中的M可能就僅僅是數(shù)據(jù)模型，當(dāng)然以上的說法只是于我個(gè)人而言的體會(huì)，不代表廣義立場(chǎng)。
V(View)即視圖層/表現(xiàn)層，主要負(fù)責(zé)數(shù)據(jù)的展示和用戶的交互，C(Controller)即控制層，主要負(fù)責(zé)一些數(shù)據(jù)傳遞、請(qǐng)求轉(zhuǎn)發(fā)、業(yè)務(wù)處理的委派。
以上是標(biāo)準(zhǔn)意義上的MVC，對(duì)于Android來說：
Model：數(shù)據(jù)模型(實(shí)體類、持久化、IO)
View：布局文件
Controller：對(duì)應(yīng)于Activity、Fragment，包含一些業(yè)務(wù)邏輯的處理
這里我們會(huì)發(fā)現(xiàn)，Android的MVC事實(shí)上V層的職責(zé)一部分被C層承擔(dān)了，比如一些交互我們必須寫到Activity/Fragment中，這樣就會(huì)導(dǎo)致C層既包含UI操作，又有網(wǎng)絡(luò)請(qǐng)求、業(yè)務(wù)處理等；導(dǎo)致C層過于臃腫，不利于項(xiàng)目后期的維護(hù)和擴(kuò)展。

image

View：Activity/Fragment和布局文件
Presenter：負(fù)責(zé)完成View和Model之間的交互和業(yè)務(wù)邏輯
其核心是：設(shè)計(jì)一個(gè)抽象的V層接口，并由具體的View實(shí)現(xiàn)該接口，P層內(nèi)部維護(hù)一個(gè)該接口的實(shí)例引用，一般在構(gòu)造函數(shù)中傳遞進(jìn)來復(fù)制(即View層初始化P層實(shí)例時(shí))，彼時(shí)P層即可通過調(diào)用該接口來完成對(duì)View層的操作,V層也因持有P層實(shí)例，可以進(jìn)行業(yè)務(wù)邏輯處理委派。

3F MVVM是什么，與MVC/MVP有何區(qū)別 ？

MVVM是對(duì)MVP/MVC的一種改進(jìn)，既解決了MVC時(shí)代的職責(zé)不明的問題，也很好的解決了MVP模式中需要編寫過多繁瑣的接口，以及V層和P層互相依賴所產(chǎn)生的一些隱式問題。

image

在MVVM中，各層含義如下
Model：數(shù)據(jù)模型(實(shí)體類、持久化、IO)
View：Activity/Fragment和布局文件
ViewModel：業(yè)務(wù)邏輯的處理、數(shù)據(jù)的轉(zhuǎn)換、連接M層和V層的橋梁
看上去似乎和MVP中各層的職責(zé)是類似的，并沒有顯著的不同和改進(jìn)；那么我們?yōu)楹我褂肕VVM架構(gòu)呢？

引用美團(tuán)技術(shù)團(tuán)隊(duì)的一段解釋

1. 雙向綁定、數(shù)據(jù)驅(qū)動(dòng)
   在常規(guī)的開發(fā)模式中，數(shù)據(jù)變化需要更新UI的時(shí)候，需要先獲取UI控件的引用，然后再更新UI。獲取用戶的輸入和操作也需要通過UI控件的引用。在MVVM中，這些都是通過數(shù)據(jù)驅(qū)動(dòng)來自動(dòng)完成的，數(shù)據(jù)變化后會(huì)自動(dòng)更新UI，UI的改變也能自動(dòng)反饋到數(shù)據(jù)層，數(shù)據(jù)成為主導(dǎo)因素。這樣MVVM層在業(yè)務(wù)邏輯處理中只要關(guān)心數(shù)據(jù)，不需要直接和UI打交道，在業(yè)務(wù)處理過程中簡(jiǎn)單方便很多。

2. 高度解耦
   MVVM模式中，數(shù)據(jù)是獨(dú)立于UI的。
   數(shù)據(jù)和業(yè)務(wù)邏輯處于一個(gè)獨(dú)立的ViewModel中，ViewModel只需要關(guān)注數(shù)據(jù)和業(yè)務(wù)邏輯，不需要和UI或者控件打交道。UI想怎么處理數(shù)據(jù)都由UI自己決定，ViewModel不涉及任何和UI相關(guān)的事，也不持有UI控件的引用。即便是控件改變了（比如：TextView換成EditText），ViewModel也幾乎不需要更改任何代碼。它非常完美的解耦了View層和ViewModel，解決了上面我們所說的MVP的痛點(diǎn)。
3. 可復(fù)用、易測(cè)試、方便協(xié)同開發(fā)
   一個(gè)ViewModel可以復(fù)用到多個(gè)View中。同樣的一份數(shù)據(jù)，可以提供給不同的UI去做展示。對(duì)于版本迭代中頻繁的UI改動(dòng)，更新或新增一套View即可。如果想在UI上做A/B Testing，那MVVM是你不二選擇。
   MVVM的分工是非常明顯的，由于View和ViewModel之間是松散耦合的：一個(gè)是處理業(yè)務(wù)和數(shù)據(jù)、一個(gè)是專門的UI處理。所以，完全由兩個(gè)人分工來做，一個(gè)做UI（XML和Activity）一個(gè)寫ViewModel，效率更高
   ViewModel層做的事是數(shù)據(jù)處理和業(yè)務(wù)邏輯，View層中關(guān)注的是UI，兩者完全沒有依賴。不管是UI的單元測(cè)試還是業(yè)務(wù)邏輯的單元測(cè)試，都是低耦合的。在MVVM中數(shù)據(jù)是直接綁定到UI控件上的（部分?jǐn)?shù)據(jù)是可以直接反映出UI上的內(nèi)容），那么我們就可以直接通過修改綁定的數(shù)據(jù)源來間接做一些Android UI上的測(cè)試。

4F Android Architecture Components(架構(gòu)組件)

實(shí)現(xiàn)MVVM的方式和工具有很多，既可以使用Google在2015年推出的DataBinding庫，亦或是其他。也可以選擇Google IO 2017 推出的Android Architecture Components即架構(gòu)組件，這也是本文所采用的解決方案。

image

上圖是官方給出的架構(gòu)模型，包含以下組件：

• 生命周期管理庫 - Lifecycle
  • Lifecycle組件，為下面兩個(gè)組件提供了生命周期感知的基礎(chǔ)
  • LiveData組件，可觀測(cè)的、可感知生命周期的數(shù)據(jù)
  • ViewModel組件，不依賴于View、提供UI數(shù)據(jù)、橋接持久層、業(yè)務(wù)邏輯
• 數(shù)據(jù)持久化庫 - Room，Sqlite的ORM

事實(shí)上，Architecture Components實(shí)現(xiàn)了一個(gè)比較理想化的依賴方式，自上而下，單項(xiàng)依賴；VM層并不持有View層的任何引用，但卻是生命周期感知的，在新版的AS中View也不用去實(shí)現(xiàn)某些接口或繼承特定的類，AppCompatActivity已經(jīng)幫你整合了這一切。另外，關(guān)于Repository的解釋，它并不是架構(gòu)組件的成員，但是Google推薦引用Repository層，來作為我們唯一的數(shù)據(jù)來源接口，我們從圖中也很好理解，他的職責(zé)就是使VM層對(duì)數(shù)據(jù)來源是無感知的，包裝了數(shù)據(jù)來源，提供統(tǒng)一的API，供上層透明化的調(diào)用。
更多的關(guān)于Android Architecture Components的教程，歡迎關(guān)注我們后續(xù)的架構(gòu)組件篇章。

5F 一個(gè)MVVM的Demo

下面我們通過設(shè)計(jì)App《每日美文》的Demo，并使用Architecture Components架構(gòu)MVVM的方式去完成。

1. 首先我們創(chuàng)建工程，并且導(dǎo)入相關(guān)依賴

image

image

架構(gòu)組件的相關(guān)依賴↓↓↓

    // livedata viewmodel
    def lifecycle_version = "1.1.1"
    implementation "android.arch.lifecycle:extensions:$lifecycle_version"
    implementation "android.arch.lifecycle:viewmodel:$lifecycle_version"
    implementation "android.arch.lifecycle:livedata:$lifecycle_version"
    implementation "android.arch.lifecycle:runtime:$lifecycle_version"
    annotationProcessor "android.arch.lifecycle:compiler:$lifecycle_version"

視圖(布局xml)就不帶大家看了，很簡(jiǎn)單，有興趣的童鞋可以直接到Github上看源碼

2. OceanUtil是工具類(隨便封裝的一個(gè)請(qǐng)求方法，勿噴)

/**
 * Created by ocean on 2018/8/11
 * Author :  ocean
 * Email  :  348686686@qq.com
 */

object OceanUtil{

    object Holder{
        val OK_HTTP_CLIENT = OkHttpClient()
        val GSON = Gson()
    }

    private const val TAG:String = "ocean"

    /**
     * 網(wǎng)絡(luò)請(qǐng)求工具方法demo
     * @param url api接口地址
     * @param handler
     */
    fun httpRequest(url: String,params: HashMap<String,Any>,handler: Handler){
        var jsonObject = JSONObject(params)
        var requestBody = RequestBody.create(OceanConstant.MEDIA_TYPE_JSON,jsonObject.toString())
        val okHttpClient = Holder.OK_HTTP_CLIENT
        val request = Request.Builder()
                .url(url)
                .post(requestBody)
                .build()
        okHttpClient.newCall(request).enqueue(object: Callback{
            override fun onFailure(call: Call?, e: IOException?) {
                logE("請(qǐng)求失敗")
            }

            override fun onResponse(call: Call?, response: Response?) {
                logE("請(qǐng)求成功")
                val result:String = response!!.body().string().toString()
                val message = Message()
                message.what = 200
                message.obj = result
                handler.sendMessage(message)
            }

        })
    }

    /**
     * 日志打印
     * @param any
     */
    fun logE(any: Any) {
        if (OceanConstant.isDegug)
            Log.e(TAG,"-> -> -> 日志打印【 $any 】")
    }

    /**
     * 數(shù)據(jù)轉(zhuǎn)換
     */
    fun convertData(result:String): OneArticleModel {
        return Holder.GSON.fromJson(
                result,
                object : TypeToken<OneArticleModel>(){}.type
        )
    }

}

OK，我們準(zhǔn)備自下而上的去構(gòu)建它

3. 第二步：第一步：創(chuàng)建實(shí)體Model

這里我們使用GsonFormat插件直接生成Java實(shí)體類，也就是我們的每日美文的Model;都是一些屬性和get/set方法，我們用到的字段也就三四個(gè),大家瀏覽一遍即可.

/**
 * Created by ocean on 2018/8/11
 * Author :  ocean
 * Email  :  348686686@qq.com
 */
public class OneArticleModel {

    /**
     * ResultCode : 1
     * ErrCode : OK
     * Body : {"id":4861,"vol":"VOL.2135","img_url":"http://image.wufazhuce.com/FhUGpJBjkcod8DHH7OSieT-8ODKz","img_author":"Ethan Yang","img_kind":"攝影","date":"2018-08-11 06:00:00","url":"http://m.wufazhuce.com/one/2165","word":"自己被傷害的時(shí)候，有的人生氣，有的人傷心。生氣的人是憎恨的，將自己束之高閣而去攻擊對(duì)方，歇斯底里地喊叫起來。懂得悲傷的人，一定懂得愛，只是靜靜地如時(shí)間停滯般，獨(dú)自哀傷。人們總說愛恨參半，其實(shí)這是不可能存在的，既愛之，何恨之。","word_from":"《高嶺之花》","word_id":2165}
     */

    private int ResultCode;
    private String ErrCode;
    private BodyBean Body;

    public int getResultCode() {
        return ResultCode;
    }

    public void setResultCode(int ResultCode) {
        this.ResultCode = ResultCode;
    }

    public String getErrCode() {
        return ErrCode;
    }

    public void setErrCode(String ErrCode) {
        this.ErrCode = ErrCode;
    }

    public BodyBean getBody() {
        return Body;
    }

    public void setBody(BodyBean Body) {
        this.Body = Body;
    }

    @Override
    public String toString() {
        return "OneArticleModel{" +
                "ResultCode=" + ResultCode +
                ", ErrCode='" + ErrCode + '\'' +
                ", Body=" + Body +
                '}';
    }

    public static class BodyBean {
        /**
         * id : 4861
         * vol : VOL.2135
         * img_url : http://image.wufazhuce.com/FhUGpJBjkcod8DHH7OSieT-8ODKz
         * img_author : Ethan Yang
         * img_kind : 攝影
         * date : 2018-08-11 06:00:00
         * url : http://m.wufazhuce.com/one/2165
         * word : 自己被傷害的時(shí)候，有的人生氣，有的人傷心。生氣的人是憎恨的，將自己束之高閣而去攻擊對(duì)方，歇斯底里地喊叫起來。懂得悲傷的人，一定懂得愛，只是靜靜地如時(shí)間停滯般，獨(dú)自哀傷。人們總說愛恨參半，其實(shí)這是不可能存在的，既愛之，何恨之。
         * word_from : 《高嶺之花》
         * word_id : 2165
         */

        private int id;
        private String vol;
        private String img_url;
        private String img_author;
        private String img_kind;
        private String date;
        private String url;
        private String word;
        private String word_from;
        private int word_id;

        public int getId() {
            return id;
        }

        public void setId(int id) {
            this.id = id;
        }

        public String getVol() {
            return vol;
        }

        public void setVol(String vol) {
            this.vol = vol;
        }

        public String getImg_url() {
            return img_url;
        }

        public void setImg_url(String img_url) {
            this.img_url = img_url;
        }

        public String getImg_author() {
            return img_author;
        }

        public void setImg_author(String img_author) {
            this.img_author = img_author;
        }

        public String getImg_kind() {
            return img_kind;
        }

        public void setImg_kind(String img_kind) {
            this.img_kind = img_kind;
        }

        public String getDate() {
            return date;
        }

        public void setDate(String date) {
            this.date = date;
        }

        public String getUrl() {
            return url;
        }

        public void setUrl(String url) {
            this.url = url;
        }

        public String getWord() {
            return word;
        }

        public void setWord(String word) {
            this.word = word;
        }

        public String getWord_from() {
            return word_from;
        }

        public void setWord_from(String word_from) {
            this.word_from = word_from;
        }

        public int getWord_id() {
            return word_id;
        }

        public void setWord_id(int word_id) {
            this.word_id = word_id;
        }

        @Override
        public String toString() {
            return "BodyBean{" +
                    "id=" + id +
                    ", vol='" + vol + '\'' +
                    ", img_url='" + img_url + '\'' +
                    ", img_author='" + img_author + '\'' +
                    ", img_kind='" + img_kind + '\'' +
                    ", date='" + date + '\'' +
                    ", url='" + url + '\'' +
                    ", word='" + word + '\'' +
                    ", word_from='" + word_from + '\'' +
                    ", word_id=" + word_id +
                    '}';
        }
    }
}

4. 第二步：引入Repository層
前面我們說過，Repository層是為了屏蔽底層數(shù)據(jù)來源，對(duì)上層調(diào)用透明，

/**
 * Created by ocean on 2018/8/12
 * Author :  ocean
 * Email  :  348686686@qq.com
 */

class MainRepository(application: Application){

    private var liveData = MutableLiveData<OneArticleModel>()

    init {
       getHttpData()
    }

    fun getLiveDta():MutableLiveData<OneArticleModel>{
        return liveData
    }

    fun getHttpData(){
        val params : HashMap<String,Any> = HashMap()
        params["TransCode"] = "030111"
        params["OpenId"] = "123456789"
        OceanUtil.httpRequest(
                OceanConstant.URL,
                params,
                object : Handler(){
                    override fun handleMessage(msg: Message?) {
                        super.handleMessage(msg)
                        val result = msg?.obj as String
                        OceanUtil.logE("打印請(qǐng)求結(jié)果：$result")
                        liveData.value = OceanUtil.convertData(result)
                    }
                }
        )
    }

}

可以看到，內(nèi)部獲取數(shù)據(jù)實(shí)際上使用的就是Okhttp的工具方法，不過對(duì)于調(diào)用者來說，上層并不關(guān)心數(shù)據(jù)是從Sqlite讀出來的，還是網(wǎng)絡(luò)請(qǐng)求響應(yīng)的，亦或是其他數(shù)據(jù)來源。這樣在Repository層我們可以很輕松的完成緩存、數(shù)據(jù)轉(zhuǎn)化等操作，而不影響上層。
后面的文章，我們會(huì)使用Room對(duì)網(wǎng)絡(luò)數(shù)據(jù)進(jìn)行持久化緩存，在無網(wǎng)絡(luò)環(huán)境下，保證用戶使用軟件的完整性，給用戶更好的體驗(yàn)。

5. 第三步：創(chuàng)建你的ViewModel

/**
 * Created by ocean on 2018/8/12
 * Author :  ocean
 * Email  :  348686686@qq.com
 */
class MainViewModel(application: Application) : AndroidViewModel(application) {

    private var repository : MainRepository? = null
    private var data:MutableLiveData<OneArticleModel>? = null

    init {
        repository = MainRepository(application)
        data = repository?.getLiveDta()
    }

    fun getData(): MutableLiveData<OneArticleModel>? {
        return data
    }

    fun requestData(){
        repository?.getHttpData()
    }

}

VM層看起來很簡(jiǎn)潔，是的。得益于MutableLiveData(LiveData的子類)，我們不必要做很多復(fù)雜的工作；就像這樣，我們僅僅只是聲明了一個(gè)MutableLiveData<OneArticleModel>的引用、獲取實(shí)例、調(diào)用Repository層得到數(shù)據(jù)這樣微小的工作。
6. 第四步：接入使用

class MainActivity : AppCompatActivity() {

    private var vm : MainViewModel? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // 獲取vm對(duì)象
        vm = ViewModelProviders.of(this).get(MainViewModel::class.java)
        initData()
    }

    fun initData(){
        btn_get.setOnClickListener(View.OnClickListener {
            vm?.requestData()
        })
        vm?.getData()?.observe(this, Observer {
            it?.let { it1 -> updateView(it1) }
        })
    }

    fun updateView(model:OneArticleModel){
        tv_title.text = "《 ${model.body.word_from} 》"
        tv_author.text = "—— " +  model.body.img_author
        tv_digest.text = model.body.word
        Glide
                .with(this)
                .load(model.body.img_url)
                .into(img_left)
        Toast.makeText(this,"更新成功",Toast.LENGTH_SHORT).show()
    }

}

就像這樣，我們只需要通過ViewModelProviders.of().get方法得到VM的引用，接下來我們只需要獲取LiveData對(duì)象的引用，對(duì)其添加.observe()方法，然后觀察LiveData數(shù)據(jù)的變化，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，系統(tǒng)會(huì)調(diào)用Observer接口的onChanged()方法，所以我們只需要將更新UI的代碼卸載onChanged()即可。

7. 至此，我們已經(jīng)完成了這個(gè)Simple Demo(附Api接口)

項(xiàng)目預(yù)覽

{
    "ResultCode": 1,
    "ErrCode": "OK",
    "Body": {
        "id": 4860,
        "vol": "VOL.2136",
        "img_url": "http://image.wufazhuce.com/FpXhraPX6RVOiEVBkxL2mJzd1Lb5",
        "img_author": "狐貍狐貍魚",
        "img_kind": "插畫",
        "date": "2018-08-12 06:00:00",
        "url": "http://m.wufazhuce.com/one/2166",
        "word": "還是想在夏天與你相戀，不僅是夜晚溫?zé)岬娘L(fēng)，清爽的白色短袖，還是冰鎮(zhèn)西瓜或者幻想中的漫長(zhǎng)暑假，可能是曾經(jīng)覺得夏天就屬于慵懶，所以才會(huì)覺得要搭配一個(gè)你，在懶洋洋里帶著些許的緊張。是你啊，又見面了。",
        "word_from": "咸貴人",
        "word_id": 2166
    }
}

結(jié)語

不知不覺已經(jīng)寫了這么多了，這是作者第一次寫這么長(zhǎng)的技術(shù)文章。
在發(fā)稿前自己Review的時(shí)候，發(fā)覺文章貌似沒有符合“單一職責(zé)原則”
自己也在想，技術(shù)類文章在講重心之前，做一些前置知識(shí)點(diǎn)的解釋，是否必要。比如本文:分層思想->MVC/MVP->MVVM，相比較開門見山的講解MVVM是更好理解還是覺得更加臃腫呢？
所以，筆者也希望大家如果讀了這篇文章，可以在留言區(qū)評(píng)論自己的感受，我將進(jìn)一步改善文章框架，盡量讓大家可以高效的學(xué)習(xí)。
最后，筆者技術(shù)能力和文筆能力有限，有什么寫的不妥的地方，也請(qǐng)大家予以斧正和諒解。

歡迎大家關(guān)注我的公眾號(hào)