如何使用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/