如何以编程方式折叠 UIView？

Posted 2023-03-13

【中文标题】如何以编程方式折叠 UIView？

【英文标题】：How do I collapse UIViews programatically?

【发布时间】：2019-01-04 10:44:51

【问题描述】：

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

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

我已经研究过 stackViews，但是因为我的大多数 Views 的大小都不同，嵌套的 UI 元素也不同，stackviews 现在似乎可以解决我的问题。但我当然希望对此有一些意见。

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

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

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

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

这是视图控制器设置：

   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 被折叠：suggestcloud 和 text 向上移动。 如果添加了标签，则需要在 texView 和 suggesitonCloud 之间放置一个名为 tagController 的新视图。 Lastyl 键盘需要再次折叠。

我会添加一些截图

【参考方案1】：

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

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

要替换约束，您需要保留对它的引用，停用它，然后激活一个新的（并且可以选择为它分配您用来保留引用的变量）。

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

【讨论】：

谢谢！那我就试试 sackViews！

【参考方案2】：

如果您没有强烈引用要发布的视图，那么执行此操作就足够了：

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

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

如果你暂时不知道什么是强引用，那就试试我写的代码吧。无论如何视图都会消失。

（强引用意味着您已将视图分配给一个变量，该变量在代码view2Breleased.removeFromSuperview() 的执行和代码view2Breleased.removeFromSuperview() 所在的函数调用退出后仍然存在。）

【讨论】：

谢谢，强引用是什么意思？

感谢更新

【参考方案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

在我的示例中，我将常量设置为减去视图框架高度的高度，从而有效地折叠它。

【讨论】：

谢谢，这似乎是一个解决方案，但我有很多带有嵌套视图的视图。更简洁的解决方案是将这些 UI 元素放入具有自己的子视图的单独类中，并将它们的约束设置为该类的特定实例的属性？

@ArneOldenhave 我不太确定您的视图是什么样的。如果你可以勾勒出一些可能会有所帮助的东西。从我从您的评论中收集到的是，您有很多不同的视图，其中包含很多子视图？如果是这种情况，那么将 UIView 子类化并在那里设置所有东西可能会更干净。

谢谢，我会用一些屏幕截图更新我的问题