ios - 如何以编程方式折叠 UIView？

Question

我正在开发我的第一个 IOS 应用程序，但遇到了问题。我有一个非常复杂的编程自动部署 UI，可以响应用户交互。当显示键盘时，某些 View 必须折叠，其他 View 必须移动，其他 View 必须根据一些条件产生。

现在在默认状态下不会发生自动布局错误。但一旦事情开始发生变化，一切都会分崩离析。其中一些问题与图像保留其高度有关，而其 View 的高度常数设置为 0。现在我确实启用了 .scaleToFill。

我已经研究了 stackViews，但是由于我的大多数 View 具有不同的大小，并且具有不同的嵌套 UI 元素，stackviews 现在似乎可以解决我的问题。但我当然希望对此有一些意见。

现在我的问题是:如何以编程方式动态折叠 UIView 和 UIImageviews？

现在我不介意手动输入很多约束，只要它有效。

这是相关 View 的约束(还有更多)

func setUpLayout() {
    // SuggestionCloud
    suggestionCloud.setConstraints(
        topAnchor: textView.bottomAnchor, topConstant: 0,
        bottomAnchor: bottomMenu.topAnchor, bottomConstant: 0,
        trailingAnchor: view.trailingAnchor, trailingConstant: -10,
        leadingAnchor: view.leadingAnchor, leadingConstant: 10)
        print("Suggestion View frame        :\(suggestionCloud.frame)")

    //WEIGHT_IMAGE_VIEW
    weigtImageView.topAnchor.constraint(equalTo: view.topAnchor, constant: 30).isActive = true
    weigtImageView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
    weigtImageView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
    weigtImageView.heightAnchor.constraint(equalToConstant: 150).isActive = true
    weigtImageView.addSubview(weightLabel);
    print("Weight Image View \(weigtImageView.frame)")

    //WEIGHT_LABEL
    weightLabel.trailingAnchor.constraint(equalTo: weigtImageView.trailingAnchor, constant: -30).isActive = true;
    weightLabel.leadingAnchor.constraint(equalTo: weigtImageView.leadingAnchor, constant: 25).isActive = true;
    weightLabel.heightAnchor.constraint(equalTo: weigtImageView.heightAnchor, multiplier: 1).isActive = true;

    //TEXT_VIEW
    textView.topAnchor.constraint(equalTo: weigtImageView.bottomAnchor).isActive = true;
    textView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
    textView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true;
    textView.heightAnchor.constraint(equalToConstant: 100).isActive = true;
    textView.addSubview(nameTextField)
    textView.addSubview(tagTextField)
    textView.addSubview(setButtonView)

   //TAG_CONTROLLER
    tagController.heightAnchor.constraint(equalToConstant: 110).isActive = true;
    tagController.topAnchor.constraint(equalTo: self.weigtImageView.bottomAnchor).isActive = true;
    tagController.leadingAnchor.constraint(equalTo:  self.view.leadingAnchor, constant : 10).isActive = true
    tagController.trailingAnchor.constraint(equalTo: self.view.trailingAnchor, constant: -10).isActive = true

    //SET_BUTTON_VIEW
    setButtonView.topAnchor.constraint(equalTo: textView.topAnchor).isActive = true;
    setButtonView.bottomAnchor.constraint(equalTo: textView.bottomAnchor).isActive = true;
    setButtonView.trailingAnchor.constraint(equalTo: textView.trailingAnchor).isActive = true;
    setButtonView.widthAnchor.constraint(equalToConstant: 110).isActive = true;


    //NAME_TEXT_FIELD
    nameTextField.trailingAnchor.constraint(equalTo: setButtonView.leadingAnchor, constant: -5).isActive = true
    nameTextField.leadingAnchor.constraint(equalTo: textView.leadingAnchor, constant: 10).isActive = true
    nameTextField.topAnchor.constraint(equalTo: textView.topAnchor, constant: 13).isActive = true
    nameTextField.heightAnchor.constraint(equalToConstant: 31).isActive = true
    nameTextField.layer.cornerRadius = 8
    nameTextField.backgroundColor = .white;


    //TAG_TEXT_FIELD
    tagTextField.trailingAnchor.constraint(equalTo: setButtonView.leadingAnchor, constant: -5).isActive = true
    tagTextField.leadingAnchor.constraint(equalTo: textView.leadingAnchor, constant: 10).isActive = true
    tagTextField.bottomAnchor.constraint(equalTo: textView.bottomAnchor, constant: -13).isActive = true
    tagTextField.heightAnchor.constraint(equalToConstant: 31).isActive = true
    tagTextField.layer.cornerRadius = 8
    tagTextField.backgroundColor = .white

这是 View Controller 设置:

   class UIScaleControllerVew: UIViewController, UITextFieldDelegate, SuggenstionCloudDelegate {

let weigtImageView : UIImageView = {
    var imageView = UIImageView(image: UIImage(named: "scaleVisorShadow"));
    imageView.contentMode = .scaleToFill
    imageView.translatesAutoresizingMaskIntoConstraints = false;
    return imageView
}()

let weightLabel : UILabel = {
    let label = UILabel()
    label.text = "135 gr"
    label.font = UIFont(name: "Avenir-Light", size: 50.0)
    label.textAlignment = .right
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}();

let textView : UIView = {
    var view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false;
    return view;
}();
let setButtonView : UIImageView = {
    var imageView = UIImageView(image: UIImage(named: "setButton"))
    imageView.translatesAutoresizingMaskIntoConstraints = false;
    return imageView;
}();



let nameTextField : UITextField = {
    var textField = UITextField();
    textField.tag = 2;
    textField.translatesAutoresizingMaskIntoConstraints = false;
    textField.addTarget(self, action: #selector(nameFieldEditingChanged(_:)), for: UIControl.Event.editingChanged)
    return textField;
}();

let tagTextField : UITextField = {
    var textField = UITextField();
    textField.tag = 1;
    textField.translatesAutoresizingMaskIntoConstraints = false;
    textField.addTarget(self, action: #selector(textFieldEditingChanged(_:)), for: UIControl.Event.editingChanged)
    return textField;
}();

let bottomMenu : UIView = {
    var view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false;
    return view;
}();

let saveButton : UIButton = {
    let button = UIButton()
    button.setImage(UIImage(named: "save"), for: .normal)
    button.translatesAutoresizingMaskIntoConstraints = false;
    return button
}();

let microPhoneButton : UIButton = {
    let button = UIButton()
    button.setImage(UIImage(named: "microPhone"), for: .normal)
    button.translatesAutoresizingMaskIntoConstraints = false;
    return button;
}();

let suggestionCloud : SuggenstionCloud = {        
    let cloud =  SuggenstionCloud(image: UIImage(named: "suggestionCloud.png"))
    cloud.translatesAutoresizingMaskIntoConstraints = false;
    return cloud;
}();
let tagController : TagController = {
    let tagController = TagController()
    tagController.translatesAutoresizingMaskIntoConstraints = false
    return tagController;
}()

let scaleModel = ScaleModel.init()

override func viewDidLoad() {
    super.viewDidLoad()
    print("UIScaleController_DidLoad")
    tagTextField.delegate = self
    nameTextField.delegate = self;
    suggestionCloud.delegate = self;
    view.backgroundColor = UIColor(hexString: "8ED7F5")
    view.addSubview(weigtImageView)
    view.addSubview(textView)
    view.addSubview(bottomMenu);
    view.addSubview(suggestionCloud)
    view.addSubview(tagController)
    tagController.isHidden = true;


    setUpLayout()

    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShowNotification(notification:)), name: UIResponder.keyboardWillShowNotification, object: nil)
    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHideNotification(notification:)), name: UIResponder.keyboardWillHideNotification, object: nil)
}
deinit {
    NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
    NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillHideNotification, object: nil)
}

var didSetUpSuggestionCloud = false
var didSetUpTagController = false
override func viewDidLayoutSubviews() {
    guard !self.didSetUpTagController else {
        return
    }
    guard !self.didSetUpSuggestionCloud else {
        return
    }
    self.didSetUpSuggestionCloud = true
    self.didSetUpTagController = true
};

这是有问题的代码:

@objc func keyboardWillShowNotification(notification: Notification ) {
    if let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameBeginUserInfoKey] as? NSValue)?.cgRectValue {

        // collapse and hide bottom view
        bottomMenu.contentMode = .scaleToFill;
        bottomMenu.heightAnchor.constraint(equalToConstant: 0).isActive = true;
        bottomMenu.isHidden = true

        // collapse and hide top view
        weigtImageView.contentMode = .scaleToFill;
        weigtImageView.heightAnchor.constraint(equalToConstant: 0).isActive = true;
        weigtImageView.isHidden = true;



        // spawn my tag view
        tagController.topAnchor.constraint(equalTo: self.textView.bottomAnchor).isActive = true;
        tagController.bottomAnchor.constraint(equalTo: suggestionCloud.topAnchor).isActive = true
        tagController.isHidden = false;

        // set textviews new constraints
        textView.bottomAnchor.constraint(equalTo: tagController.topAnchor).isActive = true;
        // set middleView's new constraints
        suggestionCloud.topAnchor.constraint(equalTo: tagController.bottomAnchor).isActive = true;
        suggestionCloud.bottomAnchor.constraint(equalTo: bottomMenu.topAnchor, constant: -keyboardSize.height).isActive = true

        self.view.layoutIfNeeded()
    }
}

现在发生了很多意想不到的事情，我确信我的方法在概念上是错误的。请让我知道我需要在哪里寻找解决方案。

以下是迄今为止发生的事情的几张图片:

所以当键盘抬起时:权重 View 折叠:建议云和文本向上移动。如果添加标签，则需要在 texView 和 suggesitonCloud 之间放置一个名为 tagController 的新 View 。 Lastyl 键盘需要再次折叠。

我会添加一些屏幕截图

Answer 1

您可以查看的一件事是重复约束。

每次调用 weigtImageView.heightAnchor.constraint(equalToConstant: 0).isActive = true 时，您都会创建一个新约束。这不会自动替换任何先前处于事件状态的高度约束。

要替换约束，您需要保留对它的引用，停用它，然后激活一个新约束(并可选择将其分配给您用于保留引用的变量)。

堆栈 View
堆栈 View 可能对您的情况很有帮助，因为它们会自动折叠将 isHidden 设置为 true 的 View 。我认为只要 StackView 的直接 subview 具有固有的内容大小(例如正确的内部约束)，它们就应该由 StackView 正确放置。