RxSwfit 学习笔记（一）登录校验

尤先森
1,076 阅读2分钟

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

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

摘录来自: “ RxSwift 中文文档。”

UI界面

  1. 属性声明
    var nameText:UITextField!
    var nameLable : UILabel!
    var pwdText:UITextField!
    var pwdLable : UILabel!
    var loginBtn:UIButton!
  1. 初始化
    func setUI() -> Void {
        view.backgroundColor = .groupTableViewBackground
        
        nameText = UITextField.init(frame: .init(x: 20, y: 100, width:  view.frame.size.width-40, height: 40))
        nameText.borderStyle = .roundedRect
        view.addSubview(nameText)
        
        nameLable = UILabel.init(frame: .init(x: 20, y: 150, width: nameText.frame.size.width, height: 20))
        nameLable.text = "用户名输入不合法"
        nameLable.textColor = .red
        view.addSubview(nameLable)
        
        pwdText = UITextField.init(frame: .init(x: 20, y: 180, width: view.frame.size.width-40, height: 40))
        pwdText.borderStyle = .roundedRect
        view.addSubview(pwdText)
        
        pwdLable = UILabel.init(frame: .init(x: 20, y: 230, width: nameText.frame.size.width, height: 20))
        pwdLable.text = "密码输入不合法"
        pwdLable.textColor = .red
        view.addSubview(pwdLable)
        
        loginBtn = UIButton.init(type: .system)
        loginBtn.setTitle("登录", for: .normal)
        loginBtn.frame = CGRect.init(x: 20, y: 270, width: view.frame.size.width-40, height: 40)
        loginBtn.backgroundColor = .white
        loginBtn.isEnabled = false
        view.addSubview(loginBtn)
    }

Rx

    func setRx() -> Void {
        //用户名输入校验，长度是否超过5
        let userValidate = nameText.rx.text.orEmpty
            .map{$0.count>=5}
            .share()
        //密码输入校验，长度是否超过5  
        let pwdValidate = pwdText.rx.text.orEmpty
            .map{$0.count>=5}
            .share()
        //用户名、密码输入校验是否通过
        let allIsOK = Observable.combineLatest(userValidate,pwdValidate) {$0 && $1} // 取用户名和密码同时有效        
        //用户名输入校验绑定到“密码输入框”是否启动
        userValidate.bind(to: pwdText.rx.isEnabled).disposed(by: disposeBag)
        //用户名输入校验绑定到“校验提示文本”是否显示
        userValidate.bind(to: nameLable.rx.isHidden).disposed(by: disposeBag)
        //密码输入校验绑定到“校验提示文本”是否显示
        pwdValidate.bind(to: pwdLable.rx.isHidden).disposed(by: disposeBag)
        //所有校验绑定到“登录按钮”是否能够使用
        allIsOK.bind(to: loginBtn.rx.isEnabled).disposed(by: disposeBag)
       
         //登录按钮点击
        loginBtn.rx.tap.subscribe(onNext: {
            print("login")
        }).disposed(by: disposeBag)
        
    }

More

share()的作用

我们用 userValidate 来控制用户名提示语是否隐藏以及密码输入框是否可用。share() 就是让他们两个共用userValidate，而不是为他们单独创建新的userValidate。这样可以减少不必要的开支。

disposed(by: disposeBag) 是用来做什么的？

和我们所熟悉的对象一样，每一个绑定也是有生命周期的。并且这个绑定是可以被清除的。disposed(by: disposeBag)就是将绑定的生命周期交给 disposeBag 来管理。当 disposeBag 被释放的时候，那么里面尚未清除的绑定也就被清除了。这就相当于是在用 ARC 来管理绑定的生命周期。 这个内容会在 Disposable 章节详细介绍。

摘录来自: “RxSwift 中文文档。”

avatar
文章
阅读
粉丝