【问题标题】:Autolayout In Xcode 7.3 (swift 2)Xcode 7.3 (swift 2) 中的自动布局
【发布时间】:2016-05-04 16:52:12
【问题描述】:

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

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

【问题讨论】:

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

标签: ios xcode swift view autolayout


【解决方案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))

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多