你好 RxSwift！
- 我的第一个 RxSwift 应用程序 - 输入验证：

你好 RxSwift！

我的第一个 RxSwift 应用程序 - 输入验证：

这是一个模拟用户登录的程序。

当用户输入用户名时，如果用户名不足 5 个字就给出红色提示语，并且无法输入密码，当用户名符合要求时才可以输入密码。
同样的当用户输入的密码不到 5 个字时也给出红色提示语。
当用户名和密码有一个不符合要求时底部的绿色按钮不可点击，只有当用户名和密码同时有效时按钮才可点击。
当点击绿色按钮后弹出一个提示框，这个提示框只是用来做演示而已。

你可以下载这个例子并在模拟器上运行，这样可以帮助于你理解整个程序的交互：

这个页面主要由 5 各元素组成：

用户名输入框
用户名提示语（红色）
密码输入框
密码提示语（红色）
操作按钮（绿色）

1. class SimpleValidationViewController : ViewController {

3. @IBOutlet weak var usernameOutlet: UITextField!
4. @IBOutlet weak var usernameValidOutlet: UILabel!

6. @IBOutlet weak var passwordOutlet: UITextField!
7. @IBOutlet weak var passwordValidOutlet: UILabel!

9. @IBOutlet weak var doSomethingOutlet: UIButton!
10. ...
11. }

这里需要完成 4 个交互：

当用户名输入不到 5 个字时显示提示语，并且无法输入密码

``` 1. override func viewDidLoad() { 2. super.viewDidLoad()

...
// 用户名是否有效
let usernameValid = usernameOutlet.rx.text.orEmpty
// 用户名 -> 用户名是否有效
.map { $0.count >= minimalUsernameLength }
.share(replay: 1)
...
// 用户名是否有效 -> 密码输入框是否可用
usernameValid
.bind(to: passwordOutlet.rx.isEnabled)
.disposed(by: disposeBag)
// 用户名是否有效 -> 用户名提示语是否隐藏
usernameValid
.bind(to: usernameValidOutlet.rx.isHidden)
.disposed(by: disposeBag)
...
} ```

当用户修改用户名输入框的内容时就会产生一个新的用户名, 然后通过 map 方法将它转化成用户名是否有效, 最后通过 bind(to: ...) 来决定密码输入框是否可用以及提示语是否隐藏。 - 当密码输入不到 5 个字时显示提示文字

``` 1. override func viewDidLoad() { 2. super.viewDidLoad()

...
// 密码是否有效
let passwordValid = passwordOutlet.rx.text.orEmpty
// 密码 -> 密码是否有效
.map { $0.count >= minimalPasswordLength }
.share(replay: 1)
...
// 密码是否有效 -> 密码提示语是否隐藏
passwordValid
.bind(to: passwordValidOutlet.rx.isHidden)
.disposed(by: disposeBag)
...
} ```

这个和用用户名来控制提示语的逻辑是一样的。 - 当用户名和密码都符合要求时，绿色按钮才可点击

``` 1. override func viewDidLoad() { 2. super.viewDidLoad()

...
// 用户名是否有效
let usernameValid = ...
// 密码是否有效
let passwordValid = ...
...
// 所有输入是否有效
let everythingValid = Observable.combineLatest(
usernameValid,
passwordValid
) { $0 && $1 } // 取用户名和密码同时有效
.share(replay: 1)
...
// 所有输入是否有效 -> 绿色按钮是否可点击
everythingValid
.bind(to: doSomethingOutlet.rx.isEnabled)
.disposed(by: disposeBag)
...
} ```

通过 Observable.combineLatest(...) { ... } 来将用户名是否有效以及密码是都有效合并出两者是否同时有效,然后用它来控制绿色按钮是否可点击。 - 点击绿色按钮后，弹出一个提示框

``` 1. override func viewDidLoad() { 2. super.viewDidLoad()

...
// 点击绿色按钮 -> 弹出提示框
doSomethingOutlet.rx.tap
.subscribe(onNext: { [weak self] in self?.showAlert() })
.disposed(by: disposeBag)
}
func showAlert() {
let alertView = UIAlertView(
title: "RxExample",
message: "This is wonderful",
delegate: nil,
cancelButtonTitle: "OK"
)
alertView.show()
} ```

在点击绿色按钮后，弹出一个提示框

这样 4 个交互都完成了，现在我们纵观全局看下这个程序是一个什么样的结构:

然后看一下完整的代码:

1. override func viewDidLoad() {
2. super.viewDidLoad()

4. usernameValidOutlet.text = "Username has to be at least \(minimalUsernameLength) characters"
5. passwordValidOutlet.text = "Password has to be at least \(minimalPasswordLength) characters"

7. let usernameValid = usernameOutlet.rx.text.orEmpty
8. .map { $0.count >= minimalUsernameLength }
9. .share(replay: 1)

11. let passwordValid = passwordOutlet.rx.text.orEmpty
12. .map { $0.count >= minimalPasswordLength }
13. .share(replay: 1)

15. let everythingValid = Observable.combineLatest(
16. usernameValid,
17. passwordValid
18. ) { $0 && $1 }
19. .share(replay: 1)

21. usernameValid
22. .bind(to: passwordOutlet.rx.isEnabled)
23. .disposed(by: disposeBag)

25. usernameValid
26. .bind(to: usernameValidOutlet.rx.isHidden)
27. .disposed(by: disposeBag)

29. passwordValid
30. .bind(to: passwordValidOutlet.rx.isHidden)
31. .disposed(by: disposeBag)

33. everythingValid
34. .bind(to: doSomethingOutlet.rx.isEnabled)
35. .disposed(by: disposeBag)

37. doSomethingOutlet.rx.tap
38. .subscribe(onNext: { [weak self] in self?.showAlert() })
39. .disposed(by: disposeBag)
40. }

42. func showAlert() {
43. let alertView = UIAlertView(
44. title: "RxExample",
45. message: "This is wonderful",
46. delegate: nil,
47. cancelButtonTitle: "OK"
48. )

50. alertView.show()
51. }

你会发现你可以用几行代码完成如此复杂的交互。这可以大大提升我们的开发效率。

2. 你好 RxSwift！

你好 RxSwift！

我的第一个 RxSwift 应用程序 - 输入验证：

这个页面主要由 5 各元素组成：

这里需要完成 4 个交互：

更多疑问