ios - 如何使约束正确调整按钮的大小？

Question

我添加了一个红绿灯图像和红色、黄色和绿色按钮。我想让按钮调整为 iPhone 4S 和 iPhone 6S 屏幕的大小，但是按钮要么从页面上消失，要么是 iPhone 4S 的错误大小。我认为点数会按比例调整大小，但似乎没有。任何帮助将不胜感激，我真的很想了解约束，但我就是不明白!通常我只会做一个 x-position/screensize, y-position/screensize 来重新定位它，但这可能会明显太长。





这是最新的错误位置的约束。当我尝试选择红绿灯图像时，它不会为红绿灯图像的前缘和后缘提供约束。



黄色按钮放置在红绿灯图像上，但不会调整大小。

Answer 1

最简单的解决方案是为所有图像的宽度和高度约束提供固定值。然后，您可以根据需要在 super View 中对齐 SpotlightImage，并定义圆形图像相对于红绿灯图像的对齐方式。

但是，如果您想根据屏幕宽度拉伸(stretch)红绿灯图像的宽度，这是一个复杂的问题。我尝试了一些尝试在 Storyboard 中定义所有约束，但无法找到合适的解决方案。例如，理想情况下想要做的是将圆的 centerX 与聚光灯图像的宽度成比例地定义。对于 y 位置也是如此。不幸的是，这是不可能的。

在代码中，有更多的控制权。这是一个可行的解决方案。它并不漂亮，因为您实际上是在重新计算 SpotlightImage 的宽度，但它可以工作:-)

class ViewController: UIViewController {

    lazy var stopLightImageView: UIImageView = {
        return UIImageView(image: UIImage(named:"stopLight"))
    }()

    lazy var circleImageView: UIImageView = {
        return UIImageView(image: UIImage(named:"circle"))
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
    }

    private func setupViews() {
        //Values at start.  This is used to calculate the proportional values, since you know they produce the correct results.
        let stoplightStartWidth: CGFloat = 540
        let stoplightStartHeight: CGFloat = 542
        let circleStartWidth: CGFloat = 151
        let circleStartLeading: CGFloat = 231
        let circleStartTop: CGFloat = 52

        let screenWidth = UIScreen.mainScreen().bounds.size.width
        let stoplightMargin: CGFloat = 20

        self.view.addSubview(stopLightImageView)
        stopLightImageView.translatesAutoresizingMaskIntoConstraints = false

        //stoplightImage constraints
        stopLightImageView.leadingAnchor.constraintEqualToAnchor(self.view.leadingAnchor, constant: stoplightMargin).active = true
        stopLightImageView.trailingAnchor.constraintEqualToAnchor(self.view.trailingAnchor, constant: -stoplightMargin).active = true
        stopLightImageView.centerYAnchor.constraintEqualToAnchor(self.view.centerYAnchor, constant: 0).active = true
        stopLightImageView.heightAnchor.constraintEqualToAnchor(stopLightImageView.widthAnchor, multiplier: stoplightStartWidth/stoplightStartHeight).active = true

        self.view.addSubview(circleImageView)
        circleImageView.translatesAutoresizingMaskIntoConstraints = false

        //circle constraints
        circleImageView.widthAnchor.constraintEqualToAnchor(stopLightImageView.widthAnchor, multiplier: circleStartWidth/stoplightStartWidth).active = true
        circleImageView.heightAnchor.constraintEqualToAnchor(circleImageView.widthAnchor, multiplier: 1).active = true
        let stoplightWidth = screenWidth - 2*stoplightMargin
        let stoplightHeight = stoplightWidth * stoplightStartHeight/stoplightStartWidth
        circleImageView.leadingAnchor.constraintEqualToAnchor(stopLightImageView.leadingAnchor, constant: stoplightWidth*circleStartLeading/stoplightStartWidth).active = true
        circleImageView.topAnchor.constraintEqualToAnchor(stopLightImageView.topAnchor, constant: stoplightHeight*circleStartTop/stoplightStartHeight).active = true
    }
}