如何使用自动布局创建总宽度的百分比？

114

我需要创建三个动态列，每个动态列占总宽度的固定百分比。不是三分之二，而是不同的价值。例如，下图显示了三列：第一列为42％宽，第二列为25％宽，第三列为33％宽。

对于跨ViewController的600像素，分别为252、150和198像素。

但是，对于任何后续显示尺寸（例如，iPhone 4横向（960宽）或iPad 2纵向（768宽）），我希望相对百分比相同（而不是上面引用的像素宽度）。

有没有办法使用Storyboard（即没有代码）来做到这一点？我可以在代码中轻松地做到这一点，但我的目标是将尽可能多的显示逻辑放入情节提要中。

在此处输入图片说明

ios xcode autolayout

— 杰弗里·伯西亚姆
source

Answers:

205

如您所说，如果您知道如何在代码中进行操作，那么您已经在情节提要中知道如何进行操作。这是完全相同的约束，但是您是在视觉上而不是在代码中创建它们。

选择一个视图及其超级视图。
选择“编辑器”->“固定”->“宽度”，将宽度限制为等于超级视图的宽度（实际上，画布底部的“固定”弹出对话框在此处效果最佳）。
编辑约束并将“乘数”设置为所需的分数，例如0.42。其他观点也是如此。

— 马特
source

确保要约束的视图出现在“相等宽度约束”的“第一项”中，而不是显示在父视图的宽度中，否则，您将子视图的宽度设为父视图的宽度的倍数。当从子视图到超级视图进行控制拖动以应用相等的宽度约束时，这些总是相反的，这对我来说似乎是违反直觉的。

— 记忆

啊-通过“用代码完成”，我的意思更像是“手动，没有约束或自动布局”。

— Jeffrey Berthiaume 2014年

好答案。令人惊讶的是，IB没有提供一种不编辑约束的方式。

— wcochran 2015年

我试图在我的UITableViewCell中应用它，并且一切都变灰了。我必须将所有视图嵌入到新视图中，然后从标签中选择“宽度相等”到新视图。希望能帮助到你。

— nano

Xcode7中的新增功能：如果要平均对齐视图，请使用新的“堆栈视图”。

— Bijan 2015年

随着Apple推出UIStackView，它使工作变得非常容易。

方法1：使用笔尖/ 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
    }
}