如何使用autolayout創建總寬度的百分比？

Question

我需要創建三個動態列，每個列具有固定的總寬度百分比。 不是三分之一，而是不同的價值觀。 例如，下圖顯示了三列：第一列為42％寬，第二列為25％寬，第三列為33％寬。

對於視圖控制器上的600像素，分別為252,150和198像素。

但是，對於任何后續顯示尺寸（即iPhone 4橫向（960寬）或iPad 2縱向（768寬），我希望相對百分比相同（不是上面引用的像素寬度）。

有沒有辦法使用Storyboard（即沒有代碼）？ 我可以在代碼中輕松完成這項工作，但我的目標是盡可能多地將這種顯示邏輯放入Storyboard中。

Answer 1

如果，如您所說，您知道如何在代碼中執行此操作，那么您已經知道如何在故事板中執行此操作。 這是完全相同的約束，但您是在視覺上而不是在代碼中創建它們。

1. 選擇視圖及其超級視圖。

2. 選擇編輯器 - >圖釘 - >寬度同樣將寬度限制為等於超視圖的寬度（實際上，畫布底部的“圖釘”彈出對話框最適合此處）。

3. 編輯約束並將乘數設置為所需的分數，例如0.42。 其他觀點也是如此。

Answer 2

隨着Apple推出UIStackView，它使工作變得輕松。

方法1：使用Nib / StoryBoard：

您只需在界面構建器中添加三個視圖並將它們嵌入到stackview中

Xcode►編輯器►嵌入►StackView

選擇stackView並使用safeArea給出帶有前導，尾隨，頂部和相等高度的約束

單擊屬性檢查器區域並設置StackView水平和分布按比例填充

[ 3

給出三個視圖的約束，包括前導，尾隨，頂部，底部和各自的邊。

方法2：以編程方式：

import UIKit
class StackViewProgramatically: UIViewController {
    var propotionalStackView: UIStackView!
    ///Initially defining three views
    let redView: UIView = {
        let view = UIView()//taking 42 % initially
        view.frame = CGRect(x: 0, y: 0, width: 42 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
        view.backgroundColor = .red
        return view
    }()

    let greenView: UIView = {
        let view = UIView()//taking 42* initially
        view.frame = CGRect(x: 42 * UIScreen.main.bounds.width/100, y: 0, width: 25 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
        view.backgroundColor = .green
        return view
    }()
    let blueView: UIView = {
        let view = UIView()//taking 33*initially
        view.frame = CGRect(x: 67 * UIScreen.main.bounds.width/100, y: 0, width: 33 * UIScreen.main.bounds.width/100, height: UIScreen.main.bounds.height)
        view.backgroundColor = .blue
        return view
    }()

    ///Changing UIView frame to supports landscape mode.
    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        DispatchQueue.main.async {
            self.redView.frame = CGRect(x: 0, y: 0, width: 42 * self.widthPercent, height: self.screenHeight)
            self.greenView.frame = CGRect(x: 42 * self.widthPercent, y: 0, width: 25 * self.widthPercent, height: self.screenHeight)
            self.blueView.frame = CGRect(x: 67 * self.widthPercent, y: 0, width: 33 * self.widthPercent, height: self.screenHeight)
        }
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        //Adding subViews to the stackView
        propotionalStackView = UIStackView()
        propotionalStackView.addSubview(redView)
        propotionalStackView.addSubview(greenView)
        propotionalStackView.addSubview(blueView)
        propotionalStackView.spacing = 0
        ///setting up stackView
        propotionalStackView.axis = .horizontal
        propotionalStackView.distribution = .fillProportionally
        propotionalStackView.alignment = .fill
        view.addSubview(propotionalStackView)
    }
}
//MARK: UIscreen helper extension
extension NSObject {

    var widthPercent: CGFloat {
        return UIScreen.main.bounds.width/100
    }

    var screenHeight: CGFloat {
        return UIScreen.main.bounds.height
    }
}

輸出：

適用於風景和肖像

演示項目 - https://github.com/janeshsutharios/UIStackView-with-constraints

https://developer.apple.com/videos/play/wwdc2015/218/

Answer 3

我認為這可以更詳細地解釋，因此它可以更容易地應用於在superview中需要固定百分比布局的任意數量的視圖。

最左側的觀點

• 錨定到SuperView.Leading
• 將其固定百分比定義為SuperView.Height上的乘數

中級意見

• 將其固定百分比定義為SuperView.Height上的乘數
• 將其left固定在鄰居的右側

最正確的觀點

• 沒有定義固定的百分比（它是可用視圖的剩余部分）
• 將其left固定在鄰居的右側
• 將其right置於SuperView.Trailing

所有觀點

• 通過錨定到Top Layout Guide.Top和Top Layout Guide.bottom來定義非固定高度。 在上面的答案中，注意到這也可以通過設置與相鄰視圖相等的高度來完成。