CODEWITHSUNDEEP
iosxcodeswiftviewautolayout
SIgalGleb
SIgalGleb

Reputation: 71

Autolayout In Xcode 7.3 (swift 2)

I have watched a lot of videos in YouTube, guides, faqs and etc, so I can create a view with autolayout, but now, I have a project, with hard UI-structure with dynamic - load elements and a lot of different views like this:
(Sketch 3 screen)

Are there any frameworks or ways to make my work more easy?

Sketch 3 screen

Upvotes: 1

Views: 289

Answers (1)

Alex Kosyakov
Alex Kosyakov

Reputation: 2176

There is a great article to learn it deeper: https://www.objc.io/issues/3-views/advanced-auto-layout-toolbox/

Anyway there are a set of auto layout tools that can make it easy to use it day by day:

Masonry (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))

Upvotes: 3

Related Questions