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

Question

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

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

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

Answer 1

约束很棘手，看起来你有很多事情要做。很难准确地告诉你该怎么做，所以，如果我遇到这个问题，我会尝试做以下事情（希望对你有用）：

将属性检查器中的图像设置为纵横比适合或重绘...这应该可以解决您的问题，因为它们是不同的形状。
还要查看约束列表，看看一个是否依赖另一个，（例如红色和黄色似乎有类似的约束）。如果它们相互依赖，请确保满足尚未基于 "parent" 图像的任何约束。
Select 一切并设置为 "Reset to Suggested Constraints"。构建并运行。如果那不能解决问题，那么您只能做几件事。
删除每个对象的所有约束。从黑色图像开始并添加缺少的约束...或将其设置为 "Center Horizontally in Container"。右键单击并将图像或资产拖到 "view" 或上方的黄色 "First" 圆圈中。

希望这对您有所帮助。

Answer 2

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

但是，如果您想根据屏幕的宽度拉伸红绿灯图像的宽度，这是一个复杂的问题。我试着尝试在故事板中定义所有约束，但无法想出合适的解决方案。例如，理想情况下，将圆的中心 X 定义为与聚光灯图像的宽度成比例。同样对于 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
    }
}

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

How do i make the constraints resize the buttons correctly?

views

constraints

ios