如何以编程方式折叠UIViews？

Question

我正在开发我的第一个IOS应用程序，但遇到了问题。 我有一个精心设计的程序化自动部署UI，可以响应用户交互。 当显示键盘时，必须根据某些条件折叠某些视图，移动其他视图并生成其他视图。

现在处于默认状态，不会发生自动布局错误。 但是，一旦事情开始发展，一切都会崩溃。 一些问题与图像保留其高度有关，而其视图的heigconstriant设置为0。现在，我确实启用了.scaleToFill。

我已经研究了stackViews，但是由于我的大多数View的大小不同，并且具有不同的嵌套UI元素，因此stackviews确实可以解决我的问题。 但我当然希望对此有所投入。

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

现在，我不介意手动输入很多约束，只要它可以工作即可。

这是有问题的视图的约束（还有更多）

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

这是ViewController的设置：

   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()
    }
}

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

以下是到目前为止所发生情况的一些图片：

因此，当键盘抬起时：weightView折叠起来：proposalcloud和文本向上移动。 如果添加了标签，则需要在texView和suggesitonCloud之间放置一个名为tagController的新视图。 键盘键Lastyl需要再次折叠。

不适地添加了一些截图

Answer 1

如果您对要发布的视图没有很强的引用，则足以执行此操作：

if view2Breleased.superview != nil {
    view2Breleased.removeFromSuperview()
}

该视图将消失并从内存中释放。

如果您暂时不知道什么是强引用，请尝试我编写的代码。 无论如何，这些视图将消失。

（强参考装置已分配的图，其生存的代码的执行的变量view2Breleased.removeFromSuperview()和从该函数调用，其中代码的出口view2Breleased.removeFromSuperview()是）。

Answer 2

您可能要看的一件事是重复约束。

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

要替换约束，您需要保留对它的引用，将其停用，然后激活一个新的约束（并有选择地为其分配用于保留引用的变量）。

堆栈视图
堆栈视图在您的情况下可能会有所帮助，因为它们会自动折叠将isHidden设置为true的视图。 我认为，只要StackView的直接子视图具有固有的内容大小（例如，正确的内部约束），它们就应该由StackView正确放置。

Answer 3

您可以像这样更改heightAnchor约束的常量：

import Foundation
import UIKit

class TestController : UIViewController {

var myViewHeightConstraint : NSLayoutConstraint!

let myView : UIControl = {
    let newView = UIControl()
    newView.translatesAutoresizingMaskIntoConstraints = false
    newView.backgroundColor = .red
    return newView
}()

override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white


    self.myView.addTarget(self, action: #selector(viewClicked), for: .touchUpInside)
    self.myViewHeightConstraint = myView.heightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.heightAnchor)

    setup()
}

func setup(){

    view.addSubview(myView)

    myView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    myView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor).isActive = true
    myView.widthAnchor.constraint(equalTo: view.widthAnchor).isActive = true
    self.myViewHeightConstraint.isActive = true

}

@objc func viewClicked() {
    self.myViewHeightConstraint.constant = -self.myView.frame.size.height
}

}

在我的示例中，我将常量设置为减去视图框架高度的高度，这实际上使该视图折叠。