以编程方式显示和隐藏带有其子视图的容器UIView

时间:2019-04-14 14:42:29

标签: ios swift autolayout

我并排有一个标签和一个按钮,如下所示:

enter image description here

这是通过以下代码创建的:

private func addViewBack() {
    myLabel.translatesAutoresizingMaskIntoConstraints = false
    myLabel.text = "Show my label"

    myButton.addTarget(self, action: #selector(pressed), for: .touchUpInside)
    myButton.setTitleColor(UIColor.lightGray, for: UIControl.State.normal)
    myButton.translatesAutoresizingMaskIntoConstraints = false
    myButton.setTitle("Button", for: .normal)
    myButton.clipsToBounds = true

    containerView.backgroundColor = .red
    containerView.addSubview(myLabel)
    containerView.translatesAutoresizingMaskIntoConstraints = false
    containerView.addSubview(myButton)

    containerView.addConstraint(NSLayoutConstraint(item: myButton, attribute: .centerY, relatedBy: .equal, toItem: myLabel, attribute: .centerY, multiplier: 1, constant: 0))
    containerView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-8-[myLabel]-8-|", options: [], metrics: nil, views: ["myLabel":myLabel]))
    containerView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-8-[myLabel]", options: [], metrics: nil, views: ["myLabel":myLabel]))
    containerView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[myButton]-8-|", options: [], metrics: nil, views: ["myButton":myButton]))
    containerView.layoutIfNeeded()

    self.view.addSubview(containerView)

    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:[topView]-100-[containerView]", options: [], metrics: nil, views: ["containerView":containerView,"topView":viewTop]))
    self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-8-[containerView]-8-|", options: [], metrics: nil, views: ["containerView":containerView]))
    self.view.layoutIfNeeded()
}

我有显示和隐藏按钮,当按下它们时,它们应该显示和隐藏容器视图:

@IBAction func show(_ sender: Any) {

    if let constraint = (containerView.constraints.filter{$0.firstAttribute == .height}.first) {
        constraint.isActive = false
    }

    containerView.layoutIfNeeded()
}

@IBAction func hide(_ sender: Any) {
    containerView.heightAnchor.constraint(equalToConstant: 0).isActive = true
    containerView.layoutIfNeeded()

}

使用hide动作时,按钮永远不会被隐藏,最终我得到这样的东西:

enter image description here

当我添加以下内容时,它会起作用:

@IBAction func hide(_ sender: Any) {
    containerView.heightAnchor.constraint(equalToConstant: 0).isActive = true
    myButton.heightAnchor.constraint(equalToConstant: 0).isActive = true
    containerView.layoutIfNeeded()

}

当我按下show动作时,按钮再也不会像这样再次出现:

enter image description here

如何通过编程以自动布局非常简单地在容器视图中显示和隐藏元素?

1 个答案:

答案 0 :(得分:2)

与其使容器视图高度约束处于活动/非活动状态,不如将其常数更改为零以隐藏容器视图。如果其clipsToBounds为true,则还将隐藏内容。