LazyKit is a framework that allow you to write fast and easy views.
Constructing a view can be long, boring and repetitive, especialy after the n view built.
You can now use basic CSS files to style your elements.
- Maps UIView / UILabel / UIButton / UIImageView / UITextField / UITextView / UITableView / UICollectionView
- Base classes for UIViewController / UIView / UITableViewCell / UICollectionViewCell
- CSS parser / mapper (You'll be even more lazy with that)
- Swap CSS themes at runtime
- Support for borders/radius in css
- Supoort for text decorations in css
- iOS 8.0+
- Xcode 7.2+
Embedded frameworks require a minimum deployment target of iOS 8.
CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:
$ gem install cocoapods
CocoaPods 0.39.0+ is required to build LazyKit 1.1.4+.
To integrate LazyKit into your Xcode project using CocoaPods, specify it in your Podfile
:
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!
pod 'LazyKit', '~> 1.1.4'
Then, run the following command:
$ pod install
- Open up Terminal,
cd
into your top-level project directory, and run the following command "if" your project is not initialized as a git repository:
$ git init
- Add LazyKit as a git submodule by running the following command:
$ git submodule add https://github.com/kmalkic/LazyKit.git
-
Open the new
LazyKit
folder, and drag theLazyKit.xcodeproj
into the Project Navigator of your application's Xcode project.It should appear nested underneath your application's blue project icon. Whether it is above or below all the other Xcode groups does not matter.
-
Select the
LazyKit.xcodeproj
in the Project Navigator and verify the deployment target matches that of your application target. -
Next, select your application project in the Project Navigator (blue project icon) to navigate to the target configuration window and select the application target under the "Targets" heading in the sidebar.
-
In the tab bar at the top of that window, open the "General" panel.
-
Click on the
+
button under the "Embedded Binaries" section. -
You will see two different
LazyKit.xcodeproj
folders each with two different versions of theLazyKit.framework
nested inside aProducts
folder.It does not matter which
Products
folder you choose from, but it does matter whether you choose the top or bottomLazyKit.framework
. -
And that's it!
The
LazyKit.framework
is automagically added as a target dependency, linked framework and embedded framework in a copy files build phase which is all you need to build on the simulator and a device.
Can be a struct or a class. Let just add a label.
import LazyKit
struct MyConfigurations: LazyViewConfigurations {
static func elementsOptions() -> [ElementOptions]? {
return [
LabelOptions(identifier: "title",
classType: CustomLabel.self,
viewBaseOptions: ViewBaseOptions(backgroundColor: .blueColor()),
textOptions: TextBaseOptions(text: "hello", font: .systemFontOfSize(20), textAlignment: .Center)),
]
}
//Will need some knowledges in visual format constraints
static func visualFormatConstraintOptions() -> [VisualFormatConstraintOptions]? {
return [
VisualFormatConstraintOptions(string: "H:|-[title]-|"),
VisualFormatConstraintOptions(string: "V:|-top-[title(==titleHeight)]")
]
}
static func visualFormatMetrics() -> [String: AnyObject]? {
return ["top" : 30, "titleHeight" : 44]
}
//Can use this function to return the conventional way of using constraints
static func layoutConstraints() -> [ConstraintOptions]? {
return nil
}
}
That is all you need.
import LazyKit
class MyViewController: LazyBaseViewController <MyConfigurations> {
}
That is all you need. Don't mix LazyBaseViewController and having a view of type LazyBaseView in same time. First make no sense and second you'll end up with duplicate views.
import LazyKit
class MyViewController: UIViewController {
override func loadView() {
view = MyView()
}
}
class MyView: LazyBaseView <MyConfigurations> {
}
import LazyKit
struct MyConfigurations: LazyViewConfigurations {
static func elementsOptions() -> [ElementOptions]? {
return [
LabelOptions(identifier: "title",
classType: CustomLabel.self,
viewBaseOptions: ViewBaseOptions(backgroundColor: .blueColor()),
textOptions: TextBaseOptions(text: "hello", font: .systemFontOfSize(20), textAlignment: .Center)
),
LabelOptions(identifier: "subtitle",
viewBaseOptions: ViewBaseOptions(backgroundColor: .greenColor()),
textOptions: TextBaseOptions(text: "hey", textAlignment: .Center)
),
ButtonOptions(identifier: "button",
viewBaseOptions: ViewBaseOptions(backgroundColor: .redColor()),
textOptionsForType: [.Normal: TextBaseOptions(text: "button"), .Highlighted: TextBaseOptions(text: "highlighted")]
),
ViewOptions(identifier: "line",
viewBaseOptions: ViewBaseOptions(backgroundColor: .lightGrayColor())
),
ImageOptions(identifier: "photo",
viewBaseOptions: ViewBaseOptions(backgroundColor: .lightGrayColor()),
imageBaseOptions: ImageBaseOptions(imageNamed: "image", contentMode: .ScaleAspectFill)
),
TextFieldOptions(identifier: "textfield",
viewBaseOptions: ViewBaseOptions(backgroundColor: UIColor.orangeColor()),
textOptions: TextBaseOptions(font: .systemFontOfSize(16), textAlignment: .Center),
placeholderOptions: TextBaseOptions(text: "placeholder", font: .systemFontOfSize(16), textColor: .redColor(), textAlignment: .Center),
textInputOptions: TextInputBaseOptions(autocapitalizationType: .Sentences, autocorrectionType: .No, spellCheckingType: .No, keyboardType: .NumbersAndPunctuation, keyboardAppearance: .Dark, returnKeyType: .Done, enablesReturnKeyAutomatically: true, secureTextEntry: false)
),
TextViewOptions(identifier: "textview",
viewBaseOptions: ViewBaseOptions(backgroundColor: UIColor.cyanColor()),
textOptions: TextBaseOptions(text: "TextView", font: .systemFontOfSize(14), textAlignment: .Left),
textInputOptions: TextInputBaseOptions(autocapitalizationType: .Sentences, autocorrectionType: .No, spellCheckingType: .No, keyboardType: .EmailAddress, keyboardAppearance: .Dark, returnKeyType: .Done, enablesReturnKeyAutomatically: true, secureTextEntry: false)
)
]
}
static func visualFormatConstraintOptions() -> [VisualFormatConstraintOptions]? {
return [
VisualFormatConstraintOptions(string: "H:|-[photo(==photoW)]-[title]-|"),
VisualFormatConstraintOptions(string: "H:[subtitle(==title)]"),
VisualFormatConstraintOptions(string: "H:[textfield(==title)]"),
VisualFormatConstraintOptions(string: "H:|-40-[line]-40-|"),
VisualFormatConstraintOptions(string: "H:|-[textview]-|"),
VisualFormatConstraintOptions(string: "H:|-buttonLeft-[button]-buttonRight-|"),
VisualFormatConstraintOptions(string: "V:|-top-[title]-[subtitle]-[textfield]", options: .AlignAllLeft),
VisualFormatConstraintOptions(string: "V:|-top-[photo(==photoH)]"),
VisualFormatConstraintOptions(string: "V:[line(==1)]-[textview(==200)]-200-[button(==buttonH)]-8-|")
]
}
static func visualFormatMetrics() -> [String: AnyObject]? {
return ["top" : 30, "buttonH" : 44, "buttonLeft" : 100, "buttonRight" : 100, "photoW" : 100, "photoH" : 60]
}
static func layoutConstraints() -> [ConstraintOptions]? {
return [
ConstraintOptions(identifier: "titleHeight", itemIdentifier: "title", attribute: .Height, relatedBy: .Equal, toItemIdentifier: nil, attribute: .Height, multiplier: 1, constant: 40)
]
}
}
Here the result with no extra work to do :), but ugly colors.
The styling is declared using a CSS-like syntax that also supports variables:
@global_bold_font_name: RobotoSlab-Bold;
@global_regular_font_name: RobotoSlab-Regular;
@titleColor: #ff0000;
@tintColor: #3e8fdb;
@bodyColor: #333333;
body {
color: @bodyColor;
font-family: @global_bold_font_name;
placeholder-font-family: @global_bold_font_name;
}
#title {
color: @titleColor;
font-size: 14px;
text-align:left;
text-maxline: 2;
}
.subtitle {
font-size: 12px;
text-align:left;
text-indent: 5px;
text-decoration: underline;
text-decoration-color: rgba(0,0,0,1);
}
#photo {
background-image-content: scaleToFill;
}
.photo {
background-image: myimage;
}
Here the list of available attributes:
******************************************************************
GENERAL KEYS:
'background'
'background-color'
'tint-color'
'bartint-color'
Usage: #RBG | #ARGB | #RRGGBB | #AARRGGBB | rgb(red(0-255),green(0-255),blue(0-255)) | rgba(red(0-255),green(0-255),blue(0-255),alpha(0.0-1.0))
'background-image'
Usage: image name, without ""
'background-image-content'
Usage: scaleToFit | scaleToFill | center | top | left | bottom | right
TEXT KEYS:
'color'
Usage: #RBG | #ARGB | #RRGGBB | #AARRGGBB | rgb(red(0-255),green(0-255),blue(0-255)) | rgba(red(0-255),green(0-255),blue(0-255),alpha(0.0-1.0))
'font-family'
Usage: font name, without ""
'font-size'
Usage: size in px
'text-align'
Usage: left | center | right | justify
'text-maxline'
Usage: number of lines max (integer)
'line-height'
Usage: height in px
'paragraph-spacing'
Usage: spacing in px
'text-indent'
Usage: header in px. Used to indent first line of any new paragraph.
'word-wrap'
Usage: word-wrapping | char-wrapping | clipping | truncating-head | truncating-tail | truncating-middle
'text-stroke-color'
Usage: #RBG | #ARGB | #RRGGBB | #AARRGGBB | rgb(red(0-255),green(0-255),blue(0-255)) | rgba(red(0-255),green(0-255),blue(0-255),alpha(0.0-1.0))
'text-stroke-width'
Usage: width in px
'text-decoration'
Usage: none|underline|line-through
'text-decoration-color'
Usage: #RBG | #ARGB | #RRGGBB | #AARRGGBB | rgb(red(0-255),green(0-255),blue(0-255)) | rgba(red(0-255),green(0-255),blue(0-255),alpha(0.0-1.0))
For placeholder styling
'placeholder-'
Usage: You can add 'placeholder-' to any of the above text keys
DECORATIONS KEYS:
'border'
Patterns:
- width color
'border-color'
Usage: #RBG | #ARGB | #RRGGBB | #AARRGGBB | rgb(red(0-255),green(0-255),blue(0-255)) | rgba(red(0-255),green(0-255),blue(0-255),alpha(0.0-1.0))
'border-width'
Patterns:
- width
'border-radius'
Usage: radius in px
******************************************************************
For more flexibility It is possible to nest id and classes together such as:
Very similar to what you do in html, but limited to those.
#title.commonText {} //will apply this style to any element that as styleClass = "commonText" and styleId = "title"
#title.commonText.link {} //will apply this style to any element that as styleClass = "commonText link" and styleId = "title"
.commonText.link {} //will apply this style to any element that as styleClass = "commonText link"
UILabel.commonText.link {} //will apply this style to all UILabel that as styleClass = "commonText link"
UITextField {} //will apply this style to all UITextField
If you prefer seperating css files, you can add it to the array.
You will notice that it is urls, so you can use http. :)
//Load style from bundle
let defaultUrls = [
NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource("default.css", ofType: nil)!)
]
LazyStyleSheetManager.shared.setDefaultStylesFromFileAtUrls(defaultUrls)
Can load a different set of css files for a given collection name
let defaultUrls = [
NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource("default.css", ofType: nil)!)
]
LazyStyleSheetManager.shared.setDefaultStylesFromFileAtUrls(defaultUrls)
let alternativeUrls = [
NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource("alt.css", ofType: nil)!)
]
LazyStyleSheetManager.shared.setStylesFromFileAtUrls(alternativeUrls, collectionName: kAlternativeCollectionName)
Whenever you need you can swap by changing currentCollecionName to your other styles. This will trigger a notification under kUpdateStylesNotificationKey. It is automatic so no need to addObserver to it, unless for other purposes.
LazyStyleSheetManager.shared.currentCollectionName = kAlternativeCollectionName
To print out css attributes and options.
LazyStyleSheetManager.shared.help()
Pretty much the same way as above, but simplier.
import LazyKit
struct MyConfigurations: LazyViewConfigurations {
static func elementsOptions() -> [ElementOptions]? {
return [
LabelOptions(identifier: "title",
text: "hello",
styleId: "title"),
LabelOptions(identifier: "subtitle",
text: "hey",
styleId: "subtitle"),
ButtonOptions(identifier: "button",
texts: [.Normal: "button", .Highlighted: "highlighted"],
styleId: "button"),
ViewOptions(identifier: "line",
viewBaseOptions: ViewBaseOptions(backgroundColor: .lightGrayColor())),
ImageOptions(identifier: "photo",
styleId: "photo",
styleClass: "photo"),
TextFieldOptions(identifier: "textfield",
placeholderText: "placeholder",
styleId: "textfield",
textInputOptions: TextInputBaseOptions(autocapitalizationType: .Sentences, autocorrectionType: .No, spellCheckingType: .No, keyboardType: .NumbersAndPunctuation, keyboardAppearance: .Dark, returnKeyType: .Done)),
TextViewOptions(identifier: "textview",
styleId: "textview",
textInputOptions: TextInputBaseOptions(autocapitalizationType: .Sentences, autocorrectionType: .No, spellCheckingType: .No, keyboardType: .EmailAddress, keyboardAppearance: .Dark, returnKeyType: .Done)
)
]
}
static func visualFormatConstraintOptions() -> [VisualFormatConstraintOptions]? {
return [
VisualFormatConstraintOptions(string: "H:|-[photo(==photoW)]-[title]-|"),
VisualFormatConstraintOptions(string: "H:[subtitle(==title)]"),
VisualFormatConstraintOptions(string: "H:[textfield(==title)]"),
VisualFormatConstraintOptions(string: "H:|-40-[line]-40-|"),
VisualFormatConstraintOptions(string: "H:|-[textview]-|"),
VisualFormatConstraintOptions(string: "H:|-buttonLeft-[button]-buttonRight-|"),
VisualFormatConstraintOptions(string: "V:|-top-[title]-[subtitle]-[textfield]", options: .AlignAllLeft),
VisualFormatConstraintOptions(string: "V:|-top-[photo(==photoH)]"),
VisualFormatConstraintOptions(string: "V:[line(==1)]-[textview(==200)]-200-[button(==buttonH)]-8-|")
]
}
static func visualFormatMetrics() -> [String: AnyObject]? {
return ["top" : 30, "buttonH" : 44, "buttonLeft" : 100, "buttonRight" : 100, "photoW" : 100, "photoH" : 60]
}
static func layoutConstraints() -> [ConstraintOptions]? {
return [
ConstraintOptions(identifier: "titleHeight", itemIdentifier: "title", attribute: .Height, relatedBy: .Equal, toItemIdentifier: nil, attribute: .Height, multiplier: 1, constant: 40)
]
}
}
Various way of doing it
viewManager.updateElement("title", elementOptions: LabelOptions(textOptions: TextBaseOptions(text: "Bonjour")))
viewManager.updateElement("title", type: UILabel.self) { (element) -> Void in
element.text = "Bonjour"
}
if let title: UILabel = viewManager.element("title") {
title.text = "Bonjour"
}
if let title = viewManager.label("title") {
title.text = "Bonjour"
}
viewManager.label("title")!.text = "Bonjour"
You can update the element with any of the base options.
Note that the new option will replace only the non nil attributes.
viewManager.updateElement("title", elementOptions: LabelOptions(textOptions: TextBaseOptions(text: "Bonjour")))
viewManager.updateElement("button", elementOptions: ButtonOptions(textOptionsForType: [.Normal: TextBaseOptions(text: "Done"), .Highlighted: TextBaseOptions(text: "Highlighted")]))
For this particular change, it is recommended to not use Visual format constraints because it does create an array of NSLayoutConstraints. Best is to create a constraint using this function:
static func layoutConstraints() -> [ConstraintOptions]? {
return [
ConstraintOptions(identifier: "titleHeight", itemIdentifier: "title", attribute: .Height, relatedBy: .Equal, toItemIdentifier: nil, attribute: .Height, multiplier: 1, constant: 40)
]
Now you will be able to target the specific constraint you want to change.
//This will make your title height to change from 40 to 120. Usefull if you want to expand/collapse an element.
viewManager.changeConstantOfLayoutConstaint("titleHeight", constant: 120)
Kevin Malkic
LazyKit is released under the MIT license. See LICENSE for details.