設為首頁收藏本站

 找回密碼
 註冊
NetYea 響應式網頁
RWD 新竹網頁設計		 MyPresent.net
聯盟行銷賺分紅 		綠能購物網 手工藝品、客製化商品 管乾淨 專業 清洗水管
搜索
TShopping › 精選文章 ›Android 手機開發 › 查看內容

Android MVVM到底是什麼？看完就會懂了

2016-10-20 01:00| 發佈者: woff| 查看: 3795| 評論: 0|原作者: woff

摘要: 什麼是MVVM我們一步步來，從MVC開始。 MVC我們都知道，模型——視圖——控制器。為了使得程序的各個部分分離降低耦合性，我們對代碼的結構進行了劃分。 他們的通信方式也如上圖所示，即View層觸發操作通知到業務層 ...
 
什麼是MVVM
我們一步步來，從MVC開始。
MVC我們都知道，模型——視圖——控制器。為了使得程序的各個部分分離降低耦合性，我們對代碼的結構進行了劃分。
1.jpg
他們的通信方式也如上圖所示，即View層觸發操作通知到業務層完成邏輯處理，業務層完成業務邏輯之後通知Model層更新數據，數據更新完之後通知View層展現。在實際運用中人們發現View和Model之間的依賴還是太強，希望他們可以絕對獨立的存在，慢慢的就演化出了MVP。
2.jpg
Presenter替換掉了Controller，不僅僅處理邏輯部分。而且還控制著View的刷新，監聽Model層的數據變化。這樣隔離掉View和Model的關係後使得View層變的非常的薄，沒有任何的邏輯部分又不用主動監聽數據，被稱之為“被動視圖”。
3.jpg
至於MVVM基本上和MVP一模一樣，感覺只是名字替換了一下。他的關鍵技術就是今天的主題(Data Binding)。View的變化可以自動的反應在ViewModel，ViewModel的數據變化也會自動反應到View上。這樣開發者就不用處理接收事件和View更新的工作，框架已經幫你做好了。

Data Binding Library
今年的Google IO大會上，Android團隊發布了一個數據綁定框架（Data Binding Library）。以後可以直接在layout佈局xml文件中綁定數據了，無需再findViewById然後手工設置數據了。其語法和使用方式和JSP中的EL表達式非常類似。
下面就來介紹怎麼使用Data Binding Library。
配置環境
目前，最新版的Android Studio已經內置了該框架的支持，配置起來也很簡單，只需要編輯app目錄下的build.gradle文件，添加下面的內容就好了
  1. android {
  2.     ....
  3.     dataBinding {
  4.         enabled = true
  5.     }
  6. }
複製代碼



Data Binding Layout文件
Data Binding layout文件有點不同的是：起始根標籤是layout，接下來一個data 元素以及一個view 的根元素。這個view 元素就是你沒有使用Data Binding的layout文件的根元素。舉例說明如下：
  1. <?xml version="1.0" encoding="utf-8"?><layout xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <data>
  3.         <variable name="user" type="com.example.User"/>
  4.     </data>
  5.     <LinearLayout
  6.         android:orientation="vertical"
  7.         android:layout_width="match_parent"
  8.         android:layout_height="match_parent">
  9.         <TextView android:layout_width="wrap_content"
  10.             android:layout_height="wrap_content"
  11.             android:text="@{user.firstName}"/>
  12.         <TextView android:layout_width="wrap_content"
  13.             android:layout_height="wrap_content"
  14.             android:text="@{user.lastName}"/>
  15.     </LinearLayout></layout>
複製代碼




上面定義了一個com.example.User類型的變量user，然後接
著android:text="@{user.firstName}"把變量user的firstName屬性的值和TextView的text屬性綁定起來。


Data Object
我們來看下上面用到的com.example.User對象。
  1. public class User {
  2.     public final String firstName;
  3.     public final String lastName;

  5.     public User(String firstName, String lastName) {
  6.         this.firstName = firstName;
  7.         this.lastName = lastName;
  8.     }
  9. }
複製代碼

他有兩個public的屬性firstName，lastName，這和上面layout文件裡面的@{user.firstName}和
@ {user.lastName}對應
或者下面這種形式的對像也是支持的。
  1. public class User {
  2.     private final String firstName;
  3.     private final String lastName;

  5.     public User(String firstName, String lastName) {
  6.         this.firstName = firstName;
  7.         this.lastName = lastName;
  8.     }

  10.     // getXXX形式
  11.     public String getFirstName() {
  12.         return this.firstName;
  13.     }

  15.     // 或者属性名和方法名相同
  16.     public String lastName() {
  17.         return this.lastName;
  18.     }
  19. }
複製代碼


綁定數據
添加完<data>標籤後，Android Studio就會根據xml的文件名自動生成一個繼承ViewDataBinding的類。例如: activity_main.xml就會生成ActivityMainBinding,然後我們在Activity裡面添加如下代碼：
  1. @Override
  2. protected void onCreate(Bundle savedInstanceState) {
  3.     super.onCreate(savedInstanceState);
  4.     MainActivityBinding binding = DataBindingUtil.setContentView(this, R.layout.main_activity);
  5.     User user = new User("Test", "User");
  6.     binding.setUser(user);
  7. }
複製代碼



綁定事件
就像你可以在xml文件裡面使用屬性android:onClick綁定Activity裡面的一個方法一樣，Data Binding Library擴展了更多的事件可以用來綁定方法，比如View.OnLongClickListener有個方法onLongClick(),你就可以使用android:onLongClick屬性來綁定一個方法，需要注意的是綁定的方法的簽名必須和該屬性原本對應的方法的簽名完全一樣，否則編譯階段會報錯。
下面舉例來說明具體怎麼使用，先看用來綁定事件的類：
  1. public class MyHandlers {
  2.     public void onClickButton(View view) { ... }

  4.     public void afterFirstNameChanged(Editable s) { ... }
  5. }
複製代碼

然後就是layout文件：
  1. <?xml version="1.0" encoding="utf-8"?><layout xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <data>
  3.         <variable name="handlers" type="com.example.Handlers"/>
  4.         <variable name="user" type="com.example.User"/>
  5.     </data>
  6.     <LinearLayout
  7.         android:orientation="vertical"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent">
  10.         <EditText android:layout_width="wrap_content"
  11.             android:layout_height="wrap_content"
  12.             android:text="@{user.firstName}"
  13.             android:afterTextChanged="@{handlers.afterFirstNameChanged}"/>
  14.         <Button android:layout_width="wrap_content"
  15.             android:layout_height="wrap_content"
  16.             android:onClick="@{handlers.onClickButton}"/>
  17.     </LinearLayout></layout>
複製代碼




表達式語言（Expression Language）
你可以直接在layout文件裡面使用常見的表達式：
  • 數學表達式+ – / * %
  • 字符串鏈接 +
  • 邏輯操作符&& ||
  • 二元操作符& | ^
  • 一元操作符+ – ! ~
  • Shift >> >>> <<
  • 比較== > < >= <=
  • instanceof
  • Grouping ()
  • Literals – character, String, numeric, null
  • Cast
  • 函數調用
  • 值域引用（Field access）
  • 通過[]訪問數組裡面的對象
  • 三元操作符?:
    示例：
    1. android:text="@{String.valueOf(index + 1)}"
    2. android:visibility="@{age < 13 ? View.GONE : View.VISIBLE}"
    3. android:transitionName='@{"image_" + id}'
    複製代碼

更多語法可以參考官網文檔：http://developer.android.com/too ... expression_language


更新界面
有些時候，代碼會修改我們綁定的對象的某些屬性，那麼怎麼通知界面刷新呢？下面就給出兩種方案。


方案一
讓你的綁定數據類繼承BaseObservable，然後通過調用notifyPropertyChanged方法來通知界面屬性改變，如下：

  1. private static class User extends BaseObservable {
  2.     private String firstName;
  3.     private String lastName;

  5.     @Bindable
  6.     public String getFirstName() {
  7.         return this.firstName;
  8.     }

  10.     @Bindable
  11.     public String getLastName() {
  12.         return this.lastName;
  13.     }

  15.     public void setFirstName(String firstName){
  16.     this.firstName = firstName;
  17.     notifyPropertyChanged(BR.firstName);
  18.     }

  20.     public void setLastName(String lastName) {        this.lastName = lastName;
  21.         notifyPropertyChanged(BR.lastName);
  22.     }
  23. }
複製代碼

在需要通知的屬性的get方法上加上@Bindable，這樣編譯階段會生成BR.[property name]，然後使用這個調用方法notifyPropertyChanged就可以通知界面刷新了。如果你的數據綁定類不能繼承BaseObservable，那你就只能自己實現Observable接口，可以參考BaseObservable的實現。


方案二
Data Binding Library提供了很便利的類ObservableField，還有ObservableBoolean, ObservableByte, ObservableChar, ObservableShort, ObservableInt, ObservableLong, ObservableFloat, ObservableDouble, 和ObservableParcelable，基本上涵蓋了各種我們需要的類型。用法很簡單，如下：

  1. private static class User {
  2.     public final ObservableField<String> firstName = new ObservableField<>();

  4.     public final ObservableField<String> lastName = new ObservableField<>();

  6.     public final ObservableInt age = new ObservableInt();
  7. }
複製代碼

然後使用下面的代碼來訪問：

  1. user.firstName.set("Google");int age = user.age.get();
複製代碼

調用set方法時，Data Binding Library就會自動的幫我們通知界面刷新了。

綁定AdapterView
在一個實際的項目中，相信AdapterView是使用得很多的，使用官方提供給的API來進行AdapterView的綁定需要寫很多代碼，使用起來不方便，但是由於Data Binding Library提供豐富的擴展功能，所以出現了很多第三方的庫來擴展它，下面就來介紹一個比較好用的庫binding-collection-adapter，Github地址：https://github.com/evant/binding-collection-adapter
使用的時候在你的build.gradle文件裡面添加

  1. compile 'me.tatarka:bindingcollectionadapter:0.16'
複製代碼

如果你要是用RecyclerView，還需要添加
  1. compile 'me.tatarka:bindingcollectionadapter-recyclerview:0.16'
複製代碼

下面就是ViewModel的寫法：
  1. public class ViewModel {
  2.     public final ObservableList<String> items = new ObservableArrayList<>();

  4.     public final ItemView itemView = ItemView.of(BR.item, R.layout.item);
  5. }
複製代碼



這裡用到了ObservableList,他會在items變化的時候自動刷新界面
然後下面是layout文件：

  1. <!-- layout.xml --><layout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto">
  3.     <data>
  4.         <variable name="viewModel" type="com.example.ViewModel"/>
  5.         <import type="me.tatarka.bindingcollectionadapter.LayoutManagers" />
  6.     </data>
  7.     <ListView
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent"
  10.         app:items="@{viewModel.items}"
  11.         app:itemView="@{viewModel.itemView}"/>
  12.     <android.support.v7.widget.RecyclerView
  13.         android:layout_width="match_parent"
  14.         android:layout_height="match_parent"
  15.         app:layoutManager="@{LayoutManagers.linear()}"
  16.         app:items="@{viewModel.items}"
  17.         app:itemView="@{viewModel.itemView}"/>
  18.     <android.support.v4.view.ViewPager
  19.         android:layout_width="match_parent"
  20.         android:layout_height="match_parent"
  21.         app:items="@{viewModel.items}"
  22.         app:itemView="@{viewModel.itemView}"/>
  23.     <Spinner
  24.         android:layout_width="match_parent"
  25.         android:layout_height="match_parent"
  26.         app:items="@{viewModel.items}"
  27.         app:itemView="@{viewModel.itemView}"
  28.         app:dropDownItemView="@{viewModel.dropDownItemView}"/></layout>
複製代碼

然後是item layout：

  1. <!-- item.xml --><layout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto">
  3.     <data>
  4.         <variable name="item" type="String"/>
  5.     </data>
  6.     <TextView
  7.         android:id="@+id/text"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         android:text="@{item}"/></layout>
複製代碼

如果有多種樣式的佈局，那麼就需要把ItemView換成ItemViewSelector，如下：
  1. public final ItemViewSelector<String> itemView = new BaseItemViewSelector<String>() {
  2.    
  3.     @Override
  4.     public void select(ItemView itemView, int position, String item) {
  5.         itemView.set(BR.item, position == 0 ? R.layout.item_header : R.layout.item);
  6.     }

  8.     // This is only needed if you are using a BindingListViewAdapter
  9.     @Override
  10.     public int viewTypeCount() {
  11.         return 2;
  12.     }
  13. };
複製代碼



自定義綁定
正常情況下，Data Binding Library會根據屬性名去找對應的set方法，但是我們有時候需要自定義一些屬性，Data Binding Library也提供了很便利的方法讓我們來實現。
比如我們想在layout文件裡面設置ListView的emptyView，以前這個是無法做到的，只能在代碼裡面通過調用setEmptyView來做；
但是現在藉助Data Binding Library，我們可以很容易的實現這個功能了。先看layout文件：

  1. <?xml version="1.0" encoding="utf-8"?><layout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto">
  3.     <data>
  4.         <variable
  5.             name="viewModel"
  6.             type="com.example.databinding.viewmodel.ViewAlbumsViewModel"/>
  7.     </data>
  8.     <LinearLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         android:paddingLeft="10dp"
  12.         android:paddingRight="10dp"
  13.         android:orientation="vertical">
  14.         <ListView
  15.             android:layout_width="fill_parent"
  16.             android:layout_height="0px"
  17.             android:layout_weight="1.0"
  18.             app:items="@{viewModel.albums}"
  19.             app:itemView="@{viewModel.itemView}"
  20.             app:emptyView="@{@id/empty_view}"
  21.             android:onItemClick="@{viewModel.viewAlbum}"
  22.             android:id="@+id/albumListView"/>
  23.         <TextView
  24.             android:id="@+id/empty_view"
  25.             android:layout_width="fill_parent"
  26.             android:layout_height="0px"
  27.             android:layout_weight="1.0"
  28.             android:gravity="center"
  29.             android:text="@string/albums_list_empty" />
  30.         <Button
  31.             android:layout_width="fill_parent"
  32.             android:layout_height="wrap_content"
  33.             android:text="@string/create"
  34.             android:onClick="@{viewModel.createAlbum}"/>
  35.     </LinearLayout></layout>
複製代碼

這個代碼就用來指定emptyView，下面來看下實現的代碼：

  1. @BindingAdapter("emptyView")
  2. public static <T> void setEmptyView(AdapterView adapterView, int viewId) {

  4.     View rootView = adapterView.getRootView();
  5.     View emptyView = rootView.findViewById(viewId);
  6.     if (emptyView != null) {
  7.         adapterView.setEmptyView(emptyView);
  8.     }
  9. }
複製代碼

下面我們來分析上面的代碼，@{@id/empty_view}表示引用了@id/empty_view這個id，所以它的值就是int，
再看上面的setEmptyView方法，第一個參數AdapterView adapterView表示使用emptyView這個屬性的控件，
而第二個參數int viewId則是emptyView屬性傳進來的值，上面的layout可以看出來它就是R.id.empty_view，
然後通過id找到控件，然後調用原始的setEmptyView來設置。

上面的代碼來自我寫的一個Data Binding Library的示例項目DataBinding-album-sample，Github地址：https://github.com/derron/DataBinding-album-sample
它基本上包含了開發一個app常用到的東西，大家有興趣可以通過閱讀原文去看看。

文章來源
收藏 分享 邀請
上一篇：怎樣把 Eclipse project 轉到 Android Studio？下一篇：Android DataBinding：再見Presenter，你好ViewModel！

最新評論

相關分類

Archiver|手機版|小黑屋|TShopping

GMT+8, 2025-3-15 12:26 , Processed in 0.017282 second(s), 23 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

返回頂部