美文网首页RxSwift
RxSwift实现对textField内容监听改变按钮状态

RxSwift实现对textField内容监听改变按钮状态

作者: ZhangMeng_ | 来源:发表于2021-03-29 16:25 被阅读0次

    在iOS开发中,经常遇到按钮的响应状态跟随输入框内容的变化而变化,以下面两个场景为例子:

    第一个场景:单输入框场景
    获取验证码后,跳转到一个输入验证码的界面,要求输入框中输入6位数字,输入框下方的提交按钮才可以被点击,否则为不可点击状态;

    第二个场景:多输入框场景(以两个输入框为例子)
    用户必须输入用户名和密码后,才可以点击下方的登陆按钮,否则登陆按钮为不可点击状态;

    这两个需求是开发人员的基操,简单实现方式我就不再赘述,我们展示一下使用RxSwift来实现这种效果有多easy。

    第一个场景,绑定关系代码如下:

     func setupEvent(){
            //使用Rx对输入框内容进行监听,如果监听内容发生改变,按钮状态进行改变
            let verifiInput = verifiTextField?.rx.text.orEmpty.asDriver()
                .throttle(.milliseconds(300))    //当文本框内容改变(0.3秒内值若多次改变,取最后一次)
    
            //输入的内容绑定按钮的响应
            verifiInput?.map({ $0.count > 5 })
                .drive((submitButton?.rx.isEnabled)!)
                .disposed(by:disposeBag)
            
            //submit button action
            submitButton?.rx.tap.subscribe(onNext: {
                print("sumit verification code!!")
            }).disposed(by: disposeBag)
      }
    

    效果如下


    单输入框.gif

    第二个场景,绑定关系代码如下:

    func setupEvent(){
            //listen
            Observable.combineLatest((accTextF?.rx.text.orEmpty)!, (pswTextF?.rx.text.orEmpty)!){ textValue1,textValue2 -> Bool in
                return textValue1.count > 0 && textValue2.count > 0
            }
            .map{ $0 }
            .bind(to: (loginButton?.rx.isEnabled)!)
            .disposed(by: disposeBag)
            
            
            //login event
            loginButton?.rx.tap.subscribe(onNext: {
                print("click login!!")
            }).disposed(by: disposeBag)
            
            //jump Verification Code page
            jumpVerifiButton?.rx.tap.subscribe(onNext: {[weak self] in
                self?.navigationController?.pushViewController(VerificationCodeViewController.init(), animated: true)
            }).disposed(by: disposeBag)
        }
    

    效果如下


    多输入框.gif

    响应式编程真的很方便,节省大部分代码。

    完整工程链接:
    链接: https://pan.baidu.com/s/11a_6p7RiaxzHbdRTA5zFJQ 密码: 5drh

    相关文章

      网友评论

        本文标题:RxSwift实现对textField内容监听改变按钮状态

        本文链接:https://www.haomeiwen.com/subject/owybhltx.html