前言

1. 簡書上data-binding 的文章不少，但真正用來實現MVVM架構的文章不多。有些是官方的guide（https://developer.android.com/topic/libraries/data-binding/index.html） 的翻譯版本，且官方的guide的架構主要採用 data-binding + mvp 的形式。 本文講述一個快速入門的data- binding + mvvm架構。

   基本配置

   詳見官方
   gradle ，當然 gradle版本需要在1.5.0-alpha1 or higher

android {
    ....
    dataBinding {
        enabled = true
 

    }
}

快速demo入門

1. 具體就是用了個gank.io的介面展示了一組妹子圖片。不多說，看結果：
   
   ezgif.com-gif-maker.gif
2. gradle配置

    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:24.1.1'
    compile 'com.squareup.retrofit2:retrofit:2.1.0'
    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'com.squareup.retrofit2:converter-gson:2.1.0'
    
   
    compile 'com.android.support:cardview-v7:24.1.1'

   這裡本來demo不應該引入其他的庫的，但為了方便寫demo，故添加了retrofit來請求資料，glide來載入圖片。
3. 資料請求封裝Model 省略getter和setter

/**
 * @Description: error: false,
 * results: [
 * {
 * _id: "57bc5238421aa9125fa3ed70",
 * createdAt: "2016-08-23T21:40:08.159Z",
 * desc: "8.24",
 * publishedAt: "2016-08-24T11:38:48.733Z",
 * source: "chrome",
 * type: "福利",
 * url: "http://ww3.sinaimg.cn/large/610dc034jw1f740f701gqj20u011hgo9.jpg",
 * used: true,
 * who: "daimajia"
 * },
 * ]
 */
 

public class MeiZiModel  implements  Serializable{
    private String error;
    private List<Result> results;
    public static class Result{
        private String _id;
        private String desc;
        private String publishedAt;
        private String createdAt;
        private String source;
        private String url;
        private String used;
        private String who;
    }
}

1. 使用retrofit 請求資料如下：

public interface MeiZiService {
    @GET("api/data/福利/{page}/{number}")
    Call<MeiZiModel> getMeiZi(@Path("page") int page, @Path("number") int number);
}

簡單解釋下，@GET當然是指get的方式請求，後面是具體的路徑。{page}/{number}這個是我隨便填的引數名，測試了下gank的介面，確實可以通過修改這兩個引數請求不同頁面的資料。
@path 就是path路徑上的變數。

1. 回撥獲取返回結果：

public class ServiceGenerator {

    public static final String API_BASE_URL = "http://gank.io";

    private static Retrofit retrofit =
            new Retrofit.Builder()
                    .baseUrl(API_BASE_URL)
                    .addConverterFactory(GsonConverterFactory.create())
                    .build();

    public static void getMeiZi(int page, int number, final MeiZiCallBack callBack) {
        MeiZiService service = retrofit.create(MeiZiService.class);
        Call<MeiZiModel> meiziCall = service.getMeiZi(page, number);
        meiziCall.enqueue(new Callback<MeiZiModel>() {
            @Override
            public void onResponse(Call<MeiZiModel> call, Response<MeiZiModel> response) {
                if (callBack != null) {
                    callBack.onSuccess(response.body().getResults());
                }
            }

            @Override
            public void onFailure(Call<MeiZiModel> call, Throwable t) {
                if (callBack != null) {
                    callBack.onFail(t.getMessage());
                }
            }
        });
    }
}

注意整個url 為http://gank.io/ api/data/福利/{page}/{number} 後面的兩個為需要傳入的引數，然後把retrofit請求結果回撥即可。

6 MainActivity

public class MainActivity extends AppCompatActivity {
    private ListView mListView;
    private MeiziAdapter mMeiziAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mListView = (ListView) findViewById(R.id.list);
        mMeiziAdapter = new MeiziAdapter(this);

        ServiceGenerator.getMeiZi(11, 2, new MeiZiCallBack() {
            @Override
            public void onSuccess(List<MeiZiModel.Result> result) {
                mMeiziAdapter.setDatas(result);
                mListView.setAdapter(mMeiziAdapter);
            }

            @Override
            public void onFail(String error) {
               //TODO 沒處理失敗的情況。
            }
        });
    }
}

很簡單，將資料塞給adpter。

ViewModel 和View

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bind="http://schemas.android.com/apk/res-auto">

    <data>
        <import type="android.view.View"/>
        <variable
            name="viewModel"
            type="com.example.xxx.mvvmdemo.ViewModel.ItemViewModel">
        </variable>
    </data>

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.example.xxx.mvvmdemo.View.CustomImage
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            bind:load = "@{viewModel.imageUrl}"
            android:onClick="@{viewModel::onItemClick}"
            />

        <TextView
            android:layout_width="60dp"
            android:layout_height="wrap_content" 
            android:visibility="@{viewModel.isVisibility ? View.VISIBLE : View.GONE }"
            android:text="@{viewModel.text}"
            />

    </android.support.v7.widget.CardView>
</layout>

這裡需要注意的幾點：
（1） 先看整個頭部，添加了 layout 和 data 部分。 data 部分import 匯入需要使用的包，如textView的 visibility需要 View.VISIBLE 常數，存在於 android.view.View類。
（2） 引入自定義的viewModel 注意，這裡變數name 為viewModel ，type具體的類。
（3） 針對簡單的TextView 的text 直接使用@{viewModel.text}，viewModel.text 這個預設回去訪問text的getter方法getText（），但找不到時，會去找text的公共屬性text。
(4) data- binding 支援三元運算子 @{viewModel.isVisibility ? View.VISIBLE : View.GONE } 還支援邏輯運算等等，詳見
https://developer.android.com/topic/libraries/data-binding/index.html#expression_language
（5） 特殊情形，如這裡是imageView，我想讓其自動載入圖片。這裡是使用三方庫Glide載入，怎麼辦呢？使用BindingMethod 。自定義 bind:load = "@{viewModel.imageUrl}"
load方法時，我們通過url引數，直接在網上下載該圖片。具體見CustomImageAdapter類通過註解 @BindingAdapter("load") 來指明需要動態載入的圖片url。這裡還有點特殊，imageView沒有使用Glide載入圖片的介面，故擴充套件了load方法，詳見CustomImage。

public class ItemViewModel {
    private final ObservableBoolean isVisibility = new ObservableBoolean(false);
    private final ObservableField<String> mImageUrl = new ObservableField<>();
    private final ObservableField<String> text = new ObservableField<>();


    public Context mContext;
    public String mUrl;


    public ItemViewModel(Context mContext) {
        this.mContext = mContext;
    }
    public void setData(MeiZiModel.Result result,boolean isShowText){
        if(result == null ){
            return;
        }
        mImageUrl.set(result.getUrl());
        mUrl = result.getUrl();
        text.set(result.getDesc());
        isVisibility.set(isShowText);
    }

    public ObservableBoolean getIsVisibility() {
        return isVisibility;
    }
    public ObservableField<String> getImageUrl() {
        return mImageUrl;
    }
    public ObservableField<String> getText() {
        return text;
    }

}

public class MeiziAdapter extends BaseAdapter {

    private Context mContext;
    private List<MeiZiModel.Result> mDatas;

    public void setDatas(List<MeiZiModel.Result> mDatas) {
        this.mDatas = mDatas;
    }

    public MeiziAdapter(Context mContext) {
        this.mContext = mContext;
    }

    @Override
    public int getCount() {
        return mDatas == null ? 0 : mDatas.size();
    }

    @Override
    public Object getItem(int i) {
        return mDatas == null || mDatas.size() == 0 ? null : mDatas.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ItemViewModel viewModel;
        if (convertView == null) {
            ItemViewBinding binding = DataBindingUtil.inflate((LayoutInflater) mContext.getApplicationContext().getSystemService
                    (Context.LAYOUT_INFLATER_SERVICE), R.layout.item_view, null, false);
            viewModel = new ItemViewModel(mContext);
            binding.setViewModel(viewModel);
            convertView = binding.getRoot();
            convertView.setTag(viewModel);
        } else {
            viewModel = (ItemViewModel) convertView.getTag();
        }
        viewModel.setData(mDatas.get(position),position % 2 == 0);
        return convertView;
    }
}

這裡需要注意ItemViewBinding 類 是data-binding給我們生成的，採用我們佈局的xml下劃線改為駝峰命名，最後加上Binding作為區分。 其實這裡跟holder類似， 不過這裡的優點是可以重用ViewModel的邏輯。

public class CustomImage extends ImageView {
    public CustomImage(Context context) {
        super(context);
    }

    public CustomImage(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    public void load(String url){
        Glide.with(this.getContext().getApplicationContext()).load(url).fitCenter().into(this);
    }
}

public class CustomImageAdapter {
    @BindingAdapter("load")
    public static void load(CustomImage imageView,String url){
        imageView.load(url);
    }
}

more

整個工程結構講完了，這裡mvvm的形式，為什麼比一般的mvc更好呢？
答案是ViewModel和View的弱耦合，這裡就可以多次重用。比如重用xml或重用ViewModel或者整個重用。最關鍵的是這樣減輕了Activity的工作量，可以模組化去拆分每個頁面的邏輯，做到更多的複用。