Implements MVVM in Android with Data-binding

Demonstrate how to use Data-binding to implement MVVM in Android

Transcript

1. ֵአData Binding 䋿֢
 MVVM 秇ୗ Elvis Lin 
 2016-12-19 @Android Taipei
2. Agenda • MVC 膏 MVP ࢧ觎 • MVVM 墋Օ • አ Data binding 䋿֢ MVVM
3. MVC/MVPࢧ觎
4. MVC Model - View - Controller
5. View Controller Model User Input Update Model Query Data Update UI
6. View Controller Model User Input 1 … 1 Activity
7. Next Step: Remove Controller from Activity
8. View Controller Model User Input Update Model Query data Update UI Inform about input Notify view
9. Next Step: Model doesn’t refer to Activity/Fragment
10. View Controller Model 1 … 1 View Inferface
11. MVP Model - View - Presenter
12. View Presenter Model 1 … 1 IView IPresenter
13. View Presenter Update UI Inform User Action
14. View Presenter Model 1 … 1 IView IPresenter Contract
15. interface IView {
 void setCapital(String capital)
 }
16. interface IPresenter {
 void onLoad();
 }
17. ICapitalModle capitalModel;
 IView view; Presenter(ICapitalModel capitalModel,
 IView view) {
 this.capitalModel = capitalModel;
 this.view = view;
 }
18. @Override
 public void onLoad() {
 Capital capital 
 = capitalModel.getCapital;
 String displayCapital = 
 capital.getCity()
 + “, ”
 + capital.getNation();
 
 // Update UI
 view.setCapital(displayCapital);
 }
19. Presenter 蚤 Model ਻ฃ䋿֢
 㻌ز介手ҁ8QLW Test҂
20. But, do we really need it? class IPresenter { void onLoad() {
 …
 view.setCapital(displayCapital);
 }
 
 }
21. MVVM墋Օ
22. MVVM Model - View - ViewModel
23. View ViewModel Model 1 … ҃ View ViewModel Model ҃ŏ҃
24. • View ݻ ViewModel 戢㲘 • ViewModel 犋Ԇ㵕ๅ碝 View • 䋿֢ොୗ: • Data-binding • RxJava
25. Data binding
26. च๜Օ奧 • ൉׀Ӟ㮆ො׎ጱොୗ疥OD\RXWV蚤DSSOLFDWLRQ ORJLFV奾ݳࣁӞ蚏 • —> Don’t need findViewById() anymore • ฎӞ㮆 support library • ඪൔک Android 2.1 (API level 7+)
27. 絑ह戔ᗝ • 翥蜉 build.gradle牧珸አ data-binding android { .... dataBinding { enabled = true } }
28. 狕硬 Layout file <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="user" type="com.example.User"/> </data> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.firstName}"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.lastName}"/> </LinearLayout> </layout>
29. <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android=“http://schemas.android.com/apk/res/android"> <data> <variable name="user" type="com.example.User"/> </data> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.firstName}"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.lastName}"/> </LinearLayout> </layout>
30. <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="user" type="com.example.User"/> </data> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height=“match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@{user.firstName}"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“@{user.lastName}"/> </LinearLayout> </layout>
31. 碝ी Data Object public class User { public final String firstName; public final String lastName; public User(
 String firstName, 
 String lastName) { this.firstName = firstName; this.lastName = lastName; } } public class User { private final String firstName; private final String lastName; public User(
 String firstName,
 String lastName) { this.firstName = firstName; this.lastName = lastName; } public String getFirstName() { return this.firstName; } public String getLastName() { return this.lastName; } } ොဩӞ ොဩԫ
32. 翉ਧᇔկ • 䌘ෝPDLQBDFWLYLW\[PO䨝叨ኞ0DLQ$FWLYLW\%LQGLQJጱ ᇔկ • 翉ਧ盅'DWDጱ独疰䨝ๅ碝/D\RXW䌘䛑ጱ痀௔ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); MainActivityBinding binding = DataBindingUtil.setContentView( this, R.layout.main_activity); User user = new User("Test", "User"); binding.setUser(user); }
33. UIԪկ蒂ቘ public class MyHandlers { public void onClickFriend(View view) { ... } } <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="handlers" type="com.example.Handlers"/> <variable name="user" type=“com.example.User"/> </data> <LinearLayout …… > <TextView …… android:text="@{user.firstName}" android:onClick=“@{handlers::onClickFriend}"/> </LinearLayout> </layout>
34. UIԪկ蒂ቘ — Lambda <?xml version="1.0" encoding="utf-8"?> <layout xmlns:android="http://schemas.android.com/apk/res/android"> <data> <variable name="task" type="com.android.example.Task" /> <variable name="presenter" type="com.example.MyHandler" /> </data> <LinearLayout android:layout_width=“match_parent” android:layout_height=“match_parent"> <Button android:layout_width=“wrap_content" android:layout_height=“wrap_content" android:onClick="@{() -> MyHandler.onSaveClick(task)}" /> </LinearLayout> </layout>
35. 櫕ݻ翉ਧ • ইຎݝฎ蝚螂 Binding 䁆ᤈ setUser牧吚 User ᇔկ ጱ独虋㵕碻牧/D\RXW 㪔犋䨝ๅ碝 • 蝢Ꭳ Layout ๅ碝ጱොୗ • Observable Objects • Observable Fields • Observable Collections
36. Observable Objects private static class User extends BaseObservable { private String firstName; private String lastName; @Bindable public String getFirstName() { return this.firstName; } @Bindable public String getLastName() { return this.lastName; } public void setFirstName(String firstName) { this.firstName = firstName; notifyPropertyChanged(BR.firstName); } public void setLastName(String lastName) { this.lastName = lastName; notifyPropertyChanged(BR.lastName); } }
37. Observable Objects private static class User extends BaseObservable { private String firstName; private String lastName; @Bindable public String getFirstName() { return this.firstName; } @Bindable public String getLastName() { return this.lastName; } public void setFirstName(String firstName) { this.firstName = firstName; notifyPropertyChanged(BR.firstName); } public void setLastName(String lastName) { this.lastName = lastName; notifyPropertyChanged(BR.lastName); } }
38. Observable Fields private static class User { public final ObservableField<String> firstName = new ObservableField<>(); public final ObservableField<String> lastName = new ObservableField<>(); public final ObservableInt age = new ObservableInt(); }
39. አ Data Binding
 䋿匍 MVVM
40. View ViewModel Model Data Binding
41. 狕硬 View ጱ Layout file • ࣁ/D\RXWƉOHӾےӤYLHZ0RGHOጱ虋碍 <layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"> <data> <variable name=“viewModel" type="edu.self.scoredbmvvm.viewmodel.SearchViewModel"/> </data> <LinearLayout …… > </LinearLayout> </layout>
42. ࣁ ViewModel ےӤ ObservalField public class SearchViewModel { public ObservableField<String> userScore = new ObservableField<>(); …. public SearchViewModel(Context context) {} public void searchScore() { // do searching and modify userScore } public TextWatcher getUserNameEditTextWatcher() { return new TextWatcher() { .... }; }
43. ࣁ ViewModel ےӤ 䌘䛑ጱ蒂ቘ獢碍 public class SearchViewModel { public ObservableField<String> userScore = new ObservableField<>(); …. public SearchViewModel(Context context) {} public void searchScore() { // do searching and modify userScore } public TextWatcher getUserNameEditTextWatcher() { return new TextWatcher() { .... }; }
44. 翉ਧ ViewModel 蚤 
 Layout ጱ痀௔独 <LinearLayout .... > <EditText .... app:addTextChangedListener= "@{viewModel.userNameEditTextWatcher}"/> <Button .... android:onClick="@{() -> viewModel.searchScore()}"/> </LinearLayout> <TextView .... android:text="@{viewModel.userScore}"/>
45. 虏 ViewModel 蚤 Model 传蝢 public class SearchViewModel extends BaseObservable{ .... public void searchScore() { new AsyncTask<String, Void, Long>() { .... @Override protected Long doInBackground(String... strings) { return SearchScoreManager.getInstance().
 searchScoreForLongTime(strings[0]); } @Override protected void onPostExecute(Long score) { .... userScore.set(score == null ? "not exist" : score.toString()); } }.execute(userName); } }
46. 奾抷 • 橕ဳ讨獤櫝ҁSeparation of Concerns ) • MVVM 虏 View 蚤 ViewModel 櫕ݻ翉ਧ • View ݝ揗揣虻碘ጱ氥纈蚤UIԪկ㯽螏 • View ጱๅ碝ݢ犥蝚螂 RxJava ౲ Data binding ਠ ౮
47. Contact Info Elvis Lin • Github: 
 https://github.com/elvismetaphor • Blog: http://article.elvismetaphor.me • Slides: https://speakerdeck.com/ elvismetaphor
48. 㷢ᘍ虻碘 • ಭ୽粙Ӿጱ塅ֺ
 https://github.com/elvismetaphor/ SearchScore-DB-MVVM • Google Architecture 塅ֺ
 https://github.com/googlesamples/android- architecture • MVP/MVVM 塅ֺ
 https://github.com/ivacf/archi