ios - 使 View 居中并填充可用高度而不离开屏幕

Question

我有这样一种情况，我希望 View 在其父 View 中居中，保持正方形，但尽可能多地填充高度而不偏离边缘，即它应该查看可用的垂直和水平空间，选择 2 中最小的一个。

还有另外 2 个 View ，一个在下面，一个在上面，它们都是按钮或标签。这些 View 的底部/顶部应附加到中央 View 的顶部/底部。我可以在一定程度上使其发挥作用，但我将在下面解释我的问题以及到目前为止我所得到的:

顶部标签有:

• .Top >= TopLayoutGuide.Bottom
• .Top = TopLayoutGuide.Bottom(优先级 250)
• .Right = CentralView.Right

中央 View 有:

• 中心 X 和 Y = Superview 中心 X 和 Y
• .高度 <= Superview.Width * 0.9
• .宽度=自身.高度
• .Top = TopLabel.Bottom

底部按钮有:

• .Right = CentralView.Right
• .Top = CentralView.Bottom
• .Bottom <= (BottomLayoutGuide.Top - 16)

运行这似乎很好，并产生了预期的结果:

但是，如果我将 View 作为自定义类的实例并添加 UIButton subview ，则一切都会出错。在这个类中我执行:

self.topLeftButton = CustomButtonClass()
self.topLeftButton.setTranslatesAutoresizingMaskIntoConstraints(false)
self.addSubview(self.topLeftButton)

self.addConstraints([
        NSLayoutConstraint(item: self.topLeftButton, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: self.topLeftButton, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1, constant: 0),
        NSLayoutConstraint(item: self.topLeftButton, attribute: .Height, relatedBy: .Equal, toItem: self, attribute: .Height, multiplier: 0.5, constant: 0),
        NSLayoutConstraint(item: self.topLeftButton, attribute: .Width, relatedBy: .Equal, toItem: self.topLeftButton, attribute: .Width, multiplier: 1, constant: 0)
        ])

使用此代码， View 会折叠为以下内容:

我不明白这是为什么。我到处做了一些小调整，但未能使其按预期工作。如果我在 IB 中添加相同的按钮， View 会再次折叠，就好像按钮的高度不会增加。

Answer 1

在现实生活中，我不会将 UIButton 子类化，但在我的回答中已经做了，因为这就是问题所表明的。 UIButton 通过组合达到最佳效果。所以也许最好创建一个 UIButton，然后修改它的属性。

class FooViewController: UIViewController {

    override func viewDidLoad() {

        var view = CustomView()
        view.backgroundColor = UIColor.darkGrayColor()

        var label = UILabel()
        label.text = "Label"

        var button = UIButton.buttonWithType(.System) as UIButton
        button.setTitle("Button", forState: .Normal)

        view.setTranslatesAutoresizingMaskIntoConstraints(false)
        label.setTranslatesAutoresizingMaskIntoConstraints(false)
        button.setTranslatesAutoresizingMaskIntoConstraints(false)

        self.view.addSubview(view)
        self.view.addSubview(label)
        self.view.addSubview(button)

        // The width should be as big as possible...
        var maxWidthConstraint = NSLayoutConstraint(item: view, attribute: .Width, relatedBy: .Equal, toItem: view.superview, attribute: .Width, multiplier: 1, constant: 0);
        // ... but not at the expense of other constraints
        maxWidthConstraint.priority = 1

        self.view.addConstraints([
                // Max width, if possible
                maxWidthConstraint,
                // Width and height can't be bigger than the container
                NSLayoutConstraint(item: view, attribute: .Width, relatedBy: .LessThanOrEqual, toItem: view.superview, attribute: .Width, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: view, attribute: .Width, relatedBy: .LessThanOrEqual, toItem: view.superview, attribute: .Height, multiplier: 1, constant: 0),
                // Width and height are equal
                NSLayoutConstraint(item: view, attribute: .Height, relatedBy: .Equal, toItem: view, attribute: .Width, multiplier: 1, constant: 0),
                // View is centered
                NSLayoutConstraint(item: view, attribute: .CenterX, relatedBy: .Equal, toItem: view.superview, attribute: .CenterX, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: view, attribute: .CenterY, relatedBy: .Equal, toItem: view.superview, attribute: .CenterY, multiplier: 1, constant: 0),
        ])

        // Label above view
        self.view.addConstraints([
                NSLayoutConstraint(item: label, attribute: .Top, relatedBy: .GreaterThanOrEqual, toItem: label.superview, attribute: .Top, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: label, attribute: .Bottom, relatedBy: .Equal, toItem: view, attribute: .Top, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: label, attribute: .Right, relatedBy: .LessThanOrEqual, toItem: view, attribute: .Right, multiplier: 1, constant: 0),
        ])

        // Button below view
        self.view.addConstraints([
                NSLayoutConstraint(item: button, attribute: .Bottom, relatedBy: .LessThanOrEqual, toItem: button.superview, attribute: .Bottom, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: button, attribute: .Top, relatedBy: .Equal, toItem: view, attribute: .Bottom, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: button, attribute: .Right, relatedBy: .LessThanOrEqual, toItem: view, attribute: .Right, multiplier: 1, constant: 0),
        ])

    }
}


class CustomView: UIView {

    required init(coder: NSCoder) {
        super.init(coder: coder)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    override init() {

        super.init()
        var button = CustomButton()
        button.setTitle("Custom Button", forState: UIControlState.Normal)
        button.setTranslatesAutoresizingMaskIntoConstraints(false)

        self.addSubview(button)

        // Custom button in the top left
        self.addConstraints([
                NSLayoutConstraint(item: button, attribute: .Top, relatedBy: .Equal, toItem: self, attribute: .Top, multiplier: 1, constant: 0),
                NSLayoutConstraint(item: button, attribute: .Left, relatedBy: .Equal, toItem: self, attribute: .Left, multiplier: 1, constant: 0),

        ])
    }
}


class CustomButton: UIButton {

    required init(coder: NSCoder) {
        super.init(coder: coder)
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    override init() {
        super.init()
        self.backgroundColor = UIColor.greenColor()
    }
}