• Stars
    star
    41
  • Rank 668,415 (Top 14 %)
  • Language
    Swift
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

The fast path to autolayout views in code

NorthLayout

Build Status CI Version License Platform

The fast path to autolayout views in code

Talks

https://speakerdeck.com/banjun/auto-layout-with-an-extended-visual-format-language at AltConf19 https://speakerdeck.com/banjun/lets-start-vfl

Simple Usage

let iconView = UIImageView() // and customize...
let nameLabel = UILabel() // and customize...

override func loadView() {
    super.loadView()
    title = "Simple Example"
    view.backgroundColor = .white
    let autolayout = northLayoutFormat(["p": 8], [
        "icon": iconView,
        "name": nameLabel])
    autolayout("H:||[icon(==64)]") // 64pt width icon on left side with default margin
    autolayout("H:||[name]||") // full width label with default margin
    autolayout("V:||-p-[icon(==64)]-p-[name]") // stack them vertically
}

See also Example project.

View Level Safe Area Example

override init(frame: CGRect) {
    super.init(frame: frame)
    // autolayout respecting safe area without reference to container view controller
    let autolayout = northLayoutFormat([:], [
        "icon": iconView,
        "name": nameLabel])
    autolayout("H:||-(>=0)-[icon(==64)]-(>=0)-||") // 64pt fitting width icon with default margin
    autolayout("H:||[name]||") // fitting width label with default margin
    autolayout("V:||[icon(==64)]-[name]||") // stack them vertically
    // constrain iconView horizontal ambiguity to safe area center
    layoutMarginsGuide.centerXAnchor.constraint(equalTo: iconView.centerXAnchor).isActive = true
}

See also Example project.

Advanced Example

See Example project.

Features

📜 No Storyboards Required

Let's autolayout in code. boilerplates such as translatesAutoresizingMaskIntoConstraints = false and adding as subview are coded in northLayoutFormat().

↔️ Visual Format Language

Use Visual Format Language (VFL) for layout.

Auto Layout Guide: Visual Format Language

⏸ Extended Visual Format for Layout Margins & Safe Area

In addition to Apple VFL above, NorthLayout introduces || syntax for layout margin bounds.

// stick to side edges (i.e. screen edges for view of view controller)
autolayout("H:|[icon1]|")

// stick to side layout margins (avoids non safe areas)
autolayout("H:||[icon2]||")

📚 View Controller level & View level layout

In autolayout, there is some differences in view of view controller and independent view. northLayoutFormat is available for view controller and view. You can use | as topLayoutGuide or bottomLayoutGuide (mainly for before iOS 11) and avoid conflicting scroll adjustments on view controllers. You can also code layout simply without a view controller on views.

📱🖥 iOS & macOS

Available for UIView & NSView

Migration to NorthLayout 5

NorthLayout 4 has supported Safe Area by translating | bounds as safe area layout guides by default.

NorthLayout 5 adds breaking changes that introduces || layout margin guides and thus | no longer respects Safe Area. Choose | to stick to edges, or || to inset in layout margins or safe area.

Installation

NorthLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "NorthLayout"

Code Snippets

Code snippets help writing VFL activated in string literal scope.

cd (NorthLayout directory)
cp CodeSnippets/*.codesnippet ~/Library/Developer/Xcode/UserData/CodeSnippets/

The Name

NorthLayout is named after where it was cocoapodized, Lake Toya in the North prefecture of Japan, the setting of Celestial Method.

License

NorthLayout is available under the MIT license. See the LICENSE file for more info.

More Repositories

1

PhotoStudioPlayer

iOS screen capture player for macOS with chroma key filter for starlight stage
Swift
123
star
2

WatchFaceDumper

macOS viewer/editor for Apple Watch watch face file (.watchface) for the file format analysis
Swift
47
star
3

WSDL2Swift

Pure Swift alternative to WSDL2ObjC making a SOAP request & parsing its response as defined in WSDL
Swift
27
star
4

SwiftHotReload

Hot reload on swift app using at _dynamicReplacement
Swift
13
star
5

SwiftSparql

SPARQL 1.1 query generator and results json format decoder (Decodable)
Swift
11
star
6

BigDiffer

diff & patch for UITableView with large number of rows (changes between 0~5000)
Swift
11
star
7

ikemen

Swift way of Ruby Object#tap
Swift
10
star
8

SwiftBeaker

Swift client generator for API Blueprint
Swift
6
star
9

imastodondon

stream toots on Touch Bar from imastodon local timeline dondon / アイマストドンのローカルタイムラインをTouch Barにどんどん流す
Swift
6
star
10

opmlreader

OPML Reader
Objective-C
6
star
11

imastodon

mastodon client for iOS & macOS
Swift
5
star
12

librtmp

Objective-C
4
star
13

Resonance

macOS MIDI input viewer
Swift
4
star
14

skk-jisyo-imasparql

アイマスのSKK辞書 (imas/imasparql)
Shell
4
star
15

bansan

👀 bansan checks swift code structures instead of your eyes
Shell
4
star
16

Caerula

Beacon radar view for UIKit
Swift
4
star
17

AudioAnalyzer

process macOS audio input
Swift
4
star
18

RemixSwiftUI

visionOS sandbox: place SwiftUI views in both plain window & immersive space (RealityView)
Swift
4
star
19

ReactiveSSE

Server Sent Events (SSE) parser operators for ReactiveSwift
Swift
3
star
20

Toki

SOAP Stubber for APIs generated by WSDL2Swift, written in Swift on top of Mockingjay stubbing library
Swift
3
star
21

skk-jisyo-prismdb

プリティーシリーズのSKK辞書
Shell
3
star
22

JetToTheFuture

safely `forced()` to get to the BrightFutures.Future values
Swift
3
star
23

VolumetricChromaKeyPlayer

experimental project for chroma key video playback in visionOS
Swift
3
star
24

YesBDTime

Get current time of Blu-ray Player
Swift
3
star
25

PartyPlay-ios

variant of codefirst/party-play
Swift
2
star
26

ForceTouchOSXExample

osx example project for force touch / force click (>= 10.10.3)
Swift
2
star
27

EurekaXcode9

inspect Eureka with Xcode 9
Swift
1
star
28

Ruler-visionOS

physical metrics ruler on visionOS
Swift
1
star
29

OctoSearch

Swift
1
star
30

PrichanStudio

コーデが身体に映しだされるんだ〜の研究
Swift
1
star
31

postmap

postmap.org viewer for iPhone
Objective-C
1
star
32

banjun.github.com

github.banjun.jp
HTML
1
star
33

ShadowScreen

Capture screen/window into window with delay
Swift
1
star
34

AcrylStand

Swift
1
star
35

colorlist-imasparql

macOS color list generated from im@sparql
Swift
1
star
36

LivePhotoShow

prototyped at im@s Hackathon 2016 https://imas.connpass.com/event/40290/
1
star