How to hide UITextField of automatic layout?

I used Snapkit to automatically layout three input boxes and a button. They are arranged vertically. I want to display only the first and second input boxes and buttons at the beginning. In special cases, the third input box needs to be displayed. The problem I have now is that I use isHidden to hide the third input box, but it also occupies the height of the screen, resulting in a blank space in the middle. What should I do

imagecodeTextField = UITextField()
    imagecodeTextField.leftView = imageCodeLeftImgView
    imagecodeTextField.leftViewMode = .always
    imagecodeTextField.rightView = imageCodeImage
    imagecodeTextField.rightViewMode = .always
    imagecodeTextField.backgroundColor = UIColor(red: 245/255.0, green: 245/255.0, blue: 245/255.0, alpha: 1.0)
    imagecodeTextField.layer.cornerRadius = 5
    imagecodeTextField.layer.masksToBounds = true
    imagecodeTextField.placeholder = "hint_please_input_verify_code".localized()
    view.addSubview(imagecodeTextField)
    imagecodeTextField.snp.makeConstraints { make in
      make.left.equalToSuperview().offset(20)
      make.right.equalToSuperview().offset(-20)
      make.top.equalTo(passTextField.snp_bottom).offset(15)
      make.height.equalTo(50)
    }
    //Hide Input Box
    imagecodeTextField.isHidden = true
    loginButton = UIButton(type: .custom)
    loginButton.setTitle("signin".localized(), for: .normal)
    loginButton.setTitleColor(.white, for: .normal)
    loginButton.titleLabel?.font = UIFont.systemFont(ofSize: 30)
    loginButton.backgroundColor = UIColor(red: 105/255.0, green: 175/255.0, blue: 241/255.0, alpha: 1.0)
    loginButton.layer.cornerRadius = 10
    loginButton.layer.masksToBounds = true
    view.addSubview(loginButton)
    loginButton.addTarget(self, action: #selector(login(_:)), for: .touchUpInside)
    loginButton.snp.makeConstraints { make in
      make.left.equalToSuperview().offset(20)
      make.right.equalToSuperview().offset(-20)
      make.top.equalTo(imagecodeTextField.snp.bottom).offset(20)
      make.height.equalTo(50)
    }

Replies

You do not show what are the 3 textFields. What is the third input box ? Is it imagecodeTextField ? Do you want to show button in any case ?

You have several options:

  • addView for the 3rd input box on certain condition (special case)
  • if you want to "hide", remove the subview from its parent view

Code would be like this (I suppose you have defined a var showIt, to show the 3rd input box:

// …
if showIt {
    view.addSubview(imagecodeTextField)
    imagecodeTextField.snp.makeConstraints { make in
      make.left.equalToSuperview().offset(20)
      make.right.equalToSuperview().offset(-20)
      make.top.equalTo(passTextField.snp_bottom).offset(15)
      make.height.equalTo(50)
    }
} else {
    //Hide Input Box
    // REMOVE THIS imagecodeTextField.isHidden = true
    // as safety measure, you could remove view:
    imagecodeTextField.removeFromSuperview()  // Calling this method removes any constraints that refer to the view you are removing, or that refer to any view in the subtree of the view you are removing.
}

    loginButton = UIButton(type: .custom)

// …

or

  • adjust constraints depending you have 2 or 3 input boxes.