QuickLayout offers an additional way, to easily manage the Auto Layout using only code. You can harness the power of QuickLayout to align your interface programmatically without even creating constraints explicitly.
- The WHY
- Naming Convension
- Features
- Example Project
- Requirements
- Installation
- Usage
Why should you use QuickLayout?
- QuickLayout drastically shortens the amount of code in case you ever need to write the view hierarchy.
- It provides a common Auto Layout API for iOS, tvOS and macOS.
- QuickLayout contains most of the Auto Layout constructs an iOS App requires.
- The QuickLayout method declarations are very descriptive and clear. It is fully documented!
- Layout a
UIView
orNSView
or an array of views using the instances themselves, without even creating a single NSLayoutConstraint instance.
As of version 2.0.0, QuickLayout supports tvOS and macOS as well as iOS. Therefore, a few adjustments have been made.
QLView
replacesUIView
orNSView
.QLPriority
replacesNSLayoutConstraint.Priority
andUILayoutPriority
QLAttribute
replacesNSLayoutConstraint.Attribute
andNSLayoutAttribute
QLRelation
replacesNSLayoutConstraint.Relation
andNSLayoutRelation
- Extension to
QLView
that contains functionality that allows you to set constraints directly from the view itself. - Extension to
Array of QLView
that contains functionality that allows you to set constraints directly from an array of views.
The example project demonstrates the benefits of using QuickLayout with several common use cases. Have a look! 😎
Swift 4.0 or any higher version.
CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:
$ gem install cocoapods
To integrate QuickLayout into your Xcode project using CocoaPods, specify the following in your Podfile
:
pod 'QuickLayout', '3.0.0'
Then, run the following command:
$ pod install
Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.
You can install Carthage with Homebrew using the following command:
$ brew update
$ brew install carthage
To integrate QuickLayout into your Xcode project using Carthage, specify the following in your Cartfile
:
github "huri000/QuickLayout" == 3.0.0
The Swift Package Manager is a tool for managing the distribution of Swift code. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.
Using Xcode 11.0+ go to your project file and enter the project URL of this repository:
https://github.com/huri000/QuickLayout
Add the source files to your project.
Using QuickLayout is easy. No setup or preparation is required.
All the necessary methods are already available in any of the QLView
instances, and are fully documented and highly descriptive.
First, some boilerplate code: Define simpleView
of type QLView
and add it to the view hierarchy.
// Create a view, add it to view hierarchy, and customize it
let simpleView = QLView()
simpleView.backgroundColor = .gray
parentView.addSubview(simpleView)
Set a constant edge of a view:
simpleView.set(.height, of: 50)
You can set multiple constant edges using variadic parameters:
simpleView.set(.width, .height, of: 100)
You can easily layout a view directly to its superview as long as it has one.
Layout the top of a view to the top of its superview:
simpleView.layoutToSuperview(.top)
Layout the centerX of a view to the centerX of its superview:
simpleView.layoutToSuperview(.centerX)
You can also layout multiple edges likewise, using variadic parameters:
simpleView.layoutToSuperview(.top, .bottom, .centerX, .width)
All the layout methods return the applied constraints, but the returned values are discardable so you can simply ignore them if you don't need them.
let topConstraint = simpleView.layoutToSuperview(.top)
// Change the offset value by adding 10pts to it
topConstraint.constant += 10
You can layout a view to 80% its superview width:
simpleView.layoutToSuperview(.width, ratio: 0.8)
You can layout a view to it's superview width minus 10pts offset:
simpleView.layoutToSuperview(.width, offset: -10)
Layout view to the center of superview:
let center = simpleView.centerInSuperview()
You can optionally retreive the returned QLCenterConstraints
instance.
center?.y.constant = 20
That is the equivalent of doing the following, without getting the QLCenterConstraints
instance (but an array of NSLayoutConstraint
instead).
simpleView.layoutToSuperview(.centerX, .centerY)
Size to superview with optional ratio - It means that simpleView
is 80% its superview size.
let size = simpleView.sizeToSuperview(withRatio: 0.8)
You can optionally retreive the returned QLSizeConstraints
instance.
size?.width.constant = -20
That is the equivalent of doing the following, without getting the QLSizeConstraints
instance (but an array of NSLayoutConstraint
instead).
simpleView.layoutToSuperview(.width, .height, ratio: 0.8)
let fillConstraints = simpleView.fillSuperview()
You can optionally retreive the returned QLFillConstraints
instance.
fillConstraints?.center.y.constant = 5
You can layout view to a certain axis, for example:
Horizontally:
let axis = simpleView.layoutToSuperview(axis: .horizontally)
Vertically:
simpleView.layoutToSuperview(axis: .vertically)
That is equivalent to (Horizontally):
simpleView.layoutToSuperview(.left, .right)
Or (Vertically):
simpleView.layoutToSuperview(.top, .bottom)
You can reteive the QLAxisConstraints
instance as well and use it.
It is possible to layout one view to another inside the view hierarchy.
You can layout an edge of a view to another. For example:
Layout simpleView
's left
edge to the right
edge of anotherView
, with 20pts right offset
.
simpleView.layout(.left, to: .right, of: anotherView, offset: 20)
Layout simpleView
's top
edge to the top
edge of anotherView
simpleView.layout(to: .top, of: anotherView)
Layout simpleView
's left, right and centerY to anotherView
's left, right and centerY, respectively.
simpleView.layout(.left, .right, .centerY, to: anotherView)
Content Hugging Oriority and Content Compression Resistance can be also mutated in code
Vertical example:
let label = UILabel()
label.text = "Hi There!"
label.verticalCompressionResistancePriority = .required
label.verticalHuggingPriority = .required
You can set the compression resistence and the hugging priority, together. Thus, forcing both to be .required
vertically and horizontally.
label.forceContentWrap()
You can force content wrap a specific axis:
label.forceContentWrap(.vertically)
You can generate an array of views and apply constraints on them all in one shot.
// Create array of views and customize it
var viewsArray: [QLView] = []
for _ in 0...4 {
let simpleView = QLView()
view.addSubview(simpleView)
viewsArray.append(simpleView)
}
Each element gets height of 50pts, using this single line of code.
viewsArray.set(.height, of: 50)
Each element cling to left and right of its superview.
viewsArray.layoutToSuperview(axis: .horizontally, offset: 30)
Each element left, right, top, bottom edges is exactly fits another view.
viewsArray.layout(.left, .right, .top, .bottom, to: parentView)
You can spread the elements one below the other (vertically), the first stretches to the top of the superview and the last stretchs to the bottom of the superview. There is an offset of 1pt between each element.
viewsArray.spread(.vertically, stretchEdgesToSuperview: true, offset: 1)
Every layout method has several optional parameters - see below:
- The priority of the applied constraint.
- Included by all the layout methods.
- Default value:
.required
.
Other than the default system priorities, QuickLayout offers one more - it has 999 value and it's called .must
.
You can tweak the priorities as you like in order to deal with breakage and redundancies.
Example for setting the constraints priority:
let width = simpleView.set(.width, of: 100, priority: .must)
- The relation of a view to another view.
- Included by most of the layout methods.
- Default value:
.equal
- The ratio of a view to another view.
- Included by most of the layout methods.
- Default value: 1
- The offset of a view to another view.
- Included by most of the layout methods.
- Default value: 0
You can layout a view/s explicitly to a superview or another view when you need to. Most paramters have a default value.
simpleView.layout(.height, to: .width, of: anotherView, relation: .lessThanOrEqual, ratio: 0.5, offset: 10, priority: .defaultHigh)
Forks, patches and other feedback are welcome.
Daniel Huri (huri000@gmail.com)
QuickLayout is available under the MIT license. See the LICENSE file for more info.