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

I need to create three dynamic columns, each with a fixed percentage of the total width. Not thirds, but different values. For example, the following illustration shows three columns: the first being 42% wide, the second being 25% wide, and the third being 33% wide.

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

For a 600 pixel across viewcontroller, that would be 252, 150, and 198 pixels respectively.

对于一个横跨viewcontroller的600像素，分别是252、150和198像素。

However, for any subsequent display sizes (i.e. iPhone 4 landscape (960 wide) or iPad 2 portrait (768 wide), I would like the relative percentages to be the same (not the pixel widths quoted above).

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

Is there a way to do this using Storyboards (i.e. without code)? I can do this easily in code, but my goal is to put as much of this display logic as possible into the Storyboard.

是否有一种方法可以使用故事板(即没有代码)来实现这一点?在代码中我可以很容易地做到这一点，但是我的目标是将尽可能多的显示逻辑放入故事板中。

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

3 个解决方案

#1

176

If, as you say, you know how to do it in code, then you already know how to do it in the storyboard. It's exactly the same constraints, but you are creating them visually rather than in code.

如果，如你所说，你知道如何在代码中做，那么你已经知道如何在故事板中做了。这是完全相同的约束，但您是在视觉上创建它们，而不是在代码中创建它们。

Select both a view and its superview.

同时选择一个视图及其父视图。
Choose Editor -> Pin -> Widths Equally to constrain the width to be equal to the superview's width (actually the "pin" popup dialog at the bottom of the canvas works best here).

选择Editor ->大头针->宽度相等，以将宽度限制为与父视图的宽度相等(实际上，画布底部的“大头针”弹出对话框在这里效果最好)。
Edit the constraint and set the Multiplier to the desired fraction, e.g. 0.42. And so too for the other views.

编辑约束并将乘数设置为所需的分数，例如0.42。其他观点也是如此。

One picture being worth a thousand words, I've implemented your proposed layout for you in a storyboard, using no code, in a github project that you can download and examine:

一幅图片价值千言万语，我已经在一个故事板中实现了你的建议布局，没有代码，在一个github项目中，你可以下载并检查:

https://github.com/mattneub/percentageWidthsInStoryboard

#2

I think this can be explained in more detail so it can be more easily applied to any number of views requiring fixed percentage layouts within a superview.

我认为可以更详细地解释这一点，以便更容易地将其应用到需要在父视图中使用固定百分比布局的任何视图。

Left-most view

Anchored to SuperView.Leading
固定SuperView.Leading
Defines its fixed percentage as a multiplier on the SuperView.Height
将其固定百分比定义为超级视图的乘数。

Intermediate views

Defines its fixed percentage as a multiplier on the SuperView.Height
将其固定百分比定义为超级视图的乘数。
Pins its left to its neighbor's right
把它的左边固定在邻居的右边

Right-Most view

Does not define a fixed percentage (it is the remainder of the available view)
不定义固定百分比(它是可用视图的剩余部分)
Pins its left to its neighbor's right
把它的左边固定在邻居的右边
Pins its right to SuperView.Trailing
把它的权利放在上面。

All Views

Define their non-fixed heights by anchoring to Top Layout Guide.Top and Top Layout Guide.bottom. In the answer above, it is noted that this can also be done by setting equal height to the neighboring view.
通过锚定顶部布局指南来定义它们的非固定高度。顶部和顶部布局指南。底部。在上面的答案中，我们注意到，这也可以通过设置与相邻视图相等的高度来完成。

#3

As Apple introduces UIStackView it made job much easy.

当苹果推出UIStackView时，它让工作变得简单多了。

Method 1: Using Nib/StoryBoard:

方法1:用笔尖/故事板:

You have to just add three view in interface builder & embed them into stackview

你只需在接口构建器中添加三个视图并将它们嵌入stackview中

Xcode ► Editor ► Embed in ► StackView

Xcode在►►►编辑嵌入StackView

Select stackView & give constraint with leading, trailing, top & equal height with safeArea

选择stackView，并对其进行前导、后导、顶、等高约束

Click to Attribute inspector area & Set StackView horizontal & distribution to fill proportionally

点击属性检查器区域，设置StackView水平和分布按比例填充。

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

Give constraint of three view with leading, trailing, top, bottom with respective of sides.

给出三个视图的约束:前边、后边、上、下各边。

Method 2: Programmatically:

方法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
    }
}

Output:

输出:

Works with landscape & portrait

作品与风景和肖像

Demo project - https://github.com/janeshsutharios/UIStackView-with-constraints

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

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

#1

176