AnchorLayoutKit

AnchorLayoutKit is a simple layout tool for iOS.

The guiding thought

Ever wonder how to increase productivity while building iOS layout in code? Bored of typing repetitive code with 5 lines just to put a UIView on view?

Look no further because AnchorLayoutKit will help you to improve productivity to build world-scale applications.

Real scale apps

Top 5 App Store (USA) application using this kit:

• Recolor, download it on App Store

New spin off application from Recolor also builded with this kit:

• RBN (Recolor By Numbers), download it on App Store

Personal live applications on App Store builded with this kit:

• Boxline, Download
• FDMRI, Manual dexterity exam for enrollment at the Faculty of Dental Medicine of Rijeka. Download. Req ID for entering app.

Requirements

• iOS 10+
• Xcode 11+
• Swift 5

Installation

Swift Package Manager

The Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler. It is in early development, but AnchorLayoutKit does support its use on supported platforms.

Once you have your Swift package set up, adding AnchorLayoutKit as a dependency is as easy as adding it to the dependencies value of your Package.swift.

    dependencies: [
        .package(url: "https://github.com/IvicaPetrsoric/AnchorLayoutKit", .upToNextMajor(from: "1.0.6"))
    ]

Usage

Add simple red UIView element on the view, defining anchors, size and padding

override func viewDidLoad() {
    super.viewDidLoad()
    
    // setup
    
    let redView = UIView()
    redView.backgroundColor = .red

    view.addSubview(redView)
    
    // implementation 
}

• Currently with Swift

    // add redView to fill whole view

    redView.translatesAutoresizingMaskIntoConstraints = false
    redView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    redView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
    redView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
    redView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

• With AnchorLayoutKit
• • A) Anchor to whole supper view

Implementation	Result
Add redView to fill whole view
redView.anchor(top: view.topAnchor, leading: view.leadingAnchor, bottom: view.bottomAnchor, trailing: view.trailingAnchor)

• • B) Anchor to whole supper view

    // add redView to fill whole view 
    
    redView.anchorFillSuperview()

• • C) Anchor to whole supper view but taking safe area in account, also adding some padding to leading and trailing anchor

Implementation	Result
Add redView to fill whole view (safe area included) with padding left and right
redView.anchorFillSuperview(padding: .init(top: 0, left: 8, bottom: 0, right: 28))

• Adding view depending on other view
• • A) Depending on self.view

    // Add redView to fill whole view but taking safe area in account

    redView.anchor(top: view.topAnchor, leading: view.leadingAnchor,
                   bottom: view.bottomAnchor, trailing: view.trailingAnchor)

• • B) Depending on other view, like red View

Implementation	Result
Depending on other view, like red View with padding
// setup let redView = UIView() redView.backgroundColor = .red let blueView = UIView() blueView.backgroundColor = .blue view.addSubview(redView) view.addSubview(blueView) // set red view somewhere on the view, with padding on top // and leading anchor and specific size redView.anchor(top: view.topAnchor, leading: view.leadingAnchor, bottom: nil, trailing: nil, padding: .init(top: 20, left: 40, bottom: 0, right: 0), size: .init(width: 48, height: 48)) // set blue view depending on the red view (top denepnding on bottom of red view, // leading depending on trailing of red view) // with extra padding (top in plus, left in minus) and specific size blueView.anchor(top: redView.bottomAnchor, leading: redView.trailingAnchor, bottom: nil, trailing: nil, padding: .init(top: 30, left: -14, bottom: 0, right: 0), size: .init(width: 64, height: 128))

Result:

• • C) Depending on other view, like red View but with centering on X axis (super view)

Implementation	Result
Blue view with anchor top on red view but center on x axis depending on super view
blueView.anchorCenterXToSuperview() blueView.anchor(top: redView.bottomAnchor, leading: nil, bottom: nil, trailing: nil, padding: .init(top: 30, left: 0, bottom: 0, right: 0), size: .init(width: 64, height: 128))

• • D) Depending on other view, like red View but with centering on Y axis (super view), padding is on trailing with positive padding

Implementation	Result
Center on Y axis (super view), trailing anchor on red trailing and moved to left by 40 px
blueView.anchorCenterYToSuperview() blueView.anchor(top: nil, leading: nil, bottom: nil, trailing: redView.trailingAnchor, padding: .init(top: 0, left: 0, bottom: 0, right: 40), size: .init(width: 64, height: 128))

• • E) Depending on other view, like red View but with centering on X axis (red view), padding is on top anchor with positive padding

Implementation	Result
Center X to red view
blueView.anchorCenterXToView(redView) blueView.anchor(top: redView.bottomAnchor, leading: nil, bottom: nil, trailing: nil, padding: .init(top: 60, left: 0, bottom: 0, right: 40), size: .init(width: 64, height: 128))

• • F) Depending on other view, like red View but with centering on X axis (red view) with padding to the right on x axis, padding is on top anchor with positive padding

Implementation	Result
Center X to red view with padding 40px
blueView.anchorCenterXToView(redView, constant: 40) blueView.anchor(top: redView.bottomAnchor, leading: nil, bottom: nil, trailing: nil, padding: .init(top: 60, left: 0, bottom: 0, right: 40), size: .init(width: 64, height: 128))

• Centering View
• • A) With secific size

Implementation	Result
Set size to 40x40
blueView.anchorCenterSuperview(size: .init(width: 88, height: 88))

• • B) With secific size, and padding to the right and bit down

Implementation	Result
Set size to 88x88, centered and padding on X and Y from center
blueView.anchorCenterSuperview(size: .init(width: 88, height: 88), constantX: 40, constantY: 30)

• Setting specific sizes
• • A) Setting with/hegith/both as constants

    // setup
    
    blueView.anchor(top: redView.bottomAnchor, leading: view.leadingAnchor, bottom: nil, trailing: nil,
                    padding: .init(top: 60, left: 60, bottom: 0, right: 0))
                    
    // setup width
    
    blueView.anchorConstraintWidth(constant: 80)
    
    // setup height
    
    blueView.anchorConstraintHeight(constant: 80)

    // setup width and height
    
    blueView.anchorConstraintSize(constantX: 80, constantY: 80)

• • B) Setting width/height depending on a specific widht/height anchor of view

Implementation	Result
Set width anchor to red view anchor and multiplied wtih 2 (default 1.0)
// setup blueView.anchor(top: redView.bottomAnchor, leading: view.leadingAnchor, bottom: nil, trailing: nil, padding: .init(top: 60, left: 60, bottom: 0, right: 0)) // set width to anchor and multiplie it blueView.anchorConstraintWidth(anchor: redView.widthAnchor, multiplier: 2) // set height to specific constant blueView.anchorConstraintHeight(constant: 80)

• Remove ALL applied constraints to specific view

    blueView.anchorRemoveConstraints()

• Extra
• • A) Enable/Disable activate state of constraint

• • B) Add multiple views in one line

    view.addSubviews(redView, blueView, yellowView, greenView)

• • C) KeyWindow

    // get keywindow as optional (old ways UIApplication.shared.keyWindow)
    
    if let keyWindow = UIWindow.keyWindow {
        // do stuff
    }

• • D) out of the box you can get safeTopAnchor which represents top anchor which take in account safe area layout guide. Also the other anchor can be returned with safe area in account

    // safe area top anchor

    view.safeTopAnchor
    

    // safe area leadnig anchor
    
    view.safeLeadingAnchor
    
    
    // safe area bottom anchor

    view.safeBottomAnchor
    
    
    // safe area trailing anchor
    
    view.safeTrailingAnchor

• Animations - If want to animate a specific anchor, don't worry, there is an easy way in this kit, just use the anchor method anf pick return anchor you want and update it. In the following expample top anchor is animated

    // setup
    // picked top anchor as return, can be used self so a return, 
    // self represents AnchoredConstraints struct with top, leading, bottom, trailing,
    // width, height anchor properties, all of those properties can be manipulated/animated
    
    let blueViewtopAnchor = blueView.anchor(top: view.topAnchor, leading: view.leadingAnchor, 
                                            bottom: nil, trailing: nil,
                                            padding: .init(top: 0, left: 0, bottom: 0, right: 0),
                                            size: .init(width: 100, height: 100)).top
                                            
    self.view.layoutIfNeeded()

    // moves the bluew view down of the top anchor for 100 px after one sec and with duration of 5 sec
    
    UIView.animate(withDuration: 5, delay: 1) {
        blueViewtopAnchor?.constant = 100
        self.view.layoutIfNeeded()
    }