A super fast and easy-to-use layout library for iOS. FrameLayoutKit supports complex layouts, including chaining and nesting layout with simple and intuitive operand syntax.
It simplifies the UI creation process, resulting in cleaner and more maintainable code.
Say NO to autolayout constraint nightmare:
| Autolayout | FrameLayoutKit |
|
|
FrameLayoutKit is available through Swift Package Manager (Recommended) and CocoaPods:
Regardless, make sure to import the project wherever you may use it:
import FrameLayoutKitFrameLayoutKit can be installed as a CocoaPod. To install, include this in your Podfile.
pod "FrameLayoutKit"Swift Package Manager is recommended to install FrameLayoutKit.
- Click
File Add Packages...- Specify the git URL for FrameLayoutKit.
https://github.com/kennic/FrameLayoutKit.gitSome examples of how FrameLayoutKit works:
| Source | Result |
let frameLayout = HStackLayout()
frameLayout + VStackLayout {
($0 + earthImageView).alignment = (.top, .center)
($0 + 0).flexible() // add a flexible space
($0 + rocketImageView).alignment = (.center, .center)
}
frameLayout + VStackLayout {
$0 + [nameLabel, dateLabel] // add an array of views
$0 + 10 // add a space with a minimum of 10 pixels
$0 + messageLabel // add a single view
}.spacing(5.0)
frameLayout
.spacing(15)
.padding(top: 15, left: 15, bottom: 15, right: 15)
.debug(true) // show dashed lines to visualize the layout |
|
| Source | Result |
let frameLayout = VStackLayout {
($0 + imageView).flexible()
$0 + VStackLayout {
$0 + titleLabel
$0 + ratingLabel
}
}.padding(top: 12, left: 12, bottom: 12, right: 12)
.distribution(.bottom)
.spacing(5) |
|
| Source | Result |
let posterSize = CGSize(width: 100, height: 150)
let frameLayout = ZStackLayout()
frameLayout + backdropImageView
frameLayout + VStackLayout {
$0 + HStackLayout {
($0 + posterImageView).fixedSize(posterSize)
$0 + VStackLayout {
$0 + titleLabel
$0 + subtitleLabel
}.padding(bottom: 5).flexible().distribution(.bottom)
}.spacing(12).padding(top: 0, left: 12, bottom: 12, right: 12)
}.distribution(.bottom) |
|
| Source | Result |
let buttonSize = CGSize(width: 45, height: 45)
let cardView = VStackLayout()
.spacing(10)
.padding(top: 24, left: 24, bottom: 24, right: 24)
cardView + titleLabel
(cardView + emailField).minHeight = 50
(cardView + passwordField).minHeight = 50
(cardView + nextButton).fixedHeight = 45
(cardView + separateLine)
.fixedContentHeight(1)
.padding(top: 4, left: 0, bottom: 4, right: 40)
cardView + HStackLayout {
($0 + [facebookButton, googleButton, appleButton])
.forEach { $0.fixedContentSize(buttonSize) }
}.distribution(.center).spacing(10) |
|
Two types of code syntax:
| Regular syntax | Chained syntax |
frameLayout.distribution = .center
frameLayout.spacing = 16
frameLayout.isFlexible = true |
frameLayout
.distribution(.center)
.spacing(16)
.flexible() |
FrameLayoutKit is one of the fastest layout libraries.
See: Layout libraries benchmark's project
- Swift Package Manager
- CocoaPods support
- Objective-C version (Deprecated - Not recommended)
- Swift version
- Examples
- Documents
Nam Kennic, namkennic@me.com
FrameLayoutKit is available under the MIT license. See the LICENSE file for more info.