LeeGo is a lightweight Swift framework that helps you decouple & modularise your UI component into small pieces of LEGO style's bricks, to make UI development declarative, configurable and highly reusable.
We all know that MVC pattern has some serious problems when dealing with a complex iOS project. Fortunately there are also a bunch of approaches that aim to fix the problems, most of them mainly address the Controller part, such as MVP, MVVM, MVSM or VIPER. But there is barely a thing which addresses the View part. Does that mean we just run out of all the problems in the View part ? I think the answer is NO, especially when we need our app to be fully responsive.
I’ve talked this idea on a dotSwift’s talk, and also on my blog posts:
Please checkout through for more details.
LeeGo, replaces the View part of MVC by Brick.
What may LeeGo helps you:
- Describe your whole UI in small pieces of Lego style’s bricks. Let you configure your view as a
brickwhenever & wherever you want. - No longer need to deal with a bunch of custom UIView’s subclasses. Instead, you only need to deal with different
Bricks which is lightweight and pure value type. - Designed to be UIKit friendly and non-intrusive. There is no need to inherit from other base class at all.
- Capable to update remotely almost everything via your JSON payload.
- Built-in convenience methods to make UIStackView like layout hassle-free.
- Built-in self-sizing mechanism to calculate cell’s height automatically.
- Method chaining syntax sugar.
- Benefits from Swift’s enum, let you put the whole UI in a single enum file.
Compare with Facebook ComponentKit
Both:
- Brings declarative, configurable & reusable UI development for iOS.
Pros:
- Written in Swift, built for Swift. No more Obj-C++ stuff.
- Lightweight and UIKit friendly. No inheritance, dealing with standard UIView and Auto Layout directly.
- Totally smooth to begin with integrating only a small part, also free to drop all without any side effect.
- Possible to update any part of UI which powered by LeeGo remotely via JSON payload.
- Powered by standard auto layout which you probably familiar with already.
Cons:
- Lack of high level features for the moment. Such as support of built-in configurable view controller, view animation, auto layout animation or UIControl component’s action.
- Powered by standard auto layout which may have some potential performance issues in some circumstances.
- Still requires the basic knowledge of standard auto layout and Visual Format Language.
- Full Documentation
- Native UI powered by server side
- Configurable appearance
- Built-in convenience methods for layout
- Dynamic cell height
Create a Brick instance which named "title" as UILabel, with default text "Showcase" and gray background color
import LeeGo
let titleBrick: Brick = "title".build(UILabel).style([.text("Showcase"), .backgroundColor(.lightGrayColor())])Configure an UILabel instance just as title brick
let titleLabel = UILabel()
titleLabel.lg_configureAs(titleBrick)
let titleBrick = "title".build(UILabel).style([.numberOfLines(0), .text("title")])
let subtitleBrick = "subtitle".build(UILabel).style([.textColor(.lightGrayColor()), .numberOfLines(0), .font(.systemFontOfSize(14)), .text("subtitle")])
let imageBrick = "image".build(UIImageView).style([.ratio(1.5), .backgroundColor(.blueColor())]).width(68)
/// Create a brick stand for `UIView` which contains a `title`,
/// a `subtitle` and an `image` inside, layout them with
/// standard auto layout VFL.
let brickName = "cell"
let cellBrick = brickName.build().bricks(titleBrick, subtitleBrick, imageBrick) {
title, subtitle, image in
return Layout([
"H:|-left-[\(image)]-spaceH-[\(title)]-right-|",
"H:[\(image)]-spaceH-[\(subtitle)]-right-|",
"V:|-top-[\(title)]-spaceV-[\(subtitle)]-(>=bottom)-|",
"V:|-top-[\(image)]-(>=bottom)-|"], metrics: LayoutMetrics(20, 20, 20, 20, 10, 10))
}Dequeue a standard UICollectionViewCell instance, then configure it as cell brick with element as data source
let cell = collectionView.dequeueCell…
cell.lg_configureAs(cellBrick, dataSource: element[indexPath.item])
Create a brick stand for UIView which contains the 3 bricks (red, green & blue block), then lay them out with the UIStackView inspired layout helper method.
let bricks = ["red".build().style(Style.redBlockStyle).height(50),
"green".build().style(Style.greenBlockStyle).height(80),
"blue".build().style(Style.blueBlockStyle).height(30)]
let layout = Layout(bricks: bricks, axis: .Horizontal, align: .Top, distribution: .FillEqually, metrics: LayoutMetrics(10, 10, 10, 10, 10, 10))
let viewBrick = "view".build().style(Style.blocksStyle).bricks(bricks, layout: layout).height(100)Configure a UIView instance just as the brick
view.lg_configureAs(viewBrick)
let viewBrick = Brick.union("brickName", bricks: [
title,
subtitle,
Brick.union("blocks", bricks: [
redBlock.height(50),
greenBlock.height(80),
blueBlock.height(30)], axis: .Horizontal, align: .Top, distribution: .FillEqually, metrics: LayoutMetrics(10, 10, 10, 10, 10, 10)).style([.backgroundColor(.yellowColor())])
], axis: .Vertical, align: .Fill, distribution: .Flow(3), metrics: LayoutMetrics(20, 20, 20, 20, 10, 10))
Configure a UIView instance just as the brick
view.lg_configureAs(viewBrick)
import LeeGo
enum TwitterBrickSet: BrickBuilderType {
// leaf bricks
case username, account, avatar, tweetText, tweetImage, date, replyButton, retweetButton, retweetCount, likeButton, likeCount
// complex bricks
case retweetView, likeView
case accountHeader, toolbarFooter, retweetHeader
// root bricks
case standardTweet
static let brickClass: [Twitter: AnyClass] = [username: UILabel.self, account: UILabel.self, avatar: UIImageView.self, tweetText: UITextView.self]
func brick() -> Brick {
switch self {
case .username:
return build().style([.font(.boldSystemFontOfSize(14))])
case .account:
return build().style([.font(.systemFontOfSize(14))])
case .avatar:
return build().style([.ratio(1), .backgroundColor(.lightGrayColor()), .cornerRadius(3)]).width(50)
case .tweetText:
return build().style([.scrollEnabled(false)])
…
case .standardTweet:
return build().style([.backgroundColor(.whiteColor())])
.bricks(
avatar.brick(),
accountHeader.brick(),
tweetText.brick(),
tweetImage.brick(),
toolbarFooter.brick()
) { (avatar, accountHeader, tweetText, image, toolbarFooter) in
Layout(["H:|-10-[\(avatar)]-10-[\(tweetText)]-10-|",
"H:[\(avatar)]-10-[\(accountHeader)]-10-|",
"H:[\(avatar)]-10-[\(image)]-10-|",
"H:[\(avatar)]-10-[\(toolbarFooter)]-10-|",
"V:|-10-[\(avatar)]-(>=10)-|",
"V:|-10-[\(accountHeader)]-10-[\(tweetText)]-10-[\(image)]-10-[\(toolbarFooter)]-(>=10)-|"])
}
}
}
}
/// Configure your cell
let cell = collectionView.dequeueCell…
cell.lg_configureAs(TwitterBrickSet.standardTweet.brick(), dataSource: element[indexPath.item])
For best practices and more design details, please checkout more design details
LeeGo is available through CocoaPods. To install it, simply add the following line to your Podfile:
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!
pod "LeeGo"To integrate LeeGo into your Xcode project using Carthage, specify it in your Cartfile:
github "wangshengjia/LeeGo"
Then, run the following command to build the LeeGo framework:
$ carthage update
At last, you need to set up your Xcode project manually to add the LeeGo framework.
If you like LeeGo and willing to make it better, you are more than welcomed to send pull request for:
- Proposing new features.
- Answering questions on issues.
- Improving documentation.
- Reviewing pull requests.
- Finding, reporting or fixing bugs.
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by [its terms](Docs/Code of Conduct.md).
If you have any thing want to tell me, please ping me on Twitter, on Weibo or just fire the issue.
I'd like to thank every one who helped me, inspired me and encouraged me. Also thank to my team at Le Monde, especially Vincent & Blaise.
Enjoy~ 🎉 🎉 🍻 🍻