聲明:本文為MarkZhai原創,授權發布在Android程式設計師公眾號,轉載請參考原文協議。
原文:http://blog.zhaiyifan.cn/2016/07/06/android-new-project-from-0-p8/
本文是MarkZhai同學系列文章的第8篇,剛剛完稿,此文承接 《從零開始的Android新項目7 - Data Binding入門篇》,繼續介紹Data Binding的進階內容,建議沒看過上篇的同學先前往閱讀,效果更佳,第7篇早前並沒有在我公眾號發布,為方便各位連貫閱讀,也在今天第2篇文章裡一併轉載給大家。
Demo源碼庫:DataBindingSample。
承接上篇,本篇繼續講解一些更加進階的內容,包括:列表綁定、自定義屬性、雙向綁定、表達式鏈、Lambda表達式、動畫、Component注入(測試)等。
列表綁定App中經常用到列表展示,Data Binding在列表中一樣可以扮演重要的作用,直接綁定數據和事件到每一個列表的item。
RecyclerView過去我們往往會使用ListView、GridView、或者GitHub上一些自定義的View來做瀑布流。自從RecyclerView出現後,我們有了新選擇,只需要使用LayoutManager就可以。RecyclerView內置的垃圾回收,ViewHolder、ItemDecoration裝飾器機制都讓我們可以毫不猶豫地替換掉原來的ListView和GridView。
所以本篇僅拿RecyclerView做例子。
Generic Binding我們只需要定義一個基類ViewHolder,就可以方便地使用上Data Binding:
public class BindingViewHolder<T extends ViewDataBinding> extends RecyclerView.ViewHolder {
protected final T mBinding;
public BindingViewHolder(T binding) {
super(binding.getRoot());
mBinding = binding;
}
public T getBinding() {
return mBinding;
}
}
Adapter可以直接使用該ViewHolder,或者再繼承該ViewHolder,T使用具體Item的Binding類(以便直接訪問內部的View)。至於Listener,可以在onBindViewHolder中進行綁定,做法類似於普通View,不做贅述。
由於同一個adapter未必只有一種ViewHolder,可能有好幾種View type,所以在onBindViewHolder中,我們只能獲取基類的ViewHolder類型,也就是BindingViewHolder,所以無法去做具體的set操作,如setEmployee。這時候就可以使用setVariable接口,然後通過BR來指定variable的name。
又比如我們可能有多重view type對應的xml,可以將對應的variable name全都寫為item,這樣可以避免強制轉換Binding類去做set操作。類似地,監聽器也能都統一取名為listener或者presenter。
開源方案及其局限性evant / binding-collection-adapter
radzio / android-data-binding-recyclerview
均提供了簡化的RV data binding方案。
前者可以直接在layout的RV上,設置對應的items和itemView進去,也支持多種view type,還能直接設定對應的LayoutManager。
後者類似地,提供了xml中直接綁定RV的items和itemView的功能。
相比來說前者的功能更強大一些。但這些開源庫對應地都喪失了靈活性,ViewModel需要遵循規範,事件的綁定也比較死板,不如自己繼承Adapter來得強大。唯一的好處也就是可以少寫點代碼了。
自定義屬性默認的android命名空間下,我們會發現並不是所有的屬性都能直接通過data binding進行設置,比如margin,padding,還有自定義View的各種屬性。
遇到這些屬性,我們就需要自己去定義它們的綁定方法。
Setter就像Data Binding會自動去查找get方法一下,在遇到屬性綁定的時候,它也會去自動尋找對應的set方法。
拿DrawerLayout舉一個例子:
<android.support.v4.widget.DrawerLayout
android:layout_width=「wrap_content」
android:layout_height=「wrap_content」
app:scrimColor=「@{@color/scrimColor}」/>
如此,通過使用app命名空間,data binding就會去根據屬性名字找對應的set方法,scrimColor -> setScrimColor:
public void setScrimColor(@ColorInt int color) {
mScrimColor = color;
invalidate();
}
如果找不到的話,就會在編譯期報錯。
利用這種特性,對一些第三方的自定義View,我們就可以繼承它,來加上我們的set函數,以對其使用data binding。
比如Fresco的SimpleDraweeView,我們想要直接在xml指定url,就可以加上:
public void setUrl(String url) {
view.setImageURI(TextUtils.isEmpty(url) ? null : Uri.parse(url));
}
這般,就能直接在xml中去綁定圖片的url。這樣是不是會比較麻煩呢,而且有一些系統的View,難道還要繼承它們然後用自己實現的類?其實不然,我們還有其他方法可以做到自定義屬性綁定。
BindingMethods如果View本身就支持這種屬性的set,只是xml中的屬性名字和java代碼中的方法名不相同呢?難道就為了這個,我們還得去繼承View,使代碼產生冗餘?
當然沒有這麼笨,這時候我們可以使用BindingMethods注釋。
android:tint是給ImageView加上著色的屬性,可以在不換圖的前提下改變圖標的顏色。如果我們直接對android:tint使用data binding,由於會去查找setTint方法,而該方法不存在,則會編譯出錯。而實際對應的方法,應該是setImageTintList。
這時候我們就可以使用BindingMethod指定屬性的綁定方法:
@BindingMethods({
@BindingMethod(
type = 「android.widget.ImageView」,
attribute = 「android:tint」,
method = 「setImageTintList」),
})
我們也可以稱BindingMethod為Setter重命名。
BindingAdapter如果沒有對應的set方法,或者方法籤名不同怎麼辦?BindingAdapter注釋可以幫我們來做這個。
比如View的android:paddingLeft屬性,是沒有對應的直接進行設置的方法的,只有setPadding(left, top, right, bottom),而我們又不可能為了使用Data Binding去繼承修改這種基礎的View(即便修改了,還有一堆繼承它的View呢)。又比如那些margin,需要修改必須拿到LayoutParams,這些都無法通過簡單的set方法去做。
這時候我們可以使用BindingAdapter定義一個靜態方法:
@BindingAdapter("android:paddingLeft")
public static void setPaddingLeft(View view, int padding) {
view.setPadding(
padding,
view.getPaddingTop(),
view.getPaddingRight(),
view.getPaddingBottom());}
事實上這個Adapter已經由Data Binding實現好了,可以在android.databinding.adapters.ViewBindingAdapter看到有很多定義好的適配器,還有BindingMethod。如果需要自己再寫點什麼,仿照這些來寫就好了。
我們還可以進行多屬性綁定,比如
@BindingAdapter({"bind:imageUrl", "bind:error"})
public static void loadImage(ImageView view, String url, Drawable error) {
Picasso.with(view.getContext())
.load(url)
.error(error)
.into(view);
}
來使用Picasso讀取圖片到ImageView。
BindingConversion有時候我們想在xml中綁定的屬性,未必是最後的set方法需要的,比如我們想用color(int),但是view需要Drawable,比如我們想用String,而view需要的是Url。這時候我們就可以使用BindingConversion:
<View
android:background=「@{isError ? @color/red : @color/white}」
android:layout_width=「wrap_content」
android:layout_height=「wrap_content」/>
@BindingConversion
public static ColorDrawable convertColorToDrawable(int color) {
return new ColorDrawable(color);
}
過去,我們需要自己定義Listener來做雙向綁定:
<EditText
android:text=「@{user.name}」
android:afterTextChanged=「@{callback.change}」/>
public void change(Editable s) {
final String text = s.toString();
if (!text.equals(name.get()) {
name.set(text);
}
}
需要自己綁定afterTextChanged方法,然後檢測text是否有改變,有改變則去修改observable。
新方式 - @=現在可以直接使用@=(而不是@)來進行雙向綁定了,使用起來十分簡單
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textNoSuggestions"
android:text="@={model.name}"/>
這樣,我們對這個EditText的輸入,就會自動set到對應model的name欄位上。
原理InverseBindingListenerInverseBindingListener是事件發生時觸發的監聽器:
public interface InverseBindingListener {
void onChange();
}
所有雙向綁定,最後都是通過這個接口來observable改變的,各種監聽,比如TextWatcher、OnCheckedChange,都是間接通過這個接口來通知的,以上面的EditText為例子,最後生成的InverseBindingListener:
private android.databinding.InverseBindingListener mboundView1androidTe
= new android.databinding.InverseBindingListener() {
@Override
public void onChange() {
// Inverse of model.name
// is model.setName((java.lang.String) callbackArg_0)
java.lang.String callbackArg_0 = android.databinding.adapters.TextViewBindingAdapter.getTextString(mboundView1);
boolean modelObjectnull = false;
com.github.markzhai.sample.FormModel model = mModel;
java.lang.String nameModel = null;
modelObjectnull = (model) != (null);
if (modelObjectnull) {
model.setName((java.lang.String) (callbackArg_0));
} }
};
上面的生成代碼中,我們可以看到代碼通過TextViewBindingAdapter.getTextString(mboundView1)去獲得EditText中的字符串,查看源碼可以看到
@InverseBindingAdapter(
attribute = "android:text",
event = "android:textAttrChanged")
public static String getTextString(TextView view) {
return view.getText().toString();
}
原來跟上面的BindingMethod和BindingAdapter做set操作類似,雙向綁定通過註解進行get操作。
完整的邏輯又是:
@BindingAdapter("android:text")
public static void setText(TextView view, CharSequence text) {
final CharSequence oldText = view.getText();
if (text == oldText
|| (text == null && oldText.length() == 0)) {
return;
}
if (text instanceof Spanned) {
if (text.equals(oldText)) {
return; view.setText(text);
}
@InverseBindingAdapter(
attribute = "android:text",
event = "android:textAttrChanged")
public static String getTextString(TextView view) {
return view.getText().toString();
}
@BindingAdapter(
value = {
"android:beforeTextChanged",
"android:onTextChanged",
"android:afterTextChanged",
"android:textAttrChanged"},
requireAll = false)
public static void setTextWatcher(
TextView view,
final BeforeTextChanged before,
final OnTextChanged on,
final AfterTextChanged after,
final InverseBindingListener textAttrChanged) {
final TextWatcher newValue;
if (before == null
&& after == null
&& on == null
&& textAttrChanged == null) {
newValue = null;
} else {
newValue = new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
if (before != null) {
before.beforeTextChanged(s, start, count, after);
}
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
if (on != null) {
on.onTextChanged(s, start, before, count);
}
if (textAttrChanged != null) {
textAttrChanged.onChange();
}
}
@Override
public void afterTextChanged(Editable s) {
if (after != null) {
after.afterTextChanged(s);
}
}
};
}
final TextWatcher oldValue = ListenerUtil.trackListener(view, newValue, R.id.textWatcher);
if (oldValue != null) {
view.removeTextChangedListener(oldValue);
}
if (newValue != null) {
view.addTextChangedListener(newValue);
}
}
我們也可以使用InverseBindingMethod做到一樣的效果:
@InverseBindingMethods({
@InverseBindingMethod(
type=android.widget.TextView.class,
attribute=「android:text」,
// 默認會根據attribute name獲取get
method=「getText」,
// 默認根據attribute增加AttrChanged
event=「android:textAttrChanged」)})
data binding通過textAttrChanged的event找到setTextWatcher方法,而setTextWatcher通知InverseBindingListener的onChange方法,onChange方法則使用找到的get和set方法去進行檢查和更新。
解決死循環如果仔細想想雙向綁定的邏輯,用戶輸入導致實例事件發生,更新了實例的屬性,實例的屬性改變又會觸發這個View的notify,從而變成了一個不斷互相觸發刷新的死循環。
為了解決死循環,我們需要做一個簡單的檢查,在上面的setText方法我們可以看到,如果兩次的text沒有改變,則會直接return,這樣就杜絕了無限循環調用的可能。在自己做自定義雙向綁定的時候,需要注意這點。
目前雙向綁定僅支持如text,checked,year,month,hour,rating,progress等綁定。
屬性改變監聽如果除了更新Observable,我們還想做一些其他事情怎麼辦?比如根據輸入內容更新標誌位?
我們可以直接使用observable上的addOnPropertyChangedCallback方法:
mModel.addOnPropertyChangedCallback(new Observable.OnPropertyChangedCallback() {
@Override
public void onPropertyChanged(Observable observable, int i) {
if (i == BR.name) {
Toast.makeText(TwoWayActivity.this, "name changed", Toast.LENGTH_SHORT).show();
} else if (i == BR.password) {
Toast.makeText(TwoWayActivity.this, "password changed", Toast.LENGTH_SHORT).show();
}
}
});
<ImageView android:visibility=「@{user.isAdult ? View.VISIBLE : View.GONE}」/>
<TextView android:visibility=「@{user.isAdult ? View.VISIBLE : View.GONE}」/>
<CheckBox android:visibility="@{user.isAdult ? View.VISIBLE : View.GONE}"/>
可以簡化為:
<ImageView android:id=「@+id/avatar」
android:visibility=「@{user.isAdult ? View.VISIBLE : View.GONE}」/>
<TextView android:visibility=「@{avatar.visibility}」/>
<CheckBox android:visibility="@{avatar.visibility}"/>
<CheckBox android:id=」@+id/seeAds「/>
<ImageView android:visibility=「@{seeAds.checked ? View.VISIBLE : View.GONE}」/>
這樣CheckBox的狀態變更後ImageView會自動改變visibility。
Lambda表達式除了直接使用方法引用,在Presenter中寫和OnClickListener一樣參數的方法,我們還能使用Lambda表達式:
android:onClick=「@{(view)->presenter.save(view, item)}」
android:onClick=「@{()->presenter.save(item)}」
android:onFocusChange=「@{(v, fcs)->presenter.refresh(item)}」
我們還可以在lambda表達式引用view id(像上面表達式鏈那樣),以及context。
動畫transition使用data binding後,我們還能自動去做transition動畫:
binding.addOnRebindCallback(
new OnRebindCallback() {
@Override
public boolean onPreBind(ViewDataBinding binding) {
ViewGroup sceneRoot = (ViewGroup) binding.getRoot();
TransitionManager.beginDelayedTransition(sceneRoot);
return true;
}
});
這樣,當我們的view發生改變,比如visibility變化的時候,就能看到一些transition動畫。
Component注入如果我們想要利用data binding做一些測試功能怎麼辦?比如打點,記錄一下東西:
public class MyBindingAdapters {
@BindingAdapter(「android:text」)
public static void setText(TextView view, String value) {
if (isTesting) {
doTesting(view, value);
} else {
TextViewBindingAdapter.setText(view, value);
}
}
}
但如此一來,我們就要給所有的方法都寫上if/else,維護起來很困難,也影響美感。
那麼我們就可以使用component:
public class MyBindingAdapters {
@BindingAdapter(「android:text」)
public static void setText(TextView view, String value) {
if (isTesting) {
doTesting(view, value);
} else {
TextViewBindingAdapter.setText(view, value); } }
}
public class TestBindingAdapter extends MyBindingAdapters {
@Override
public void setText(TextView view, String value) {
doTesting(view, value);
}}
public interface DataBindingComponent {
MyBindingAdapter getMyBindingAdapter();}
public TestComponent implements DataBindingComponent {
private MyBindingAdapter mAdapter = new TestBindingAdapters();
public MyBindingAdapter getMyBindingAdapter() {
return mAdapter;
}
}
靜態的adapter怎麼辦呢,我們只需要把component作為第一個參數:
@BindingAdapter(「android:src」)
public static void loadImage(TestComponent component, ImageView view, String url) {
}
最後通過DataBindingUtil.setDefaultComponent(new TestComponent());就能讓data binding使用該Component提供的adapter方法。
學習和使用建議學習建議儘量在項目中進行嘗試,只有在不斷碰到業務的需求時,才會在真正的場景下使用並發現Data Binding的強大之處。
摸索xml和java的界限,不要以為Data Binding是萬能的,而想盡辦法把邏輯寫在xml中,如果你的同事沒法一眼看出這個表達式是做什麼的,那可能它就應該放在Java代碼中,以ViewModel的形式去承擔部分邏輯。
Lambda表達式/測試時注入等Data Binding的高級功能也可以自己多試試,尤其是注入,相當強大。
使用建議對新項目,不要猶豫,直接上。
對於老的項目,可以替換ButterKnife這種庫,從findViewById開始改造,逐漸替換老代碼。
callback綁定只做事件傳遞,NO業務邏輯,比如轉帳
保持表達式簡單(不要做過於複雜的字符串、函數調用操作)
Level 1 - No more findViewById逐步替換findViewById,取而代之地,使用binding.name, binding.age直接訪問View。
Level 2 - SetVariable引入variable,把手動在代碼對View進行set替換為xml直接引用variable。
Level 3 - Callback使用Presenter/Handler類來做事件的綁定。
Level 4 - Observable創建ViewModel類來進行即時的屬性更新觸發UI刷新。
Level 5 - 雙向綁定運用雙向綁定來簡化表單的邏輯,將form data變成ObservableField。這樣我們還可以在xml做一些酷炫的事情,比如button僅在所有field非空才為enabled(而過去要做到這個得加上好幾個EditText的OnTextChange監聽)。
總結本文上下兩篇介紹了大部分data binding現存的特性及部分的實現原理,大家如果純看而不實踐的話,可能會覺得有些頭大,建議還是通過項目進行一下實踐,才能真正體會到data binding的強大之處。歡迎加入我們的QQ群(568863373)進行討論,你也可以加我的微信(shin_87224330)一起學習。
MarkZhai同學最近也在跟朋友們一起運營一個公眾號 魔都三帥,名字雖然中二但內容著實不錯,目前以Android開發為主,也會涉及一些其他領域的技術,這裡也推薦給大家關注。