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
KVConstraintKit
into 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 install
and open the open the{Project}.xcworkspace
instead of the{Project}.xcodeproj
file 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 update
and follow the additional steps in order to addKVConstraintKit
to 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