Swift PureLayout：在最高垂直居中的子視圖上方和下方添加x點填充

我正在使用PureLayout框架並在Swift中編寫我的UIView。Swift PureLayout：在最高垂直居中的子視圖上方和下方添加x點填充

我有一個視圖，其中包含四個按鈕，即而不是所有高度相同。

我已經添加了約束來平分這些按鈕，並將它們垂直居中放置在視圖中，並在結尾的按鈕兩側添加了填充。但是，我不確定如何設置視圖的高度/頂部約束，以便它與最高按鈕的頂部之間有8.0點的間隙。我可以將約束添加到每個按鈕的頂部和底部，以使它們距視圖邊緣大於等於8.0像素，但這意味着視圖可以垂直拉伸，同時仍然保持這些約束。我不會知道這些按鈕中哪一個是最高的，直到運行時爲止。

我能想到的唯一選擇是通過我的按鈕遍歷我的按鈕，並找到最高存儲在一個變量，並使用它，同時使我的約束，但我想知道是否有辦法用PureLayout做到這一點更簡單一點，而不必遍歷所有這些對象。有沒有一種方法我錯過了，說「讓這個值儘可能小，同時滿足剩下的約束條件」，我可以將其應用於視圖的高度，而不是？

let topOffset = CGFloat(8.0) 
let bottomOffset = CGFloat(8.0) 
button1.autoConstrainAttribute(.top, to: .top, of: self, withOffset: topOffset, relation: NSLayoutRelation.self.autoConstrainAttribute(.bottom, to: .bottom, of: button1, withOffset: topOffset, relation: NSLayoutRelation.greaterThanOrEqual) 
button2.autoConstrainAttribute(.top, to: .top, of: self, withOffset: topOffset, relation: NSLayoutRelation.self.autoConstrainAttribute(.bottom, to: .bottom, of: button2, withOffset: topOffset, relation: NSLayoutRelation.greaterThanOrEqual) 
button3.autoConstrainAttribute(.top, to: .top, of: self, withOffset: topOffset, relation: NSLayoutRelation.self.autoConstrainAttribute(.bottom, to: .bottom, of: button3, withOffset: topOffset, relation: NSLayoutRelation.greaterThanOrEqual) 
button4.autoConstrainAttribute(.top, to: .top, of: self, withOffset: topOffset, relation: NSLayoutRelation.self.autoConstrainAttribute(.bottom, to: .bottom, of: button4, withOffset: topOffset, relation: NSLayoutRelation.greaterThanOrEqual) 
//MISSING: Somehow make self's height as small as possible

我對這個不成熟的道歉表示歉意，但是這裏有一些我正在瞄準的東西。忽略水平間距。矩形是視圖，圓形是按鈕，大小各不相同。視圖需要在這些按鈕中最高/最低處上方/下方填充8.0個填充點，即在這種情況下爲藍色填充點。它們都是在視圖中垂直居中的，我不知道它們的大小，直到我在實例化視圖時動態設置圖像。

來源

2017-08-16 Jake T.

你可以發送你想達到什麼樣的一個形象？很難理解你的意思 –

將你的按鈕放在另一個容器中並向現有容器添加約束。 –

@AndriiChernenko此視圖*是*另一個容器。 –

爲了什麼我能理解，這是你在想什麼來實現的，對不對？

爲了達到這個目的，你可以使用UIStackView等間距作爲容器，並將所有的按鈕作爲孩子添加到它。堆棧視圖會自動假定最高按鈕的高度，並且您可以從頂部隔開8px。

來源

2017-08-16 21:42:39

啊，我以前從來沒有用過StackView，這聽起來像是這個謎題的完美組成部分。對這個概念不熟悉，說實話，總是使用spacer視圖，直到我發現PureLayout具有基於乘法器的便利約束。我會嘗試將這些重新加入到堆棧視圖中，看看它是如何發生的。我所瞄準的目標和你在這裏放置的唯一區別是按鈕都是垂直對齊的，並且上面/下面的空間可以很容易地添加在堆棧視圖周圍。 –

你可以使用一個容器視圖和這樣的混合物stackview：

override func viewDidLoad() { 
    super.viewDidLoad() 

    let container = UIView() 
    container.translatesAutoresizingMaskIntoConstraints = false 

    container.backgroundColor = .lightGray 

    view.addSubview(container) 
    container.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true 
    container.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true 

    let stackView = UIStackView() 
    stackView.translatesAutoresizingMaskIntoConstraints = false 

    stackView.axis = .horizontal 
    stackView.alignment = .center 
    stackView.distribution = .fillProportionally 
    stackView.spacing = 8 

    container.addSubview(stackView) 
    stackView.topAnchor.constraint(equalTo: container.topAnchor, constant: 8).isActive = true 
    stackView.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 8).isActive = true 
    container.bottomAnchor.constraint(equalTo: stackView.bottomAnchor, constant: 8).isActive = true 
    container.trailingAnchor.constraint(equalTo: stackView.trailingAnchor, constant: 8).isActive = true 

    let buttonHeights: [CGFloat] = [30, 50, 40, 60] 

    for (i, buttonHeight) in buttonHeights.enumerated() { 
     let button = RoundButton(type: .system) 
     button.translatesAutoresizingMaskIntoConstraints = false 

     button.backgroundColor = .darkGray 
     button.setTitle("\(i)", for: .normal) 
     button.setTitleColor(.white, for: .normal) 

     stackView.addArrangedSubview(button) 
     button.heightAnchor.constraint(equalToConstant: buttonHeight).isActive = true 
     button.widthAnchor.constraint(equalTo: button.heightAnchor).isActive = true 
    } 
}

注：我定製RoundButton類簡單地設置圓角半徑，使其一個圓形按鈕。

結果：

來源

2017-08-16 22:32:09

Swift PureLayout：在最高垂直居中的子視圖上方和下方添加x點填充

回答

相關問題