上一篇文章我們回顧了 MVVM 模式并了解了 Android Data Binding 的相關(guān)知識(shí)添瓷。那么這一章我們來(lái)實(shí)際做一個(gè)簡(jiǎn)單的基于 Android Data Binding 的 MVVM 架構(gòu)的 app。
創(chuàng)建一個(gè) Android 項(xiàng)目
我們先用 Android Studio 創(chuàng)建一個(gè)帶有 Empty Activity 的項(xiàng)目：
new android project
new android 2
自動(dòng)生成的 MainActivity 如下：
package li.fyun.mvvm.view;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import li.fyun.mvvm.R;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".view.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello Word"
/>
</RelativeLayout>
增加對(duì) Data Binding 的支持
在 app 的 build.gradle 中增加：
...
android {
...
dataBinding {
enabled = true
}
...
}
創(chuàng)建 Model
在子 package .model 中創(chuàng)建 Model 類 User:
package li.fyun.mvvm.model;
import java.util.Random;
/**
* Created by fyunli on 15/12/28.
*/
public class User {
private static final User[] users = new User[]{
new User("Andrea"), new User("Betty"), new User("Calvin"), new User("Daisy"), new User("Eason"),
new User("Frank"), new User("Gary"), new User("Halen"), new User("Iris"), new User("Java")
};
private String username;
private String portrait = "http://ww3.sinaimg.cn/large/620f1e7egw1ey8bjsbmr2j20b40b475e.jpg";
public User(String username) {
this.username = username;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPortrait() {
return portrait;
}
public void setPortrait(String portrait) {
this.portrait = portrait;
}
// just a sample logic
public static User getUser() {
int index = new Random().nextInt(3);
return users[index];
}
}
創(chuàng)建 ViewModel
然后在子 package .viewmodel 中創(chuàng)建 ViewModel 類 UserModel:
package li.fyun.mvvm.viewmodel;
/**
* Created by fyunli on 15/12/28.
*/
public interface ViewModel {
void destroy();
}
package li.fyun.mvvm.viewmodel;
import android.databinding.ObservableField;
import android.os.Parcel;
import android.os.Parcelable;
import li.fyun.mvvm.model.User;
/**
* Created by fyunli on 15/12/28.
*/
public class UserModel implements ViewModel, Parcelable {
public ObservableField<String> username = new ObservableField<>();
public ObservableField<String> portrait = new ObservableField<>();
public UserModel(User user) {
this.username.set(user.getUsername());
this.portrait.set(user.getPortrait());
}
@Override
public void destroy() {
}
// just a sample logic
public static UserModel laodUser() {
User user = User.getUser();
return new UserModel(user);
}
// use android parceable generator plugin to gen the code
@Override
public int describeContents() {
return 0;
}
@Override
public void writeToParcel(Parcel dest, int flags) {
dest.writeSerializable(this.username);
dest.writeSerializable(this.portrait);
}
protected UserModel(Parcel in) {
this.username = (ObservableField<String>) in.readSerializable();
this.portrait = (ObservableField<String>) in.readSerializable();
}
public static final Creator<UserModel> CREATOR = new Creator<UserModel>() {
public UserModel createFromParcel(Parcel source) {
return new UserModel(source);
}
public UserModel[] newArray(int size) {
return new UserModel[size];
}
};
}
綁定 View 和 ViewModel
在 activity_main.xml 中聲明 UserModel 變量 user, 并在 TextView 中用 @{user.username} 綁定屬性：
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<data>
<variable
name="user"
type="li.fyun.mvvm.viewmodel.UserModel"/>
</data>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".view.MainActivity">
<TextView
android:id="@+id/textview_username_label"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Username:"
/>
<TextView
android:id="@+id/textview_username_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{user.username}"
android:layout_toRightOf="@id/textview_username_label"
tools:text="Vincent"
/>
</RelativeLayout>
</layout>
然后在 MainActivity 中綁定 View 和 ViewModel：
package li.fyun.mvvm.view;
import android.databinding.DataBindingUtil;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import li.fyun.mvvm.R;
import li.fyun.mvvm.databinding.ActivityMainBinding;
import li.fyun.mvvm.viewmodel.UserModel;
public class MainActivity extends AppCompatActivity {
ActivityMainBinding binding;
UserModel userModel;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
userModel = UserModel.laodUser();
binding.setUser(userModel);
}
}
展示一下成果
在模擬器中運(yùn)行蛆封，效果如下：
showtime
增加一點(diǎn)新東西
我們希望在這個(gè)程序中能顯示用戶的頭像耘柱。
首先我們?cè)?layout 中先聲明一個(gè) ImageView 并綁定到 UserModel 的 portrait:
<ImageView
android:id="@+id/imageview_portraint"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginRight="32dp"
app:imageUrl="@{user.portrait}"/>
然后梢莽，我們要在 UserModel 中寫一個(gè) BindingAdapter 用于加載圖像：
@BindingAdapter({"bind:imageUrl"})
public static void loadImage(ImageView view, String imageUrl) {
Glide.with(view.getContext())
.load(imageUrl)
.into(view);
}
別忘了在 app 的 build.gralde 中引入依賴：
compile 'com.github.bumptech.glide:glide:3.6.1'
并在 AndroidManifest.xml 中聲明 INTERNET 訪問(wèn)權(quán)限：
<uses-permission android:name="android.permission.INTERNET"/>
運(yùn)行程序评抚，看一下效果：
showtime 2
處理屏幕旋轉(zhuǎn)
這時(shí)候發(fā)現(xiàn)有什么問(wèn)題嗎熟空？當(dāng)你旋轉(zhuǎn)屏幕的時(shí)候，顯示的用戶名會(huì)隨機(jī)變化竟纳，這是應(yīng)為 Activity Instance State 沒(méi)有保存撵溃，在 MVVM 模式下，Instance State 的保存變得簡(jiǎn)單許多:
首先在 onSaveInstanceState 中保存：
@Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
outState.putParcelable(USER_MODEL, userModel);
}
然后在 onRestoreInstanceState(Bundle savedInstanceState) 或者 onCreate(Bundle savedInstanceState) 方法中取回保存的數(shù)據(jù)即可：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
if(savedInstanceState == null) {
userModel = UserModel.laodUser();
}else{
userModel = savedInstanceState.getParcelable(USER_MODEL);
}
binding.setUser(userModel);
}
打完锥累，收工缘挑！
源代碼在 Github 可找到。
