DroidKaigi2020 - Data Bindingのイロハ

DroidKaigi2020
https://droidkaigi.jp/2020/timetable/153542

English P1-85
日本語 P86-165

Android開発で最も基本となるデザインパターンはMVCパターンです。
MVCパターンではViewの操作をActivityが行うため、Activityのコードが煩雑になり保守性が下がる要因となっていました。
Data Bindingを使うとViewの振る舞いはView自身で決めるためActivityのコード量が減り保守性が上がります。
複雑になっていくUIの状態をより管理しやすくできるData Bindingを積極的に取り入れていきましょう。

本セッションではData Bindingの基礎から最新の機能まで、幅広く紹介します。
初心者歓迎です。

アジェンダ
- Data Bindingの基礎
- Data Bindingを使ってみる
- BaseObservable
- Custom ViewとData Binding
- View BindingとData Binding
- JetPack ComposeとData Binding
- Tips

Transcript

1. Data Binding のイロハ 20 Feb. 2020 DroidKaigi 2020 @kuluna Camera OK Share OK JA/EN Download Slide
2. Talk About • Getting Started Data Binding • What is Data Binding? • Basic Data Binding • BaseObservable • Custom View with Data Binding • View Binding VS Data Binding • Jetpack Compose with Data Binding • Tips
3. Goal • Starting use Data Binding • Understanding Data Binding • Hope to improve your productivity • I will share this in English and Japanese • Understand all • Read like reference
4. Profile kuluna • Android, iOS, QA Engineer • Twitter @kuluna • GitHub kuluna
5. Published Books ‒ YOU MUST BUY!!! Ad
6. hachidori.inc ‒ WE ARE HIRING!!! 先端技術と上⼿く共存し、すべての⼈が、⼈間にしかできない 「価値ある」仕事に集中できる世界を作りたい。 そんな思いでhachidoriはサービスを提供しています。 Ad シフト管理効率化アプリ チャットボット開発ツール
7. Version • Data Binding • Android Studio 3.5.3 • Kotlin 1.3.61 • Android 10 emulator • View Binding • Android Studio 3.6 RC3 • Kotlin 1.3.61 • Android 10 emulator • Jetpack Componse • Android Studio 4.0 Canary6 • Kotlin 1.3.61 • Android 10 emulator
8. Getting Started
9. Question • Do you have bad memories by findViewById? (findViewByIdにいい思い出がない) • Yes • No
10. Remove findViewById
11. View Activity
12. Setup app/build.gradle • Required ’kotlin-kapt’ using Kotlin + +
13. Setup app/build.gradle.kts + +
14. Use Data Binding activity_main.xml • Wrap <layout> + +
15. Use Data Binding Remove findViewById Where is it from? + What is this?
16. • DataBindingUtil • Data Binding Library • ActivityMainBinding • Auto generate binding class. XML file name + Binding (Camel case) • textHello • Auto generate TextView field. android:id name (Camel case)
17. What is Data Binding?
18. Model‒View‒Controller Model (API, SQLite) Controller (Activity) View (XML) • Load/ Save Data • Convert Data • Get View • Set Value to View • Handle View • Listen View Event • Post-process Event • And more… Controller controls…
19. Data Binding Model (API, SQLite) Controller (Activity) View (XML) Data Binding Controller controls… • Load/ Save Data • Convert Data • Set Value to View • Handle View • Listen View Event • Post-process Event • Set Value to Data Binding Data Binding controls…
20. What is Observable? • Data on streams • Subscribe • Lazy evaluation
21. What is Observable? • Subscribe Observable List<Item> Items Label 0 Total amount 0 Buy Button disable empty Items Label 1 Total amount 110 Buy Button enable add
22. Basic Data Binding
23. Touch the Views • Set id to View • Access from Activity
24. Touch the Views Don't worry using the wrong View ID findViewById Typo occur And,
25. One-way Binding Data -> View activity_main.xml
26. One-way Binding activity_main.xml MainActivity.kt
27. One-way Binding activity_main.xml • Add<data> tag + +
28. One-way Binding activity_main.xml • Add <variable> tag • name: Valiable name • type: Java style type (ex: int, Date, Custom class, etc…) +
29. One-way Binding activity_main.xml • Replace text attribute • @{value name} +
30. One-way Binding activity_main.xml MainActivity.kt When set value, auto notify with async
31. Two-way Binding • Data <-> View Controller (Activity) View (XML) Update! Controller (Activity) View (XML) Update!
32. Two-way Binding activity_main.xml + + One-way @{userName} Two-way @={userName}
33. Two-way Binding MainActivity.kt
34. Two-way Binding • Demo
35. Level up
36. ListView list_session.xml
37. ListView Data Model View Holder ListView Adapter
38. ListView - After list_session.xml + + +
39. ListView - After Data Model View Holder Adapter Before
40. New functions • DataBindingUtil.inflate(LayoutInflator, Int, ViewGroup?, Boolean) • DataBindingUtil.bind(View) • executePendingBindings()
41. New functions • DataBindingUtil.inflate(LayoutInflator, Int, ViewGroup?, Boolean) • Inflate view by Data Binding. Replaceable LayoutInflator.inflate() • DataBindingUtil.bind(View) • Re-binding detached view • Crash when created by other than DataBindingUtil.inflate() • executePendingBindings() !! IMPORTANT !! • Evaluate pending views. →Data Binding is update with async. →Scrolling is fast, the views will not be updated in time.
42. x0.25
43. RecyclerView ☺
44. Visibility • Trim over margin…
45. Visibility + +
46. Visibility • Add <import> tag • Java expressions too! Java Conditional Operator
47. Expressions • String concat • Wrap `backquote` • With String resources • With String format
48. Expressions • Call functions • MainViewModel.kt • layout_main.xml
49. Expressions • Lambda • MainViewModel.kt • layout_main.xml
50. BaseObservable
51. What is BaseObservable? • Composable
52. What is BaseObservable? • Composable
53. What is BaseObservable? @Bindable • Auto Generated BR.{bindable name} • call notifyPropertyChanged() in setter I think I don’t need to use • Support Two-way Binding
54. What is BaseObservable? nofityChange() • just call notifyChange() in setter • Easy and I recommended than @Bindable • Support Two-way Binding
55. What is BaseObservable? ObservableXXX • ObservableXXX is implemented BaseOvservable • ObservableInt • ObservableLong • ObservableDouble • ObservableBoolean • etc… • Support Two-way Binding
56. What is BaseObservable? • ObservableXXX has set(value) and get() • Why ObservableString not exist? • Use typealias! Init value • Support Two-way Binding ObservableXXX
57. What is BaseObservable? • Getters and setters are not required in XML • Support Two-way Binding ObservableXXX
58. What is BaseObservable? • Choose your like!
59. Binding ❤ Custom View
60. Custom View CustomView.kt
61. Custom View layout_main.xml
62. Level up✨
63. Binding Adapter BindingAdapters.kt • Create View Extension function (appears static function from Java) • Add @BindingAdapter annotations layout_main.xml
64. View Binding
65. What is View Binding? • New in Android Studio 3.6 • Replace findViewById • Type safe Same feature as Data Binding
66. Setup View Binding app/build.gradle app/build.gradle.kts + +
67. Setup View Binding activity_main.xml • Remove <layout> tags! ‒ ‒
68. Setup View Binding MainActivity.kt • View Binding does not have DataBindingUtil • Replace inflate() or bind() ‒ +
69. View Binding VS Data Binding TL;DR • Do you want to use variable binding or binding adapter? • Yes -> Data Binding • No -> View Binding • Data Binding Not required <layout>tag Required <layout> tag Easy access views Easy access views Build faster Build slower Unavailable one(two)-way binding Available one(two)-way binding Unavailable BindingAdapter Available BindingAdapter • View Binding
70. Used Together app/build.gradle app/build.gradle.kts
71. Used Together View Binding Data Binding
72. Jetpack Compose
73. What is Jetpack Compose? • New in Android Studio 4.0 • Kotlin based decorative UI library • Replaceable XML layout • Jetpack Compose Version 0.1.0-dev04 What's New in Jetpack Compose (Android Dev Summit '19) https://youtu.be/dtm2h-_sNDQ
74. Jetpack Compose sample
75. Data Binding ❤ Jetpack Compose? • Jetpack compose will have new binding system named State (for now) • XML layout does not call composable view (for now) • Maybe I suspect Jetpack compose will not support Data Binding
76. Tips
77. NullPointerException • Android Data Binding is null safety • Replaced default value (ex: null integer -> 0) • Safe calls (ex: viewModel.getXXX() but viewModel is null) • LogCat warning -> use SafeUnBox No Problem!
78. Dynamic feature module • Normally, We don’t need additional approach for ProGuard • But, ignore from dynamic feature module • I don’t know why proguard-rules.pro
79. Context MainForm.kt activity_main.xml
80. Kotlin Extension • format to Japanese Currency activity_main.xml
81. Kotlin Lambda activity_main.xml MainActivity.kt
82. LiveData with Data Binding • MainActivity.kt
83. URLs • Data Binding | Android Developers https://developer.android.com/topic/libraries/data-binding • View Binding | Android Developers https://developer.android.com/topic/libraries/view-binding • Jetpack Compose | Android Developers https://developer.android.com/jetpack/compose
84. Thank you for watching!
85. Data Binding のイロハ(JA) 20 Feb. 2020 DroidKaigi 2020 @kuluna Camera OK Share OK JA/EN Download Slide
86. アジェンダ • Data Bindingのことはじめ • Data Bindingとは • Data Bindingを使ってみた • BaseObservable • Custom View と Data Binding • View Binding と Data Binding • Jetpack Compose と Data Binding • Tips
87. このセッションで得られること • Data Bindingが使えるようになる • Data Bindingとは何かがわかるようになる • アプリにData Bindingを導⼊できるようになる • このスライドは英語版と⽇本語版を⽤意します • ⼀度に全部覚えると • 気になったところだけ⾒るのをおすすめします
88. Version • Data Binding • Android Studio 3.5.3 • Kotlin 1.3.61 • Android 10 emulator • View Binding • Android Studio 3.6 RC3 • Kotlin 1.3.61 • Android 10 emulator • Jetpack Componse • Android Studio 4.0 Canary6 • Kotlin 1.3.61 • Android 10 emulator
89. Data Bindingのことはじめ
90. Question • Do you have bad memories by findViewById? (findViewByIdにいい思い出がない) • Yes • No
91. findViewByIdを消す
92. View Activity
93. Setup app/build.gradle • Kotlinの場合は ’kotlin-kapt’ が必要 + +
94. Setup app/build.gradle.kts + +
95. Use Data Binding activity_main.xml • <layout>タグで囲む + +
96. Use Data Binding findViewByIdが消えた どこから出てきた? + これは何?
97. • DataBindingUtil • Data Bindingライブラリにあるクラス • ActivityMainBinding • ⾃動⽣成されたクラス。クラス名は XMLファイル名 + Binding (Camel case) • textHello • ⾃動⽣成されたTextViewの変数。android:id が名前になる (Camel case)
98. Data Bindingとは
99. Model‒View‒Controller Model (API, SQLite) Controller (Activity) View (XML) • データの読み込み/書き込み • データの変換 • Viewの取得 • Viewに値をセット • Viewの操作 • Viewのイベントを取得 • イベントの後処理 • その他… Controller がやること
100. Data Binding Model (API, SQLite) Controller (Activity) View (XML) Data Binding Controller controls… • データの読み込み/書き込み • データの変換 • Viewに値をセット • Viewの操作 • Viewのイベントを取得 • イベントの後処理 • Data Bindingに値をセット Data Binding controls…
101. Observableとは • Dataをストリームとして表現 • Subscribe • 遅延評価
102. Observableとは • Subscribe Observable List<Item> アイテム数 0 合計⾦額 0 購⼊ボタン disable empty アイテム数 1 合計⾦額 110 購⼊ボタン enable add
103. Data Binding使ってみた
104. Viewの操作 • Viewにidをセット • Activityから操作できる
105. Viewの操作 違うView IDを使う⼼配もなし！ findViewById タイプミス
106. One-way Binding Data -> View activity_main.xml
107. One-way Binding activity_main.xml MainActivity.kt
108. One-way Binding activity_main.xml • <data> タグを追加 + +
109. One-way Binding activity_main.xml • その中に<variable> を追加 • name: 変数名 • type: Javaの型 (ex: int, Date, Custom class, etc…) +
110. One-way Binding activity_main.xml • textを @{value name} に変更 +
111. One-way Binding activity_main.xml MainActivity.kt ⾃動かつ⾮同期でViewが更新される
112. Two-way Binding • Data <-> View Controller (Activity) View (XML) Update! Controller (Activity) View (XML) Update!
113. Two-way Binding activity_main.xml + + One-way @{userName} Two-way @={userName}
114. Two-way Binding MainActivity.kt
115. Two-way Binding • Demo
116. Level up
117. ListView list_session.xml
118. ListView Data Model View Holder ListView Adapter
119. ListView - After list_session.xml + + +
120. ListView - After Data Model View Holder Adapter Before
121. New functions • DataBindingUtil.inflate(LayoutInflator, Int, ViewGroup?, Boolean) • DataBindingUtil.bind(View) • executePendingBindings()
122. New functions • DataBindingUtil.inflate(LayoutInflator, Int, ViewGroup?, Boolean) • LayoutInflator.inflate()のData Binding版。inflateかつBindingインスタンスを取得 • DataBindingUtil.bind(View) • 引数のViewにData Bindingをアタッチする • DataBindingUtilでinflateしたView以外にアタッチするとクラッシュする • executePendingBindings() !! 重要 !! • 処理待ちのViewを即座に処理する →Data Binding は⾮同期で更新される →スクロールが速いと更新が間に合わないことがある
123. x0.25
124. RecyclerView ☺
125. Visibility • 余計なマージンを 消したい
126. Visibility + +
127. Visibility • <import> タグを追加 • Java式が書ける Java の三項演算⼦
128. Expressions • ⽂字列結合 • `バッククォート`で囲むと⽂字列結合 • Stringリソースが使える • Stringリソース+String.format
129. Expressions • 関数呼び出し • MainViewModel.kt • layout_main.xml
130. Expressions • Javaラムダ式 • MainViewModel.kt • layout_main.xml
131. BaseObservable
132. BaseObservableとは • まとめられる
133. BaseObservableとは • まとめられる
134. BaseObservableとは @Bindable • BR.{bindable name} が⾃動⽣成される • notifyPropertyChanged()をSetterの中で呼ぶ あまりオススメしない • Two-way Binding対応
135. BaseObservableとは nofityChange() • setterの中で呼ぶ • 簡単&おすすめ • Two-way Binding対応
136. BaseObservableとは ObservableXXX • ObservableXXX はBaseOvservableが既に継承されている • ObservableInt • ObservableLong • ObservableDouble • ObservableBoolean • etc… • Two-way Binding対応
137. BaseObservableとは • ObservableXXXはset(value)とget()を使う • なぜかObservableStringはない • typealiasで解決 初期値はココから • Two-way Binding対応 ObservableXXX
138. BaseObservableとは • XMLではGetterやSetterを書く必要はない • Two-way Binding対応 ObservableXXX
139. BaseObservableとは • 好きな⽅をどうぞ
140. Binding ❤ Custom View
141. Custom View CustomView.kt
142. Custom View layout_main.xml
143. Level up✨
144. Binding Adapter BindingAdapters.kt • Viewの拡張関数を作成(Javaからはstatic関数として⾒える必要がある) • @BindingAdapterアノテーションを追加 layout_main.xml
145. View Binding
146. View Bindingとは • Android Studio 3.6から追加 • findViewByIdの置き換え • タイプミスを防げる Data Bindingにも同じ機能がある
147. Setup View Binding app/build.gradle app/build.gradle.kts + +
148. Setup View Binding activity_main.xml • 逆に<layout>を消す ‒ ‒
149. Setup View Binding MainActivity.kt • View BindingにはDataBindingUtilがない • inflate()かbind()に置き換える ‒ +
150. View Binding VS Data Binding TL;DR • 値のバインディングかBinding Adapterを使いたい? • Yes -> Data Binding • No -> View Binding • Data Binding <layout>タグは不要 <layout> タグが必須 Viewの操作が簡単 Viewの操作が簡単 ビルド時間は早い ビルド時間は遅い One(two)-way bindingは使えない One(two)-way bindingが使える BindingAdapterは使えない BindingAdapterが使える • View Binding
151. 同時に使える app/build.gradle app/build.gradle.kts
152. 同時に使える View Binding Data Binding
153. Jetpack Compose
154. What is Jetpack Compose? • Android Studio 4.0で追加 • Kotlinベースの宣⾔UIライブラリ • XMLレイアウトの置き換えができる • Jetpack Compose Version 0.1.0-dev04 What's New in Jetpack Compose (Android Dev Summit '19) https://youtu.be/dtm2h-_sNDQ
155. Jetpack Compose sample
156. Data Binding ❤ Jetpack Compose? • Jetpack compose にはstateという新しいBindingの仕組みがある (今のところ) • XMLレイアウトの中にCompose Viewを置けない(今のところ) • おそらくJetpack composeはData Bindingをサポートしないのではないか
157. Tips
158. NullPointerException • AndroidのData BindingはNull安全で動作する • 可能ならデフォルト値で置き換える(ex: null integer -> 0) • 関数の安全呼び出し(ex: viewModelがnullのときviewModel.getXXX()は実⾏されない) • LogCatに警告はでる -> SafeUnBoxを使うと消える ⼼配ナシ!
159. Dynamic feature module • 普通はProGuardに対して追加の操作は必要ない • なぜかDynamic Feature Moduleではルールがうまく適⽤されない • 理由はわからん proguard-rules.pro
160. Context MainForm.kt activity_main.xml
161. Kotlin Extension • ⽇本円に変換する拡張関数 activity_main.xml
162. Kotlin Lambda activity_main.xml MainActivity.kt
163. LiveData と Data Binding • MainActivity.kt
164. URLs • Data Binding | Android Developers https://developer.android.com/topic/libraries/data-binding • View Binding | Android Developers https://developer.android.com/topic/libraries/view-binding • Jetpack Compose | Android Developers https://developer.android.com/jetpack/compose
165. Thank you for watching!