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

我已经添加了一个红灯，黄灯和绿灯按钮。我想将按钮的大小调整为iPhone 4S和iPhone 6S屏幕，但按钮或者消失在页面之外，或者对于iPhone 4S而言尺寸不正确。我认为点的数量会按比例调整大小，但看起来没有。任何帮助将不胜感激，我真的想了解约束，但我只是没有得到它！通常我会做一个x位置/屏幕大小，y位置/屏幕大小来重新定位它，但这可能会显着太长。我如何使约束正确调整按钮大小？

下面是最新的不正确的位置的限制。当我尝试选择停车灯图像时，它不会为停车灯图像的前端和后端提供限制。

黄色按钮被放置对红绿灯的图像，但它不会调整。

来源

2016-09-15 Scuttle

我们需要看到你的刹车灯的背景图像的限制，以及限制你已经设置了3个按钮。它看起来像你的3个按钮的约束设置为视图，将这些约束设置到停车灯背景图像将使它们保持在正确的位置 –

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

但是，如果您想根据屏幕宽度来延长停车灯图像的宽度，这是一个复杂的问题。我玩了一段时间试图定义故事板中的所有限制，但无法提出适当的解决方案。例如，理想情况下想要做的是根据聚光灯图像的宽度来定义圆的中心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 
    } 
}

来源

2016-09-15 17:54:01

约束是棘手的，它看起来像你对那里发生了很多。很难确切地告诉你什么该这么做，这是我想尝试做，如果我是有这个问题（希望有适合你）：

设置在属性检查器的图像或者Aspect Fit或Redraw ...这应该解决你的问题，他们是不同的形状。
也通过约束列表来看看是否依赖另一个约束（例如，红色和黄色似乎有类似的约束）。如果他们彼此依赖，请确保满足任何尚未基于“父”图像的约束。
选择所有内容并设置为“重置为建议的约束”。构建并运行。如果这不能解决问题，那么只剩下几件事情可以做。
删除每个对象的所有约束。从黑色图像开始，添加缺少的约束......或将其设置为“在容器中水平居中”。右键单击并将图像或资产拖到您的“视图”或上方的黄色“第一个”圆圈。 3210

希望这有助于。

来源

2016-09-15 15:15:16 KSigWyatt

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

回答

相关问题