前言
本文是 Android官方架構組件 系列的番外篇,因爲目前國內關於DataBinding
雙向綁定的博客,講的實在是五花八門,很多文章看完之後仍然一頭霧水,特此專門寫一篇文章進行總結。
本文默認讀者對DataBinding
的使用有了初步的瞭解。
什麼是雙向綁定?
DataBinding
的本身是對View
層狀態的一種觀察者模式的實現,通過讓View
與ViewModel
層可觀察的對象(比如LiveData
)進行綁定,當ViewModel
層數據發生變化,View
層也會自動進行UI的更新。
上述我講的是DataBinding
最基礎的用法,即 單向綁定 ,其優勢在於,將View
層抽象爲一個純Java
的可觀察者——這意味着ViewModel
層相關代碼是完全可直接用於進行 單元測試。
但實際的開發中,單向綁定並非是足夠的,在一些特定的場景,我們也需要用到 雙向綁定。
比如說,對於一個TextView
的內容展示,一般情況下,我們只是用來通過將一個String
類型的數據對其進行渲染:
顯而易見,數據的流向是單向的,換句話說,我們認爲TextView
對DataSource
只進行了 讀 操作——如果此時進行了網絡請求,我們需要用到DataSource
某個屬性作爲參數,我們依然可以毫無顧忌從DataSource
取值。
但是換一個場景,如果我們把TextView
換成一個EditText
,接下來我們需要面對的則截然不同,比如登錄界面:
這似乎沒有什麼問題,我們依然通過一個LiveData
對EditText
進行了單向綁定:
問題發生了,當我們對 輸入框 進行編輯,EditText
的UI發生了變更,但是LiveData
內的數據卻沒有更新,當我們想要在ViewModel
層請求登錄的API接口時,我們就必須要去通過editText.getText()
才能獲取用戶輸入的密碼。
於是我們希望,即使是EditText
的內容發生了變更,但是LiveData
內的數據也能和EditText
保持內容的同步——這樣我們就不需要讓ViewModel
層持有View
層的引用,在請求接口時,直接從LiveData
中取值即可:
這就是雙向綁定的意義。
使用場景是什麼
什麼適合使用 雙向綁定 呢,還記得上文中的一句話嗎:
對於單向綁定來說,數據的流向是單向的,換句話說,我們認爲
TextView
對DataSource
只進行了 讀 操作。
現在我們定義,當 不確定的操作發生時 ——通常,這種操作代表着用戶對UI控件的交互,這時UI的變化需要影響到ViewModel
層的數據狀態(除了 數據驅動視圖 之外,視圖也在驅動數據,以方便作爲參數將來進行網絡請求等等操作),這時 雙向綁定 就可以大展身手了。
顯然上文中的EditText
的是 雙向綁定 經典的使用場景之一,此外,雙向綁定的使用場景非常常見,比如CheckBox
:
當用戶選中了CheckBox
,我們當然希望ViewModel
層的LiveData<Boolean>
狀態進行對應的更新,以便將來我們直接從LiveData
中取值作爲參數進行網絡請求。
而如果沒有雙向綁定,用戶操作了UI,我們就需要 手動添加代碼保證狀態的同步——比如checkBox.setOnCheckChangedListener()
,否則,就會在接下來的操作中得到與預期不同的結果。
聽起來好像很麻煩,那麼究竟如何使用呢?
幸運的是,Android原生控件中,絕大多數的雙向綁定使用場景,DataBinding
都已經幫我們實現好了:
這意味着我們並不需要去手動實現複雜的雙向綁定,以上文的EditText
爲例,我們只需要通過@={表達式}
進行雙向的綁定:
<EditText
android:id="@+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@={ fragment.viewModel.password }" />
相比單向綁定,只需要多一個=
符號,就能保證View
層和ViewModel
層的 狀態同步 了。
難點在哪?
雙向綁定定義好之後,使用起來很簡單,但定義卻稍微比單向綁定麻煩一些,即使原生的控件DataBinding
已經幫助我們實現好了,對於三方的控件或者自定義控件,還需要我們自己實現。
本文以SwipeRefreshLayout
爲例,讓我們來看看其 雙向綁定 實現的方式:
object SwipeRefreshLayoutBinding {
@JvmStatic
@BindingAdapter("app:bind_swipeRefreshLayout_refreshing")
fun setSwipeRefreshLayoutRefreshing(
swipeRefreshLayout: SwipeRefreshLayout,
newValue: Boolean
) {
if (swipeRefreshLayout.isRefreshing != newValue)
swipeRefreshLayout.isRefreshing = newValue
}
@JvmStatic
@InverseBindingAdapter(
attribute = "app:bind_swipeRefreshLayout_refreshing",
event = "app:bind_swipeRefreshLayout_refreshingAttrChanged"
)
fun isSwipeRefreshLayoutRefreshing(swipeRefreshLayout: SwipeRefreshLayout): Boolean =
swipeRefreshLayout.isRefreshing
@JvmStatic
@BindingAdapter(
"app:bind_swipeRefreshLayout_refreshingAttrChanged",
requireAll = false
)
fun setOnRefreshListener(
swipeRefreshLayout: SwipeRefreshLayout,
bindingListener: InverseBindingListener?
) {
if (bindingListener != null)
swipeRefreshLayout.setOnRefreshListener {
bindingListener.onChange()
}
}
}
有點晦澀,是不是?我們先不要糾結於細節的實現,先來看看代碼中是如何使用的吧:
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:bind_swipeRefreshLayout_refreshing="@={ fragment.viewModel.refreshing }">
<androidx.recyclerview.widget.RecyclerView/>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
refreshing
實際就只是一個LiveData
:
val refreshing: MutableLiveData<Boolean> = MutableLiveData()
這裏的雙向綁定,意義在於,當我們爲LiveData
手動設置值時,SwipeRefreshLayout
的UI也會發生對應的變更;同理,當用戶手動下拉執行刷新操作時,LiveData
的值也會對應的變成爲true
(代表刷新中的狀態)。
相比於其它的方式,雙向綁定將SwipeRefreshLayout
的刷新狀態抽象成爲了一個LiveData<Boolean>
——我們只需要在xml中定義好,之後就可以在ViewModel
中圍繞這個狀態進行代碼的編寫,不同於view.setOnRefreshListener()
的方式,這種代碼是純Java的,我們可以針對每一行代碼進行純JVM的單元測試。
本小節的所有代碼你都可以在 這裏 獲取。
整理思路,按部就班實現雙向綁定
說了這麼多,但是我們一行代碼都還沒有實現,不着急,因爲編碼只是其中的一個步驟,最重要的是 整理一個流暢的思路,這樣,在接下來的編碼階段,你會如有神助。
1.實現單向綁定
我們知道,雙向綁定的前提是單向綁定,因此,我們先配置好對應單向綁定的接口:
@JvmStatic
@BindingAdapter("app:bind_swipeRefreshLayout_refreshing")
fun setSwipeRefreshLayoutRefreshing(
swipeRefreshLayout: SwipeRefreshLayout,
newValue: Boolean
) {
swipeRefreshLayout.isRefreshing = newValue
}
我們通過將LiveData
的值和DataBinding
綁定在一起,每當LiveData
的狀態發生了變更,SwipeRefreshLayout
的刷新狀態也會發生對應的更新。
我們實現了數據驅動視圖
的效果,接下來我們需要思考的是,我們如何才能知道用戶會執行下拉操作呢?
2.觀察View層的狀態變更
只有觀察到View層的狀態變更,我們才能驅動LiveData
進行對應的更新,其實很簡單,通過swipeRefreshlayout.setOnRefreshListener()
即可:
@JvmStatic
@BindingAdapter(
"app:bind_swipeRefreshLayout_refreshingAttrChanged",
requireAll = false
)
fun setOnRefreshListener(
swipeRefreshLayout: SwipeRefreshLayout,
bindingListener: InverseBindingListener?
) {
if (bindingListener != null)
swipeRefreshLayout.setOnRefreshListener {
bindingListener.onChange() // 1
}
}
注意我註釋了 //1
的地方,每當swipeRefreshLayout
刷新狀態被用戶的操作改變,我們都能夠在這裏監聽到,並交給InverseBindingListener
這個 信使 去通知DataBinding
:
嗨!View層的狀態發生了變更,你快去通知
LiveData
也進行對應數據的更新呀!
新的問題來了,現在DataBinding
已經知道需要去通知LiveData
進行對應數據的更新了,關鍵是——
3. 我要把什麼數據交給LiveData?
是的,即使LiveData
需要進行更新,但是它並不知道要新的狀態是什麼。
LiveData: 老哥,你倒是把數據給我啊!
我們急需將SwipeRefreshLayout
最新狀態告訴LiveData
,因此我們通過InverseBindingAdapter
註解和 步驟二 中去進行對接:
@JvmStatic
@InverseBindingAdapter(
attribute = "app:bind_swipeRefreshLayout_refreshing",
event = "app:bind_swipeRefreshLayout_refreshingAttrChanged" // 2 【注意!】
)
fun isSwipeRefreshLayoutRefreshing(swipeRefreshLayout: SwipeRefreshLayout): Boolean =
swipeRefreshLayout.isRefreshing
注意到 //2
註釋的那行代碼沒有,我們通過相同的tag
(即app:bind_swipeRefreshLayout_refreshingAttrChanged
這個字符串,步驟二中我們也聲明瞭相同的字符串),和 步驟二 中的代碼塊形成了綁定對接。
現在,LiveData
知道如何進行反向的數據更新了:
每當用戶下拉刷新,
InverseBindingListener
通知DataBinding
,LiveData
就會從swipeRefreshLayout.isRefreshing
得知最新的狀態,並進行數據的同步更新。
4.不要忘了防止死循環!
細心的你多少已經感覺到了不對勁的地方,現在的雙向綁定有一個致命的問題,那就是無限循環會導致的ANR異常。
當View
層UI狀態被改變,ViewModel
對應發生更新,同時,這個更新又回通知View
層去刷新UI,這個刷新UI的操作又會通知ViewModel
去更新…
因此,爲了保證不會無限的死循環導致App的ANR異常的發生,我們需要在最初的代碼塊中加一個判斷,保證,只有View狀態發生了變更,纔會去更新UI:
@JvmStatic
@BindingAdapter("app:bind_swipeRefreshLayout_refreshing")
fun setSwipeRefreshLayoutRefreshing(
swipeRefreshLayout: SwipeRefreshLayout,
newValue: Boolean
) {
if (swipeRefreshLayout.isRefreshing != newValue) // 只有新老狀態不同才更新UI
swipeRefreshLayout.isRefreshing = newValue
}
小結
本文的初始計劃中,還有一個模塊是關於 雙向綁定的源碼分析,寫到後來又覺得沒有必要了,因爲即使是 源碼,也只是將上文中實現的思路囉嗦複述了一遍而已。
雙向綁定本身是一個極具爭議的功能;事實上,DataBinding
本身也極具爭議——DataBinding
的好用與否,用或者不用都不重要,重要的是我們需要去正視它展現出來的思想:即如何將一個 難以測試,狀態多變 的View, 通過代碼抽象爲 易於維護和測試 的純Java的狀態?
DataBinding
將煩不勝煩的View
層代碼抽象爲了易於維護的數據狀態,同時極大減少了View
層向ViewModel
層抽象的 膠水代碼,這就是最大的優勢。
當然,DataBinding
並不一定就是正解,事實上,RxBinding
就是另外一個優秀的解決方案,同樣以SwipeRefreshLayout
爲例,我依然可以將其抽象爲一個可觀察的Observable<Boolean>
——前者通過在xml中對數據進行綁定和觀察,後者通過RxJava
對View的狀態抽象爲一個流,但最終,兩者在思想上殊途同歸。
系列文章
爭取打造 Android Jetpack 講解的最好的博客系列:
Android Jetpack 實戰篇:
關於我
Hello,我是卻把清梅嗅,如果您覺得文章對您有價值,歡迎 ❤️,也歡迎關注我的個人博客或者Github。
如果您覺得文章還差了那麼點東西,也請通過關注督促我寫出更好的文章——萬一哪天我進步了呢?