Intermediate Level 
 Data Binding Keisuke Kobayashi / @kobakei shibuya.apk #13

About me • Keisuke Kobayashi • GitHub, Qiita: @kobakei • Twitter: @ksk_kbys • Android, Rails, React

ຊൃදʹ͍ͭͯ • σʔλόΠϯσΟϯάॳڃऀ޲͚ʹɺҰาઌ΁ߦ͘࢖͍ํΛ ঺հ͠·͢ • ެࣜΨΠυʹࡌͬͯͳ͍಺༰΋ؚΈ·͢ • https://developer.android.com/topic/libraries/data- binding/index.html • ιʔείʔυ • https://github.com/kobakei/AndroidDataBindingSample

ΞδΣϯμ • σʔλόΠϯσΟϯάͱ͸ • BindingAdapterͷ࢖͍ํ • Ϧετͱͷ࿈ܞ • ٧·Γͦ͏ͳϙΠϯτ

Ξϯέʔτ

σʔλόΠϯσΟϯάΛ
 ۀ຿Ͱ࢖ͬͯΔਓ✋

@BindingAdapterΛ
 ࢖ͬͨ͜ͱ͕͋Δਓ✋

@InverseBinding***Λ
 ࢖ͬͨ͜ͱ͕͋Δਓ✋

ObservableListΛ
 ࢖ͬͨ͜ͱ͕͋Δਓ✋

σʔλόΠϯσΟϯά

Android data binding • σʔλΦϒδΣΫτͱUIΛඥ෇͚ɺ
 σʔλͷ஋ΛࣗಈతʹUIʹ൓өͨ͠Γɺ
 ϢʔβʔͷೖྗΛࣗಈతʹσʔλʹ൓ө͢Δ
 GoogleެࣜϥΠϒϥϦ

app/build.gradle android { //... dataBinding { enabled true } }

Data: ObservableField public class MainViewModel { public ObservableField name = new ObservableField<>(); public ObservableBoolean visible = new ObservableBoolean(true); }

Data: BaseObservable public class MainViewModel extends BaseObservable { private String name; @Bindable public String getName() { return name; } public void setName(String name) { this.name = name; notifyPropertyChanged(BR.name); } }

Data: BaseObservable public class MainViewModel extends BaseObservable { private String name; @Bindable public String getName() { return name; } public void setName(String name) { this.name = name; notifyPropertyChanged(BR.name); } }

Data: BaseObservable public class MainViewModel extends BaseObservable { private String name; @Bindable public String getName() { return name; } public void setName(String name) { this.name = name; notifyPropertyChanged(BR.name); } }

Data -> UI

Data -> UI

Data -> UI

Data -> UI ࢀর͢ΔΦϒδΣΫτ

Data -> UI

Data -> UI ࢖༻͢ΔΫϥεΛΠϯϙʔτ
 ʢjava.lang.* ͸ෆཁʣ

Data -> UI

Inflate layout @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Before // setContentView(R.layout.main_activity); // After MainActivityBinding binding = DataBindingUtil.setContentView(this, R.layout.main_activity); MainViewModel viewModel = new MainViewModel(); binding.setViewModel(viewModel); }

૒ํ޲
 σʔλόΠϯσΟϯά

UI -> Data

UI -> Data

࢖͑ΔଐੑϦετ • ओͳ΋ͷ͸େମఆٛ͞Ε͍ͯΔ • http://qiita.com/kobakei/items/ 5e902dd24005e6768ac4 • setHoge͸ɺapp:hoge=“@{…}” ͱॻ͚Δ • SwipeRefreshLayout#setRefreshing
 -> app:refreshing=“@{viewModel.refreshing}”

BindingAdapterͷ
 ࢖͍ํ

BindingAdapter • σʔλόΠϯσΟϯάͰ࢖͑ΔଐੑΛࣗ෼Ͱ ఆٛͰ͖Δ • set, get྆ํՄೳ

Lv1. ImageViewʹ
 αʔόʔ্ͷը૾Λදࣔ͢Δ

JavaͰී௨ʹॻ͘ͱ ImageView imageView = (ImageView) findViewById(R.id.imageView); Picasso.with(context).load(url).into(imageView);

BindingAdapter public class BindingAdapterUtil { @BindingAdapter(value = {"imageUrl"}) public static void setImageUrl(ImageView imageView, String url) { Picasso.with(context).load(url).into(imageView); } }

BindingAdapter public class BindingAdapterUtil { @BindingAdapter(value = {"imageUrl"}) public static void setImageUrl(ImageView imageView, String url) { Picasso.with(context).load(url).into(imageView); } } XMLଐੑ໊

XML

Lv2: TextViewʹଧͪফ͠ઢ Λ෇͚Δ

JavaͰී௨ʹॻ͘ͱ TextView textView = (TextView) findViewById(R.id.textView); TextPaint paint = textView.getPaint(); paint.setFlags(TextPaint.STRIKE_THRU_TEXT_FLAG); paint.setAntiAlias(true);

BindingAdapter public class BindingAdapterUtil { @BindingAdapter(value = {"strike"}) public static void setTextStrike(TextView textView, boolean strike) { if (strike) { TextPaint paint = textView.getPaint(); paint.setFlags(TextPaint.STRIKE_THRU_TEXT_FLAG); paint.setAntiAlias(true); } } }

XML

XML @{}ͰғΉඞཁ͋Γ

͋ΕΕʔʁ σʔλΛόΠϯσΟϯάͯ͠ ͳ͍ͧʔʁ

ϝϞ • BindingAdapter͸ɺ
 ୯ʹXMLͷଐੑͷ௥Ճʹ΋࢖͑Δ • ࠓ·ͰJavaͰॻ͍ͯͨϏϡʔૢ࡞Λɺ
 ڞ௨Խͯ͠XMLʹԡ͠ग़ͤΔ • @{}ͰғΉͷΛ͓๨Εͳ͘

Lv3: RecyclerViewͷ
 εΫϩʔϧΠϕϯτ

JavaͰී௨ʹॻ͘ͱ RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView); recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { // do something } @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { // do something } });

BindingAdapter (1) public interface OnScrollStateChanged { void onScrollStateChanged(RecyclerView recyclerView, int newState); } public interface OnScrolled { void onScrolled(RecyclerView recyclerView, int dx, int dy); } 1 method 1 interface

BindingAdapter (2) @BindingAdapter(value = {"onScrollStateChanged", "onScrolled"}, requireAll = false) public static void setRecyclerViewScroll(RecyclerView recyclerView, final OnScrollStateChanged onScrollStateChanged, final OnScrolled onScrolled) { recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { if (onScrollStateChanged != null) { onScrollStateChanged.onScrollStateChanged(recyclerView, newState); } } @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { if (onScrolled != null) { onScrolled.onScrolled(recyclerView, dx, dy); } } }); }

BindingAdapter (2) @BindingAdapter(value = {"onScrollStateChanged", "onScrolled"}, requireAll = false) public static void setRecyclerViewScroll(RecyclerView recyclerView, final OnScrollStateChanged onScrollStateChanged, final OnScrolled onScrolled) { recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { if (onScrollStateChanged != null) { onScrollStateChanged.onScrollStateChanged(recyclerView, newState); } } @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { if (onScrolled != null) { onScrolled.onScrolled(recyclerView, dx, dy); } } }); }

BindingAdapter (2) @BindingAdapter(value = {"onScrollStateChanged", "onScrolled"}, requireAll = false) public static void setRecyclerViewScroll(RecyclerView recyclerView, final OnScrollStateChanged onScrollStateChanged, final OnScrolled onScrolled) { recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { if (onScrollStateChanged != null) { onScrollStateChanged.onScrollStateChanged(recyclerView, newState); } } @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { if (onScrolled != null) { onScrolled.onScrolled(recyclerView, dx, dy); } } }); } ݸผʹ࢖༻ՄೳʢσϑΥϧτ͸trueʣ

XML

Data class public class MainViewModel { public void onScrolled(RecyclerView recyclerView, int dx, int dy) { // do something } }

Lv4: Multichoice ListViewͷ νΣοΫҐஔΛऔಘ

No content

JavaͰී௨ʹॻ͘ͱ ListView listView = (ListView) findViewById(R.id.listView); SparseBooleanArray positions = listView.getCheckedItemPositions();

InverseBindingMethod @InverseBindingMethods({ @InverseBindingMethod( type = ListView.class, attribute = "checkedItemPositions", event = “checkedItemPositionsAttrChanged", method = "getCheckedItemPositions" ) }) public class BindingAdapterUtil { // ... }

InverseBindingMethod @InverseBindingMethods({ @InverseBindingMethod( type = ListView.class, attribute = "checkedItemPositions", event = “checkedItemPositionsAttrChanged", method = "getCheckedItemPositions" ) }) public class BindingAdapterUtil { // ... } σʔλ͕ߋ৽͞ΕΔΠϕϯτ໊

InverseBindingMethod @InverseBindingMethods({ @InverseBindingMethod( type = ListView.class, attribute = "checkedItemPositions", event = “checkedItemPositionsAttrChanged", method = "getCheckedItemPositions" ) }) public class BindingAdapterUtil { // ... } σʔλऔಘͰݺ͹ΕΔϝιου

InverseBindingMethod @InverseBindingMethods({ @InverseBindingMethod( type = ListView.class, attribute = "checkedItemPositions" ) }) public class BindingAdapterUtil { // ... } event, method͸লུՄೳ

BindingAdapter: setter @BindingAdapter(value = "checkedItemPositions") public static void setListViewCheckedItemPositions(ListView listView, SparseBooleanArray positions) { if (positions != null) { for (int i = 0; i < positions.size(); i++) { listView.setItemChecked(positions.keyAt(i), positions.valueAt(i)); } } }

BindingAdapter: setter @BindingAdapter(value = "checkedItemPositions") public static void setListViewCheckedItemPositions(ListView listView, SparseBooleanArray positions) { if (positions != null) { for (int i = 0; i < positions.size(); i++) { listView.setItemChecked(positions.keyAt(i), positions.valueAt(i)); } } } InverseBindingMethodʹҰக

BindingAdapter: event @BindingAdapter(value = "checkedItemPositionsAttrChanged") public static void setCheckedItemPositionsAttrChanged(ListView listView, final InverseBindingListener listener) { listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView> parent, View view, int position, long id) { if (listener != null) { listener.onChange(); } } }); }

BindingAdapter: event @BindingAdapter(value = "checkedItemPositionsAttrChanged") public static void setCheckedItemPositionsAttrChanged(ListView listView, final InverseBindingListener listener) { listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView> parent, View view, int position, long id) { if (listener != null) { listener.onChange(); } } }); } InverseBindingMethodʹҰக

BindingAdapter: event @BindingAdapter(value = "checkedItemPositionsAttrChanged") public static void setCheckedItemPositionsAttrChanged(ListView listView, final InverseBindingListener listener) { listView.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView> parent, View view, int position, long id) { if (listener != null) { listener.onChange(); } } }); } ߲໨ΫϦοΫ࣌ʹ InverseBindingListenerΛ ݺͼग़͢

XML

Data class public class ListChoiceActivityViewModel { public ObservableList items; public ObservableField checkedItemPositions; public ListChoiceActivityViewModel() { this.items = new ObservableArrayList<>(); this.checkedItemPositions = new ObservableField<>(); } }

Data bindingͱListͷ࿈ܞ

΍Γ͍ͨ͜ͱ • Ϧετͷཁૉ͕૿ݮͨ͠ΒɺListView / RecyclerViewͷཁૉ਺΋࿈ಈͯ͠ཉ͍͠

ObservableList • ObservableFieldͷϦετ൛ • ཁૉ਺มԽͳͲͷΠϕϯτΛड͚औΔϦεφ Λొ࿥Ͱ͖Δ • Πϯελϯε࡞੒࣌ʹ͸ɺ ObservableArrayListΛ࢖͏

ListActivityViewModel public class ListActivityViewModel { public ObservableList items = new ObservableArrayList(); }

class ObservableRecyclerAdapter extends RecyclerView.Adapter { private final Context context; private final ObservableList items; ObservableRecyclerAdapter(Context context, ObservableList items) { this.context = context; this.items = items; // Add listener to ObservableList items.addOnListChangedCallback(new ObservableList.OnListChangedCallback>() { @Override public void onChanged(ObservableList items) { notifyDataSetChanged(); } @Override public void onItemRangeChanged(ObservableList items, int i, int i1) { notifyItemRangeChanged(i, i1); } @Override public void onItemRangeInserted(ObservableList items, int i, int i1) { notifyItemRangeInserted(i, i1); } @Override public void onItemRangeMoved(ObservableList items, int i, int i1, int i2) { notifyItemMoved(i, i1) } @Override public void onItemRangeRemoved(ObservableList items, int i, int i1) { notifyItemRangeRemoved(i, i1); } }); } //... }

class ObservableRecyclerAdapter extends RecyclerView.Adapter { private final Context context; private final ObservableList items; ObservableRecyclerAdapter(Context context, ObservableList items) { this.context = context; this.items = items; // Add listener to ObservableList items.addOnListChangedCallback(new ObservableList.OnListChangedCallback>() { @Override public void onChanged(ObservableList items) { notifyDataSetChanged(); } @Override public void onItemRangeChanged(ObservableList items, int i, int i1) { notifyItemRangeChanged(i, i1); } @Override public void onItemRangeInserted(ObservableList items, int i, int i1) { notifyItemRangeInserted(i, i1); } @Override public void onItemRangeMoved(ObservableList items, int i, int i1, int i2) { notifyItemMoved(i, i1) } @Override public void onItemRangeRemoved(ObservableList items, int i, int i1) { notifyItemRangeRemoved(i, i1); } }); } //... } มߋΠϕϯτൃੜ࣌ʹɺAdapterͷnotifyΛݺͿ

ObservableMap (ObservableArrayMap) • Ϛοϓ൛ • ࢖ͬͨ͜ͱͳ͍ͷͰ঺հ͸ׂѪ

ͦͷଞॳ৺ऀ͕٧·Γͦ͏ͳ ϙΠϯτ

UIͷߋ৽λΠϛϯά • ஋ͷมߋͷ࣍ͷϑϨʔϜʹͳΔ • ଈ࣌Ͱߋ৽͍ͨ͠৔߹ɺ ViewDataBinding#executePendingBindings() ΛݺͿ

εϨου • ίϨΫγϣϯҎ֎͸ɺσʔλϞσϧΛόοΫ άϥ΢ϯυεϨουͰมߋՄೳ • ObservableList, ObservableMap͸஫ҙ

·ͱΊ

·ͱΊ • BindingAdapterͷ࢖͍ํΛ঺հͨ͠ • RecyclerViewͱObservableListͷ૊Έ߹Θͤ ํΛ঺հͨ͠ • Let's try data binding

Thanks!