An Impressive Auto Layout DSL for iOS, tvOS & OSX written in swift
KVConstraintKit
KVConstraintKit is a DSL to make easy & impressive Auto Layout constraints on iOS, tvOS & OSX with Swift
Installation
Using CocoaPods
- To integrate
KVConstraintKitinto your Xcode project using CocoaPods, specify it to a target in your Podfile:
use_frameworks!
pod 'KVConstraintKit', '~> 2.1'
If you want to be on the bleeding edge, replace the last line with:
pod 'KVConstraintKit', :git => 'https://github.com/keshavvishwkarma/KVConstraintKit.git', :branch => 'master'
- Run
pod installand open the open the{Project}.xcworkspaceinstead of the{Project}.xcodeprojfile to launch Xcode.
Using Carthage
- To integrate KVConstraintKit into your Xcode project using Carthage, specify it in your Cartfile:
github "keshavvishwkarma/KVConstraintKit" ~> 2.1
- Run
carthage updateand follow the additional steps in order to addKVConstraintKitto your project.
Auto Layout Attributes
KVConstraintKit supports all built-in layout attributes as of iOS, tvOS & OSX, see the NSLayoutAttribute enum.
Usage
Here's a quick example:
Without Using KVConstraintKit
let v = UIView.prepareAutoLayoutView()
v.backgroundColor = UIColor.red
view.addSubview(v)
// Prepare constraints and then add them on superview of view
let top = NSLayoutConstraint( item: v, attribute: .top,
relatedBy: .equal,
toItem: v.superview!, attribute: .top,
multiplier: 1.0, constant: 0)
let leading = NSLayoutConstraint( item: v, attribute: .leading,
relatedBy: .equal,
toItem: v.superview!, attribute: .leading,
multiplier: 1.0, constant: 0)
let trailing = NSLayoutConstraint( item: v, attribute: .trailing,
relatedBy: .equal,
toItem: v.superview!, attribute: .trailing,
multiplier: 1.0, constant: 0)
let bottom = NSLayoutConstraint( item: v, attribute: .bottom,
relatedBy: .equal,
toItem: v.superview!, attribute: .bottom,
multiplier: 1.0, constant: 0)
v.superview?.addConstraints([top, leading, trailing, bottom])
Using KVConstraintKit
v +== [.top, .leading, .trailing, .bottom]
Similarly for margin constraints
v +== [ .leadingMargin, .trailingMargin, .topMargin, .bottomMargin]
Fit
Horizontally
view.fitHorizontallyToSuperview()
OR
view.fitHorizontallyToSuperview(20) // padding
Vertically
view.fitVerticallyToSuperview()
OR
view.fitVerticallyToSuperview(20) // padding
Horizontally & Vertically
view.fitToSuperview()
OR
view.fitToSuperview(20) // width same padding for all edge
Fit with inset
let inset = UIEdgeInsets(top: 4, left: 8, bottom: 12, right: 16)
view.fitToSuperview(contentInset:inset)
Center
Horizontally
view.applyCenterX()
OR
view.applyCenterX(20) // X offset
Vertically
view.applyCenterY()
OR
view.applyCenterY(20) // Y offset
Horizontally & Vertically
view.applyCenter()
OR
view.applyCenter(CGPoint(x:20, y:20)) // XY offset
OR
view.applyCenterX(4).applyCenterY(16) // XY offset
Size
Width
view.applyWidth(100)
OR
view.applyAtLeastWidth(100)
OR
view.applyAtMostWidth(100)
Height
view.applyHeight(100)
OR
view.applyAtLeastHeight(100)
OR
view.applyAtMostHeight(100)
Aspact Ratio
view.applyAspectRatio()
Quick Reference
| Layout Attributes | Using Operator | Using Method |
|---|---|---|
Leading |
(subview +== .leading).constant = 20 |
subview.applyLeading(20) |
Trailing |
(subview +== .trailing).constant = 20 |
subview.applyTrailing(20) |
Top |
(subview +== .top).constant = 20 |
subview.applyTop(20) |
Bottom |
(subview +== .bottom).constant = 20 |
subview.applyBottom(20) |
CenterX |
subview +== .centerX |
subview.applyCenterX() |
CenterY |
subview +== .centerY |
subview.applyCenterY() |
Height |
subview +== (.height, 100) |
subview.applyHeight(100) |
Width |
subview +== (.width, 100) |
subview.applyWidth(100) |
CenterX & CenterY |
subview +== [.centerX, .centerY] |
subview.applyCenter() |
For more details see the ApplyViewConstraint extension and LayoutRelationable Protocol of KVConstraintKit.
Note: Avoid using Left and Right attributes. Use Leading and Trailing instead. This allows the layout to adapt to the view’s reading direction. By default the reading direction is determined based on the current language set by the user.
Custom Operators
The following types of operators are provided by KVConstraintKit, to add, remove, access and modify constraints.
| Operator | Meaning |
|---|---|
| + | to add constraint |
| - | to remove constraint |
| * | to modify multiplier of constraint |
| ~ | to modify Priority ( UILayoutPriority ), Relation ( NSLayoutRelation ) & Replace constraint |
| <- | to access constraint by attributes ( eg. NSLayoutAttribute.Height ) |
| +== | to add equal relation ( NSLayoutRelation.Equal ) constraint |
| +>= | to add greater than or equal relation ( NSLayoutRelation.GreaterThanOrEqual ) constraint |
| +<= | to add less than or equal relation ( NSLayoutRelation.LessThanOrEqual ) constraint |
| *== | to add equal relation constraint with multiplier |
| *>= | to add greater than or equal relation constraint with multiplier |
| *<= | to add less than or equal relation constraint with multiplier |
| |==| | to add or equal relation constraint between sibling views |
| |>=| | to add greater than or equal relation constraint between sibling views |
| |<=| | to add less than or equal relation constraint between sibling views |
License
KVConstraintKit is available under the MIT license. See the LICENSE file for more info.
Contributions
Any contribution is more than welcome! You can contribute through pull requests and issues on GitHub.
Author
If you wish to contact me, email at: keshavvbe@gmail.com