Xcode 7.3 (swift 2) 中的自动布局

Posted 2023-02-26

【中文标题】Xcode 7.3 (swift 2) 中的自动布局

【英文标题】：Autolayout In Xcode 7.3 (swift 2)

【发布时间】：2016-05-04 16:52:12

【问题描述】：

我在 YouTube 上观看了很多视频、指南、常见问题解答等，因此我可以使用自动布局创建视图，但是现在，我有一个项目，具有带有动态加载元素的硬 UI 结构和很多像这样的不同观点： （草图 3 屏幕）

是否有任何框架或方法可以让我的工作更轻松？

【问题讨论】：

自动布局和尺寸类看起来非常困难，但如果你掌握了这一点，它将是最有趣的工作。花一些时间来学习它并享受编码的乐趣。

【参考方案1】：

有一篇很棒的文章可以更深入地学习它： https://www.objc.io/issues/3-views/advanced-auto-layout-toolbox/

总之有一套自动布局工具可以让它日复一日的轻松使用：

砌体 (https://github.com/SnapKit/Masonry)

//these two constraints are exactly the same
make.left.greaterThanOrEqualTo(label);
make.left.greaterThanOrEqualTo(label.mas_left);


//creates view.left = view.superview.left + 10
make.left.lessThanOrEqualTo(@10)

EasyPeasy (https://github.com/nakiostudio/EasyPeasy)

    // Apply width = 0 and height = 0 constraints
       view <- Size()

    // Apply width = referenceView.width and height = referenceView.height constraints
       view <- Size().like(referenceView)

    // Apply width = 100 and height = 100 constraints
       view <- Size(100)

    // Apply width = 200 and height = 100 constraints
       view <- Size(CGSize(width: 200, height: 100)


    // Apply left = 0, right = 0, top = 0 and bottom = 0 constraints to its superview
       view <- Edges()

    // Apply left = 10, right = 10, top = 10 and bottom = 10 constraints to its superview
       view <- Edges(10)

    // Apply left = 10, right = 10, top = 5 and bottom = 5 constraints to its superview
       view <- Edges(UIEdgeInsets(top: 5, left: 10, bottom: 5, right: 10))

PureLayout (https://github.com/PureLayout/PureLayout)

//returns the constraints it creates so you have full control:
let constraint = skinnyView.autoMatchDimension(.Height, toDimension: .Width, ofView: tallView)

// 2 constraints created & activated in one line!
logoImageView.autoCenterInSuperview()

// 4 constraints created & activated in one line!
textContentView.autoPinEdgesToSuperviewEdgesWithInsets(UIEdgeInsets(top: 20.0, left: 5.0, bottom: 10.0, right: 5.0))