使用自动布局约束以编程方式创建四个具有相同高度和宽度的 UIView

Posted

技术标签:

【中文标题】使用自动布局约束以编程方式创建四个具有相同高度和宽度的 UIView【英文标题】:Using auto layout constraints programmatically create four UIView all with equal height and width 【发布时间】:2014-11-12 10:40:27 【问题描述】:

如何以编程方式使用自动布局约束创建与以下相同的视图。我一直在网上寻找资源,但我找不到任何在线教程来以编程方式创建和 equalWidth 和 equalHeight 约束。

请告知我如何以编程方式设置 equalWidth 和 equalHeight 以实现如下布局。

【问题讨论】:

第一个问题。你确定第二个布局是正确的吗?第二个问题。为什么不直接禁用横向模式?如果您禁用横向,则只需创建第一个布局,然后当您旋转时它将保持不变,因此创建第二个布局。 抱歉,我快速创建此图像仅用于演示。我希望开启所有模式(人像和风景)。以编程方式使用自动布局约束来编码此布局。 Ray Wenderlich 网站有一个 AutoLayout 教程,它从字面上展示了如何做到这一点。 注意,它们不是超级视图高度和宽度的 50%。一种 AutoLayout 的做法是说它们都是相等的高度和相等的宽度。 (即 red.width == yellow.width == blue.width == green.width)等... 是的,谢谢...我已将标题编辑为相等的宽度和高度 【参考方案1】:

类似这样的:

/*
 * ┌─┬─┐
 * │1│2│
 * ├─┼─┤
 * │3│4│
 * └─┴─┘
 */
override func viewDidLoad() 
    super.viewDidLoad()
    let view1 = UIView(frame: CGRectZero)
    let view2 = UIView(frame: CGRectZero)
    let view3 = UIView(frame: CGRectZero)
    let view4 = UIView(frame: CGRectZero)

    view1.backgroundColor = UIColor.yellowColor()
    view2.backgroundColor = UIColor.redColor()
    view3.backgroundColor = UIColor.greenColor()
    view4.backgroundColor = UIColor.blueColor()

    view1.setTranslatesAutoresizingMaskIntoConstraints(false)
    view2.setTranslatesAutoresizingMaskIntoConstraints(false)
    view3.setTranslatesAutoresizingMaskIntoConstraints(false)
    view4.setTranslatesAutoresizingMaskIntoConstraints(false)

    view.addSubview(view1)
    view.addSubview(view2)
    view.addSubview(view3)
    view.addSubview(view4)

    let views = ["view1":view1, "view2":view2, "view3":view3, "view4":view4]
    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[view1][view2(==view1)]|", options: .allZeros, metrics: nil, views: views))
    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[view3][view4(==view3)]|", options: .allZeros, metrics: nil, views: views))
    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[view1][view3(==view1)]|", options: .allZeros, metrics: nil, views: views))
    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[view2][view4(==view2)]|", options: .allZeros, metrics: nil, views: views))


    // Do any additional setup after loading the view, typically from a nib.

【讨论】:

感谢 rintaro 的完整答案...代码自行解释。 嗨@kaneyip,你能用constraintWithItem:方法重写代码吗??

以上是关于使用自动布局约束以编程方式创建四个具有相同高度和宽度的 UIView的主要内容,如果未能解决你的问题,请参考以下文章

以编程方式使用自动布局约束的问题

如何在ios swift中以编程方式创建自动布局等宽度约束?

模糊自动布局约束(以编程方式添加)

以编程方式将自动布局约束添加到恒定宽度和高度的子视图

自动布局约束没有得到尊重

自定义 tableviewcell 动态高度未根据约束更新(以编程方式自动布局)