Question

我添加了一个红绿灯图像以及红色，黄色和绿色按钮。我希望按钮调整大小到iPhone 4S和iPhone 6S屏幕，但按钮要么从页面上消失，要么是iPhone 4S的大小错误。我认为点的数量会按比例调整，但似乎没有。任何帮助将不胜感激，我真的想了解约束，但我只是没有得到它！通常我会做一个x位置/屏幕尺寸，y位置/屏幕尺寸来重新定位它，但这可能会显着太长。

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

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

Answer 1

约束是棘手的，看起来你有很多事情要做。很难告诉你到底要做些什么，所以，如果我遇到这个问题，我会尝试做什么（希望有一个适合你）：

将属性检查器中的图像设置为Aspect Fit或Redraw ...这应该可以解决您的问题，即它们是不同的形状。
还要查看约束列表以查看是否依赖于另一个约束（例如，红色和黄色似乎具有相似的约束）。如果他们互相依赖，请确保满足任何尚未制定的约束 - 基于父母＆＃34;图像。
选择所有内容并设置为＆＃34;重置为建议约束＆＃34;。建立并运行。如果这还没有解决，那么你只能做一些事情。
删除每个对象的所有约束。从黑色图像开始并添加缺少的约束...或将其设置为＆＃34;在容器中水平居中＆＃34;。右键单击并将图像或资源拖动到＆＃34;视图＆＃34;或黄色＆＃34;第一＆＃34;圈子位于上方。

希望这有帮助。

Answer 2

最简单的解决方案是为所有图像提供宽度和高度限制的固定值。然后，您可以根据需要在superview中对齐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
    }
}

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

2 个答案: