ReactiveX 学习笔记（20）使用 RxJava + RxBinding 进行 GUI 编程

课题

1. 程序界面由3个文本编辑框和1个文本标签组成。
2. 要求文本标签实时显示3个文本编辑框所输入的数字之和。
3. 文本编辑框输入的不是合法数字时，将其值视为0。
4. 3个文本编辑框的初值分别为1，2，3。

创建工程

打开 Android Studio，File / New / Project...

在 New Project 向导的第1页，Application Name 填上 RxExample，选 Include Kotlin support。

在向导的第4页点击 Finish 按钮创建工程

build.gradle 内容如下

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.zwstudio.rxexample"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0-rc01'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

在 android 部分加上 buildToolsVersion

android {
    compileSdkVersion 28
    buildToolsVersion '28.0.2'
// ...
}

在 dependencies 部分加上对4个包的引用

RxAndroid, RxJava, RxKotlin, RxBinding

dependencies {
// ...
    implementation 'io.reactivex.rxjava2:rxandroid:2.0.2'
    implementation 'io.reactivex.rxjava2:rxjava:2.1.16'
    implementation 'io.reactivex.rxjava2:rxkotlin:2.2.0'
    implementation 'com.jakewharton.rxbinding2:rxbinding-kotlin:2.1.1'
}

配置 UI

打开 activity_main.xml

将以下"Hello World!"部分

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

改为

<GridLayout
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:rowCount="5"
    android:columnCount="2"
    >

    <EditText
        android:id="@+id/etNumber1"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:layout_row="0"
        android:layout_column="1"
        android:inputType="number"
        android:hint="0"
        android:text="1" />

    <EditText
        android:id="@+id/etNumber2"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:layout_row="1"
        android:layout_column="1"
        android:inputType="number"
        android:hint="0"
        android:text="2" />

    <TextView
        android:id="@+id/tvAdd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="0"
        android:gravity="end"
        android:text="+"
        android:textAppearance="@style/TextAppearance.AppCompat.Large" />

    <EditText
        android:id="@+id/etNumber3"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:layout_row="2"
        android:layout_column="1"
        android:gravity="end"
        android:inputType="number"
        android:hint="0"
        android:text="3" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_row="3"
        android:layout_column="1"
        android:layout_width="76dp"
        android:gravity="end"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:text="16"  />
</GridLayout>

控件变量

在 MainActivity 类中的 onCreate 方法中添加以下代码

val etNumber1 = findViewById<EditText>(R.id.etNumber1)
val etNumber2 = findViewById<EditText>(R.id.etNumber2)
val etNumber3 = findViewById<EditText>(R.id.etNumber3)
val tvResult = findViewById<TextView>(R.id.tvResult)

不使用 RxJava 的传统解决方案

在 MainActivity 类中的 onCreate 方法中添加以下代码

val textWatcher = object : TextWatcher {
    override fun afterTextChanged(s: Editable?) {
    }

    override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
    }

    override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
        val num1 = etNumber1.text.toString().toIntOrNull() ?: 0
        val num2 = etNumber2.text.toString().toIntOrNull() ?: 0
        val num3 = etNumber3.text.toString().toIntOrNull() ?: 0
        tvResult.text = (num1 + num2 + num3).toString()
    }

}
etNumber1.addTextChangedListener(textWatcher)
etNumber2.addTextChangedListener(textWatcher)
etNumber3.addTextChangedListener(textWatcher)
etNumber1.text = etNumber1.text

使用 RxJava 的解决方案

在 MainActivity 类中的 onCreate 方法中添加以下代码

Observables.combineLatest(RxTextView.textChanges(etNumber1), RxTextView.textChanges(etNumber2), RxTextView.textChanges(etNumber3))
    {s1, s2, s3 -> ((s1.toString().toIntOrNull() ?: 0) + (s2.toString().toIntOrNull() ?: 0) + (s3.toString().toIntOrNull() ?: 0)).toString()}
    .subscribeOn(Schedulers.io())
    .observeOn(AndroidSchedulers.mainThread())
    .subscribe(RxTextView.text(tvResult))