使用Kotlin構(gòu)建MVVM應(yīng)用程序—第一部分:入門篇

目錄

寫在前面

使用DataBinding已經(jīng)有一年多的時(shí)間,Kotlin也寫了好幾個(gè)月了。在github上看了許多MVVM架構(gòu)的項(xiàng)目(包括google的todo)抛虫,但都沒達(dá)到自己理想中的MVVM氧猬,可以說一千個(gè)人眼中就有一千個(gè)哈姆雷特荷愕,雖說都知道MVVM的概念额获,但是寫法卻是各不相同装畅,有好有壞柜某,結(jié)果越寫越偏嗽元。到前段時(shí)間靜下心來,開始使用kotlin喂击,并遵循google的App開發(fā)架構(gòu)指南剂癌,才找到一種較好的構(gòu)建MVVM應(yīng)用程序的方式,使用kotlin來編寫更是事半功倍翰绊,在這里分享給大家佩谷。
預(yù)計(jì)打算出4-5篇的樣子,這是第一部分的入門篇辞做,后續(xù)更新的話也會更新鏈接琳要。
閱讀正文之前,請先了解Databinding的基礎(chǔ)語法秤茅,在這里可以進(jìn)行學(xué)習(xí)【Data Binding(數(shù)據(jù)綁定)用戶指南】

開始正題稚补。

首先:什么是MVVM?

MVVM是Model-View-ViewModel的簡寫框喳,是有別于MVC和MVP的另一種架構(gòu)模式课幕。

相比于MVP,MVVM沒有多余的回調(diào)五垮,利用Databinding框架就可以將ViewModel中的數(shù)據(jù)綁定到UI上乍惊,從而讓開發(fā)者只需要更新ViewModel中的數(shù)據(jù),就可以改變UI放仗。

mvvm
再來講一下分別的作用
  • Model層:負(fù)責(zé)提供數(shù)據(jù)源給ViewModel润绎,包含實(shí)體類,網(wǎng)絡(luò)請求和本地存儲等功能
  • ViewModel:將Model層提供的數(shù)據(jù)根據(jù)View層的需要進(jìn)行處理,通過DataBinding綁定到相應(yīng)的UI上
  • View:Activity莉撇、Fragment呢蛤、layout.xml、Adapter棍郎、自定義View等等其障,負(fù)責(zé)將三者聯(lián)系起來。

一個(gè)最基礎(chǔ)的例子

這里我們定義一個(gè)實(shí)體Animal.kt

/**
 * 頁面描述:Animal
 *
 * Created by ditclear on 2017/11/18.
 */
data class Animal(val name:String,var shoutCount:Int)

它有兩個(gè)參數(shù)nameshoutCount涂佃。name代表動物的名稱励翼,shoutCount表示叫了幾下。

看看我們需要做什么辜荠。汽抚。

todo
  1. 展示需要的信息
  2. 點(diǎn)擊shout按鈕時(shí),shouCount+1并更新信息

很簡單伯病,幾行代碼就搞定了殊橙,先看看不用任何架構(gòu)怎么做的

class AnimalActivityMVC : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.animal_activity)
        val animal=Animal("dog",0)
        findViewById<TextView>(R.id.info_tv).text="${animal.name} 叫了 ${animal.shoutCount}聲.."
        findViewById<View>(R.id.action_btn).setOnClickListener { 
            animal.shoutCount++
            findViewById<TextView>(R.id.info_tv).text="${animal.name} 叫了 ${animal.shoutCount}聲.."
        }
    }
}
再來看看MVVM怎么處理,以示區(qū)別

相比于前者狱从,我們需要為AnimalActivity創(chuàng)建對應(yīng)的AnimalViewModel

/**
 * 頁面描述:AnimalViewModel
 * @param animal 數(shù)據(jù)源Model(MVVM 中的M),負(fù)責(zé)提供ViewModel中需要處理的數(shù)據(jù)
 * Created by ditclear on 2017/11/17.
 */
class AnimalViewModel(val animal: Animal){
    //////////////////data//////////////
    val info= ObservableField<String>("${animal.name} 叫了 ${animal.shoutCount}聲..")
    //////////////////binding//////////////
    fun shout(){
        animal.shoutCount++
        info.set("${animal.name} 叫了 ${animal.shoutCount}聲..")
    }
}

然后在View層的AnimalActivity.kt中將三者聯(lián)系起來

class AnimalActivity : AppCompatActivity() {

    lateinit var mBinding : AnimalActivityBinding
    lateinit var mViewMode : AnimalViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding=DataBindingUtil.setContentView(this,R.layout.animal_activity)
        //////model
        val animal= Animal("dog", 0)
        /////ViewModel
        mViewMode= AnimalViewModel(animal)
        ////binding
        mBinding.vm=mViewMode
    }
}

目錄架構(gòu)現(xiàn)在是這個(gè)樣子:


Databinding強(qiáng)化了layout文件在Android中的地位,許多顯示和點(diǎn)擊事件都在xml中進(jìn)行了處理叠纹。

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

    <data>
        <!--需要的viewModel,通過mBinding.vm=mViewMode注入-->
        <variable
                name="vm"
                type="io.ditclear.app.viewmodel.AnimalViewModel"/>
    </data>

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="io.ditclear.app.view.AnimalActivity">

        <TextView
                android:id="@+id/info_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{vm.info}"
                tools:text="dog1叫了1聲.."
                android:layout_marginBottom="24dp"
                android:layout_gravity="center"/>

        <Button
                android:id="@+id/action_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAllCaps="false"
                android:text="shout"
                android:layout_marginTop="24dp"
                android:layout_gravity="center"
                android:onClick="@{()->vm.shout()}"/>

    </FrameLayout>
</layout>

可以看到android:text="@{vm.info}"android:onClick="@{()->vm.shout()}"季研,分別調(diào)用了viewModel中的變量和方法。

所以大概的流程是

  1. 用戶點(diǎn)擊按鈕誉察,調(diào)用AnimalViewModelshout方法
  2. ViewModel更新shoutCount和info數(shù)據(jù),然后利用綁定自動更新了UI

流程很簡單与涡,但是反映了MVVM的思想,又有人會說持偏,這樣相比前者不是都多了那么多代碼嗎驼卖?

嗯,確實(shí)多了一個(gè)文件鸿秆,但是卻做到了關(guān)注點(diǎn)分離和數(shù)據(jù)驅(qū)動UI酌畜。

借google的話來說
架構(gòu)準(zhǔn)則

另一個(gè)好處就是可以做單元測試,純的kotlin代碼寫著再舒服不過卿叽,而且可以保證數(shù)據(jù)的正確性桥胞。相比于run app需要十幾秒或者幾分鐘、十幾分鐘考婴,run 一次單元測試是以毫秒記的贩虾,效率是很可觀的。

結(jié)尾

github地址:https://github.com/ditclear/MVVM-Android

這是使用Kotlin構(gòu)建MVVM項(xiàng)目的第一部分沥阱,也是入門篇缎罢,所以很簡單,介紹了一下MVVM的概念和基礎(chǔ)寫法,第二篇我將加入retrofit網(wǎng)絡(luò)請求和Rxjava來談?wù)勅绾屋^好的處理網(wǎng)絡(luò)數(shù)據(jù)及綁定生命周期策精。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末舰始,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子蛮寂,更是在濱河造成了極大的恐慌蔽午,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件酬蹋,死亡現(xiàn)場離奇詭異及老,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)范抓,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門骄恶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人匕垫,你說我怎么就攤上這事僧鲁。” “怎么了象泵?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵寞秃,是天一觀的道長。 經(jīng)常有香客問我偶惠,道長春寿,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任忽孽,我火速辦了婚禮绑改,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘兄一。我一直安慰自己厘线,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布出革。 她就那樣靜靜地躺著造壮,像睡著了一般。 火紅的嫁衣襯著肌膚如雪骂束。 梳的紋絲不亂的頭發(fā)上费薄,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機(jī)與錄音栖雾,去河邊找鬼楞抡。 笑死,一個(gè)胖子當(dāng)著我的面吹牛析藕,可吹牛的內(nèi)容都是我干的召廷。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼竞慢!你這毒婦竟也來了先紫?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤筹煮,失蹤者是張志新(化名)和其女友劉穎遮精,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體败潦,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡本冲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了劫扒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片檬洞。...
    茶點(diǎn)故事閱讀 39,690評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖沟饥,靈堂內(nèi)的尸體忽然破棺而出添怔,到底是詐尸還是另有隱情,我是刑警寧澤贤旷,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布广料,位于F島的核電站,受9級特大地震影響幼驶,放射性物質(zhì)發(fā)生泄漏性昭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一县遣、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧汹族,春花似錦萧求、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至榴徐,卻和暖如春守问,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背坑资。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工耗帕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人袱贮。 一個(gè)月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓仿便,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子嗽仪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容