MVVM 和 Android Data Binding 续

发表于 2015-12-28   |   分类于 相对挨踢   |  

上一篇文章我们回顾了 MVVM 模式并了解了 Android Data Binding 的相关知识。那么这一章我们来实际做一个简单的基于 Android Data Binding 的 MVVM 架构的 app。

创建一个 Android 项目

我们先用 Android Studio 创建一个带有 Empty Activity 的项目：

new android project

new android 2

自动生成的 MainActivity 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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>

增加对 Data Binding 的支持

在 app 的 build.gradle 中增加：

1
2
3
4
5
6
7
8
...
android {
    ...
    dataBinding {
        enabled = true
    }
    ...
}

创建 Model

在子 package .model 中创建 Model 类 User:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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];
    }

}

创建 ViewModel

然后在子 package .viewmodel 中创建 ViewModel 类 UserModel:

1
2
3
4
5
6
7
8
package li.fyun.mvvm.viewmodel;

/**
 * Created by fyunli on 15/12/28.
 */
public interface ViewModel {
    void destroy();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
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} 绑定属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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);
    }

}

展示一下成果

在模拟器中运行，效果如下：

showtime

增加一点新东西

我们希望在这个程序中能显示用户的头像。

首先我们在 layout 中先声明一个 ImageView 并绑定到 UserModel 的 portrait:

1
2
3
4
5
6
<ImageView
    android:id="@+id/imageview_portraint"
    android:layout_width="64dp"
    android:layout_height="64dp"
    android:layout_marginRight="32dp"
    app:imageUrl="@{user.portrait}"/>

然后，我们要在 UserModel 中写一个 BindingAdapter 用于加载图像：

1
2
3
4
5
6
@BindingAdapter({"bind:imageUrl"})
public static void loadImage(ImageView view, String imageUrl) {
    Glide.with(view.getContext())
            .load(imageUrl)
            .into(view);
}

别忘了在 app 的 build.gralde 中引入依赖：

1
compile 'com.github.bumptech.glide:glide:3.6.1'

并在 AndroidManifest.xml 中声明 INTERNET 访问权限：

1
<uses-permission android:name="android.permission.INTERNET"/>

运行程序，看一下效果：

showtime 2

处理屏幕旋转

这时候发现有什么问题吗？当你旋转屏幕的时候，显示的用户名会随机变化，这是应为 Activity Instance State 没有保存，在 MVVM 模式下，Instance State 的保存变得简单许多:

首先在 onSaveInstanceState 中保存：

1
2
3
4
5
@Override
protected void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    outState.putParcelable(USER_MODEL, userModel);
}

然后在 onRestoreInstanceState(Bundle savedInstanceState) 或者 onCreate(Bundle savedInstanceState) 方法中取回保存的数据即可：

1
2
3
4
5
6
7
8
9
10
11
@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 可找到。

#android #sample
EventBus 使用
MVVM 与 Android Data Binding