1446次阅读 | 发布于5年以前

Android 双向 Data Binding

如何使用双向数据绑定管理布局

今年 Google I/O 大会中发布的 Data Binding 框架吸引了很大一部分 Android 开发者的注意力。关于它的讨论已经持续了很长时间，现在终于可以用实例来测试这个框架了。在官网和很多开发者的 blog 里都有示例应用展示如何使用 Data Binding，其中用了这个框架的许多特性。因此他们突出的是这个框架的优势。我们今天的文章会从两个实例开始(一个普通的和一个复杂些的)，展示怎样在 Android 开发中使用 Data Binding。

文本字段的双向绑定

Echo 是一个典型的 data binding 示例:两个 EditText 绑定到同一个 bean 中。这样可以在一个 EditText 中输入的同时在另一个 EditText 即时的显示输入的内容。下面是 bean 的示例代码:

public class Echo {
  public String text;
}

简便起见，这里没有包含 getter 和 setter，有也没关系。

layout 也很简单，主要由绑定了同一个 data 的两个 EditText 组成。

<layout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools">
  <data>
    <variable
      name="echo"
      type="it.cosenonjaviste.databinding.echo.Echo"/>
  </data>
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
    <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
    android:hint="Text 1"
      android:text="@{echo.text}"/>
    <EditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:hint="Text 2"
      android:text="@{echo.text}"/>
  </LinearLayout>
  </layout>

在 Activity 里面需要用 DataBindingUtil 这个工具类来设置 layout，然后绑定对象( EchoBinding 是根据布局文件自动生成的)。

public class EchoActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    EchoBinding binding = DataBindingUtil.setContentView(
      this, R.layout.echo);
    binding.setEcho(new Echo());
  }
}

我们的理想效果是只要给 bean 和 View 设置好正确的 listener ，数据就应该同步起来了。不过实际运行这个例子时，并不是这个效果，在一个输入框输入另一个输入框也没有变化。这个场景中唯一有效的绑定是最开始时 Echo 的 string 和这两个文本字段。当 setEcho 方法在 EchoBinding 对象上被调用时，如果 Echo 的 text 不为空，它就会被设置到图形界面的两个 EditText 中。绑定只对 object 到 layout，并且仅当使用 setEcho 方法设置 object 时生效。后面无论 Echo 对象中的 text 有什么变化都不会映射到 layout 中。

如果想要自动接收后续更新，那么就要用 ObservableField 定义一个字段，而不是仅仅使用 String。

public class Echo {
  public ObservableField<String> text = new ObservableField<>();
}

ObservableField 这个类 (还有其他为原生类型准备的类，比如 ObservableInt 和 ObservableBoolean) 可以当作典型的观察者模式看待(你最好知道，这和 RxJava 管理的 Observables 可不一样)。事实上，在 EchoBinding 对象上调用 setEcho 方法的同时会在 Observable 上注册一个 listener。这个 listener 会在每次更新时被调用，它还会更新 layout 中的 View。

<EditText
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="Text 1"
  android:text="@{echo.text}"
  android:addTextChangedListener="@{echo.watcher}"/>

使用这种方法就需要在类中定义一个 TextWatcher:

public class Echo {
  public ObservableField<String> text = new ObservableField<>();
  public TextWatcher watcher = new TextWatcherAdapter() {
    @Override public void afterTextChanged(Editable s) {
      if (!Objects.equals(text.get(), s.toString())) {
        text.set(s.toString());
      }
    }
  };
}

这里面的检查主要是为了防止死循环: layout 更新了 object ，然后再调用 listener 去更新 View。虽然这么做双向绑定可以正常工作，不过有还是有些东西让我有所担心:

Echo 类不应该和 layout 有联系，使用 ObservableField 不是最简洁的做法，还有它需要定义一个 TextWatcher 也不是很好。
每个必需绑定的字段都要写大量的代码(两个互相连接的字段)。

自定义绑定规范

想要解决以上问题，我们可以使用自定义的 binding，Data Binding 框架允许我们这么干，定义起来也很容易。

首先，要声明一个我们自己的 ObservableField 不过是 string-specific 的(让我们把名字也重新搞一下，避免把原生类和 RxJava 的 Observables 弄混) :

public class BindableString extends BaseObservable {
  private String value;
  public String get() {
    return value != null ? value : "";
  }
  public void set(String value) {
    if (!Objects.equals(this.value, value)) {
      this.value = value;
      notifyChange();
    }
  }
  public boolean isEmpty() {
    return value == null || value.isEmpty();
  }
}

在这里加入一个 isEmpty 工具方法检查 value，避免不必要的代码。想要在 android:text 属性里直接使用这个类需要在一个类里使用 @BindingConversion 注解声明一个方法进行转换:

@BindingConversion
public static String convertBindableToString(
    BindableString bindableString) {
  return bindableString.get();
}

为了简化上面代码，也可以使用 @BindingAdapter 注解创建一个自定义属性。比如，我们可以声明一个属性 app:binding 设置 value 添加 TextWatcher:

@BindingAdapter({"app:binding"})
public static void bindEditText(EditText view,
    final BindableString bindableString) {
  if (view.getTag(R.id.binded) == null) {
    view.setTag(R.id.binded, true);
    view.addTextChangedListener(new TextWatcherAdapter() {
      @Override
      public void onTextChanged(CharSequence s, int start,
          int before, int count) {
        bindableString.set(s.toString());
      }
    });
  }
  String newValue = bindableString.get();
  if (!view.getText().toString().equals(newValue)) {
    view.setText(newValue);
  }
}

两个需要注意的地方:

这个方法会在绑定的对象被改变时调用;添加了一个 tag 来避免给相同字段设置多个 TextWatcher。
在设置新的 value 之前要检查 value 是否真的改变;这样可以避免 text view 中由于光标位置改变而引起的问题。

现在我们可以简单的把 layout 文件重写一下，用我们新定义的 app:binding 属性:

<EditText
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:hint="Text 1"
  app:binding="@{echo.text}"/>

管理屏幕方向切换

在这里还有一个很微妙的东西要注意，就是应用在横竖屏切换的时候，我们需要特别处理。我们都知道屏幕方向切换时 Activity 会被销毁重建，Echo 对象是新生成的，绑定也是重新绑定的。所以之前用户输入的内容就消失了。:(

处理这种情况正确的做法是重写 Activity 的 onSaveInstanceState 方法，只在第一次启动时创建新的 Echo 对象:

public class EchoActivity extends AppCompatActivity {
  public static final String ECHO = “ECHO”;
  private Echo echo;
  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    EchoBinding binding = DataBindingUtil.setContentView(
      this, R.layout.echo);
    if (savedInstanceState == null) {
      echo = new Echo();
    } else {
      echo = Parcels.unwrap(
        savedInstanceState.getParcelable(ECHO));
    }
    binding.setEcho(echo);
  }
  @Override protected void onSaveInstanceState(Bundle outState) {
    super.onSaveInstanceState(outState);
    outState.putParcelable(ECHO, Parcels.wrap(echo));
  }
}

这里使用 Parceler 框架是为了简化 Parcelable 对象的操作。BindableString 类也要用 Parceler 映射；并不是很复杂，因为它只是管理 String ，当方向改变时可以忽略。

使用数据绑定的登录功能

下面做一个复杂点的，类似 Amazon 的登陆界面:

验证从第一个提交开始，后续的改变也会触发验证，只有当第二个 radio button 选中时 passwd 的字段才有效。

我们从 radio button 开始，这种情况下需要对 radio group 进行绑定:

<RadioGroup
  android:layout_width=”match_parent”
  android:layout_height=”wrap_content”
  android:orientation=”vertical”
  app:binding=”@{loginInfo.existingUser}”>
  <RadioButton
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:text=”@string/new_customer”/>
  <RadioButton
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:text=”@string/i_have_a_password”/>
    </RadioGroup>

我们需要自定义一个 bind，这次使用一个 BindableBoolean 对象。因为这个 radio group 只有两个 button，所以我们这里使用了 boolean，你也可以使用其它的类型(比如 int)。这个 bind 的和我们之前实现的 BindableString 很像。

关于文本字段，使用了一个包含 EditText 的 TextInputLayout (由Design Support Library提供)。在使用密码字段时需要处理三个绑定:

text:和前面例子中的绑定一样
error:指向一个字段(比如 BindableString)的另一个绑定
enabled:这里和 RadioGroup 使用了同一个 boolean，可以在用户选中 radio button 时自动更新。

对应代码如下:

<android.support.design.widget.TextInputLayout
  android:layout_width=”match_parent”
  android:layout_height=”wrap_content”
  app:error=”@{loginInfo.passwordError}”>
    <EditText
      android:id=”@+id/password”
      android:layout_width=”match_parent”
      android:layout_height=”wrap_content”
      android:enabled=”@{loginInfo.existingUser}”
      android:hint=”@string/password”
      android:inputType=”textPassword”
      app:binding=”@{loginInfo.password}”/>
      </android.support.design.widget.TextInputLayout>

绑定是通过一个包含 layout 所有字段需要信息的 LoginInfo 类实现的:

public class LoginInfo {
    public BindableString email = new BindableString();
    public BindableString password = new BindableString();
    public BindableString emailError = new BindableString();
    public BindableString passwordError = new BindableString();
    public BindableBoolean existingUser = new BindableBoolean();
    public void reset() {
        email.set(null);
        password.set(null);
        emailError.set(null);
        passwordError.set(null);
    }
  }

点击 reset button 要调用 reset 方法，想要实现这个效果 reset 方法需要返回一个 OnClickListener 。如果可以使用一个 android:onClick="@{loginInfo.reset}" 来标注就好了，但是目前的 Data Binding 还不可以，它还只是个测试版，希望下个版本可以加入这个特性。我们仍然用框架生成的 object 添加 listener:

binding.reset.setOnClickListener(new View.OnClickListener() {
  @Override public void onClick(View v) {
    loginInfo.reset();
  }
  });

layout 中每一个设置了 id 的 view present 都会在自动生成的 binding 对象里有一个对应的字段，可以避免使用 findViewById 方法。使用 Data Binding 弱化了 ButterKnife 和 Holdr 这类框架的优势(Holdr 已经不推荐使用)。

值得注意的是框架内部并没有使用 findViewById 方法，在生成的代码中有一个方法，可以遍历 layout，搜索所有 view。

EDIT: 1.0-rc1 版本之后可以方便的定义一个 listener:

    android:onClick="@{loginInfo.reset}"

reset 方法的签名必须和 OnClickListener 接口的 onClick 方法相兼容: 需要一个类型为 View 的参数。使用自定义 binding 可以免去这个参数。

@BindingAdapter({"app:onClick"})
public static void bindOnClick(View view, final Runnable runnable) {
    view.setOnClickListener(new View.OnClickListener() {
        @Override public void onClick(View v) {
            runnable.run();
        }
    });
}

第二个参数是一个 Runnable，只是一个带有唯一无参方法接口的占位符。类似的方法也被用来处理验证过程的 listener，通过给 Activity 内的 email 和 passwd
字段添加listener:

TextWatcherAdapter watcher = new TextWatcherAdapter() {
  @Override public void afterTextChanged(Editable s) {
    loginInfo.validate(getResources());
  }
};
binding.email.addTextChangedListener(watcher);
binding.password.addTextChangedListener(watcher);

LoginInfo 内部有一个 boolean 字段用来储存用户是否已经尝试登录。验证过程通过检查这个值来判断是否显示错误提示:

public boolean loginExecuted;
public boolean validate(Resources res) {
  if (!loginExecuted) {
    return true;
  }
  int emailErrorRes = 0;
  int passwordErrorRes = 0;
  if (email.get().isEmpty()) {
    emailErrorRes = R.string.mandatory_field;
  } else {
    if (!Patterns.EMAIL_ADDRESS.matcher(email.get()).matches()) {
      emailErrorRes = R.string.invalid_email;
    }
  }
  if (existingUser.get() && password.get().isEmpty()) {
    passwordErrorRes = R.string.mandatory_field;
  }
  emailError.set(emailErrorRes != 0 ?
    res.getString(emailErrorRes) : null);
  passwordError.set(passwordErrorRes != 0 ?
    res.getString(passwordErrorRes) : null);
  return emailErrorRes == 0 && passwordErrorRes == 0;
}

binding.login.setOnClickListener(new View.OnClickListener() {
  @Override public void onClick(View v) {
    loginInfo.loginExecuted = true;
    if (loginInfo.validate(getResources())) {
      Snackbar.make(
        binding.getRoot(),
        loginInfo.email.get() + “ — “ + loginInfo.password.get(),
        Snackbar.LENGTH_LONG
      ).show();
    }
  }
});

结论

Android 的 Data Binding 框架还在 beta 阶段，Android Studio 对其内部支持也不是很完整，进步的空间还很大。不过它被设计和开发的很好，将会改变 Android 应用开发方式(如果顺利的话)。允许自定义 attributes 这个功能十分强大，我非常好奇第三方库开发者将会怎样使用这个特性。

这篇文章完整的代码在这里Github

An Italian version of this post is available on cosenonjaviste.it. 一个 Italian 版本翻译