如何使約束正確調整按鈕的大小？

Question

我添加了一個交通信號燈圖像以及紅色，黃色和綠色按鈕。 我想將按鈕的大小調整為iPhone 4S和iPhone 6S的屏幕，但是按鈕要么在頁面上消失，要么是iPhone 4S的大小錯誤。 我認為點數將按比例調整大小，但似乎沒有。 任何幫助將不勝感激，我真的很想了解約束，但我只是沒有得到它！ 通常，我只需要執行x位置/屏幕尺寸，y位置/屏幕尺寸來重新放置它，但是這可能太長了。

這是最新錯誤位置的限制。 當我嘗試選擇交通信號燈圖像時，它不會為交通信號燈圖像的前緣和后緣提供約束。

黃色按鈕放置在交通信號燈圖像上，但不會調整大小。

Answer 1

約束是棘手的，看起來您正在進行很多工作。 很難告訴您確切的處理方法，因此，這是如果遇到此問題時我會嘗試做的事情（希望有一個對您有用）：

1. 在“屬性”檢查器中將圖像設置為“寬高比適合”或“重繪...”，這樣可以解決形狀不同的問題。

2. 還要查看約束列表，以查看一個約束是否依賴另一個約束（例如，紅色和黃色似乎具有相似的約束）。 如果他們相互依賴，請確保滿足所有尚未出現的約束-基於“父”圖像。

3. 選擇所有內容並設置為“重置為建議的約束”。 生成並運行。 如果那不能解決問題，那么您只剩下幾件事了。

4. 刪除每個對象上的所有約束。 從黑色圖像開始，添加缺少的約束...或將其設置為“在容器中水平居中”。 右鍵單擊並將圖像或資產拖動到您的“視圖”或上方的黃色“第一”圓圈。

希望這會有所幫助。

Answer 2

最簡單的解決方案是為所有圖像設置其寬度和高度約束的固定值。 然后，您可以根據需要在超級視圖中對齊SpotlightImage，並定義圓形圖像相對於交通信號燈圖像的對齊方式。

但是，如果您想根據屏幕的寬度拉伸信號燈圖像的寬度，這是一個復雜的問題。 我嘗試了一些嘗試以定義情節提要中的所有約束，但是無法提出適當的解決方案。 理想情況下，例如，要做的是按比例確定聚光燈圖像寬度的圓心。 對於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
    }
}