DataBinding 下的 EditText 绑定 TextChangedListener

2021-11-16

随着 DataBinding 在项目中使用频率的增加，就越能感觉到 Jetpack 下的这个组件在 Android 开发中所带来的便捷性。DataBinding 不仅在形式上彻底抛弃了传统意义上寻找控件的模版代码，也在本质上防止了控件在使用过程中的空指针、类型转换和内存泄漏等问题，使得开发者可以将更多的精力投入到业务逻辑的开发中。当然，DataBinding 的出现不仅仅是用来解决模版代码的，它还可以将变量和布局中的视图进行关联，同时还可以实现双向数据绑定，既接收对属性的数据更改，又监听用户对此属性的更新。

毫无疑问，DataBinding 已经在一定程度上改变了你的开发习惯。比如，你可能更习惯于在布局文件中使用 @{onClickListener} 来为一个控件添加点击事件；再比如，你可能更喜欢在布局文件中使用表达式 @{viewmodel.username} 来为一个 TextView 进行赋值。没错，你也会更倾向于采用同样的方法为 EditText 添加一个文字改变监听器。但事实上，DataBinding 是不支持直接为 EditText 添加文字改变监听器的，我们需要依赖 ViewModel 持有一个 TextWatcher 的实例并将其绑定到 EditText 上来进行实现。

EditText 实现文字改变的监听大致分为三步：一、定义持有 TextWatcher 实例的 ViewModel；二、布局文件引用 ViewModel；三、Activity 调用。伪代码如下，如需访问完整代码请访问 Watcher@Gitee。

1. ViewModel 代码

public class WatcherViewModel extends ViewModel {

    private MutableLiveData<String> mValueLiveData;

    public LiveData<String> getData() {
        if (mValueLiveData == null) {
            mValueLiveData = new MutableLiveData<>();
        }
        return mValueLiveData;
    }

    public void setData(String value) {
        if (mValueLiveData != null) {
            mValueLiveData.setValue(value);
        }
    }

    public TextWatcher textWatcher = new WatcherProxy() {
        @Override
        public void afterTextChanged(Editable s) {
            setData(s.toString());
        }
    };

}

2. XML 代码

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

    <data>

        <variable
            name="model"
            type="com.sunzn.watcher.WatcherViewModel" />

        <variable
            name="onClickListener"
            type="android.view.View.OnClickListener" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout 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"
        tools:context=".WatcherActivity">

        <androidx.appcompat.widget.AppCompatEditText
            android:id="@+id/edit_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginHorizontal="30dp"
            android:layout_marginTop="100dp"
            android:background="@drawable/shape_context_search"
            android:hint="输入关键词进行搜索"
            android:paddingHorizontal="20dp"
            android:paddingVertical="10dp"
            android:singleLine="true"
            android:textSize="13sp"
            app:addTextChangedListener="@{model.textWatcher}"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/edit_clean"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:onClick="@{onClickListener}"
            android:scaleType="centerInside"
            android:src="@drawable/icon_delete"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="@id/edit_text"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="@id/edit_text"
            app:layout_constraintTop_toTopOf="@id/edit_text" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

3. Activity 调用

public class WatcherActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityWatcherBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_watcher);

        WatcherViewModel viewModel = new ViewModelProvider(this).get(WatcherViewModel.class);
        binding.setModel(viewModel);
        viewModel.getData().observe(this, new Observer<String>() {
            @Override
            public void onChanged(String s) {
                binding.editClean.setVisibility(s.length() == 0 ? View.GONE : View.VISIBLE);
            }
        });
    }

}