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

我已經添加了一個紅燈，黃燈和綠燈按鈕。我想將按鈕的大小調整爲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

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

回答

相關問題