Skip to content

M
Material
Commit 6c6dd27b by Daniel Dahan
Options

updated example projects and README

parent 053fa6f6
Showing with 226 additions and 228 deletions
Examples/MaterialKit.xcworkspace/contents.xcworkspacedata
......@@ -65,6 +65,13 @@
</Group>
<Group
location = "container:"
name = "SideNavigationViewController">
<FileRef
location = "group:Programmatic/SideNavigationViewController/SideNavigationViewController.xcodeproj">
</FileRef>
</Group>
<Group
location = "container:"
name = "CardView">
<FileRef
location = "group:Programmatic/CardView/CardView.xcodeproj">
......@@ -84,13 +91,6 @@
location = "group:Programmatic/CaptureView/CaptureView.xcodeproj">
</FileRef>
</Group>
<Group
location = "container:"
name = "SideNavigationViewController">
<FileRef
location = "group:Programmatic/SideNavigationViewController/SideNavigationViewController.xcodeproj">
</FileRef>
</Group>
</Group>
<Group
location = "container:"
......@@ -118,23 +118,23 @@
</Group>
<Group
location = "container:"
name = "CardView">
name = "SideNavigationViewController">
<FileRef
location = "group:Storyboards/CardView/CardView.xcodeproj">
location = "group:Storyboards/SideNavigationViewController/SideNavigationViewController.xcodeproj">
</FileRef>
</Group>
<Group
location = "container:"
name = "ImageCardView">
name = "CardView">
<FileRef
location = "group:Storyboards/ImageCardView/ImageCardView.xcodeproj">
location = "group:Storyboards/CardView/CardView.xcodeproj">
</FileRef>
</Group>
<Group
location = "container:"
name = "SideNavigationViewController">
name = "ImageCardView">
<FileRef
location = "group:Storyboards/SideNavigationViewController/SideNavigationViewController.xcodeproj">
location = "group:Storyboards/ImageCardView/ImageCardView.xcodeproj">
</FileRef>
</Group>
</Group>
......
Examples/Programmatic/CardView/CardView.xcodeproj/project.pbxproj
......@@ -7,6 +7,8 @@
objects = {
/* Begin PBXBuildFile section */
96607DFA1C436523008D47D8 /* MaterialKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 96607DF91C436523008D47D8 /* MaterialKit.framework */; };
96607DFB1C436523008D47D8 /* MaterialKit.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 96607DF91C436523008D47D8 /* MaterialKit.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
967513CA1C136BB7009F455A /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 967513C91C136BB7009F455A /* AppDelegate.swift */; };
967513CC1C136BB7009F455A /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 967513CB1C136BB7009F455A /* ViewController.swift */; };
967513D11C136BB7009F455A /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 967513D01C136BB7009F455A /* Assets.xcassets */; };
......@@ -20,6 +22,7 @@
dstPath = "";
dstSubfolderSpec = 10;
files = (
96607DFB1C436523008D47D8 /* MaterialKit.framework in Embed Frameworks */,
);
name = "Embed Frameworks";
runOnlyForDeploymentPostprocessing = 0;
......@@ -27,6 +30,7 @@
/* End PBXCopyFilesBuildPhase section */
/* Begin PBXFileReference section */
96607DF91C436523008D47D8 /* MaterialKit.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; name = MaterialKit.framework; path = "/Users/danieldahan/Library/Developer/Xcode/DerivedData/MaterialKit-gdulktuccbcfwbdfadtpxkworhyc/Build/Products/Debug-iphoneos/MaterialKit.framework"; sourceTree = "<absolute>"; };
967513C61C136BB7009F455A /* CardView.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = CardView.app; sourceTree = BUILT_PRODUCTS_DIR; };
967513C91C136BB7009F455A /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
967513CB1C136BB7009F455A /* ViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewController.swift; sourceTree = "<group>"; };
......@@ -40,6 +44,7 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
96607DFA1C436523008D47D8 /* MaterialKit.framework in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
......@@ -49,6 +54,7 @@
967513BD1C136BB7009F455A = {
isa = PBXGroup;
children = (
96607DF91C436523008D47D8 /* MaterialKit.framework */,
967513C81C136BB7009F455A /* CardView */,
967513C71C136BB7009F455A /* Products */,
);
......
Examples/Programmatic/MaterialButton/MaterialButton/ViewController.swift
......@@ -28,6 +28,11 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/*
There are 3 button types that may be easily customized -- a FlatButton,
RaisedButton, and FabButton. Below are examples of their usage.
*/
import UIKit
import MaterialKit
......@@ -35,58 +40,44 @@ class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
prepareView()
// Examples of using MaterialButton.
prepareFlatButtonExample()
prepareRaisedButtonExample()
prepareFabButtonExample()
}
/**
:name: prepareView
:description: General preparation statements.
*/
/// General preparation statements.
private func prepareView() {
view.backgroundColor = MaterialColor.white
}
/**
:name: prepareFlatButtonExample
:description: FlatButton example.
*/
/// Prepares the FlatButton.
private func prepareFlatButtonExample() {
let button: FlatButton = FlatButton(frame: CGRectMake(107, 107, 200, 65))
button.setTitle("Flat", forState: .Normal)
button.titleLabel!.font = RobotoFont.mediumWithSize(32)
// Add to UIViewController.
// Add button to UIViewController.
view.addSubview(button)
}
/**
:name: prepareRaisedButtonExample
:description: RaisedButton example.
*/
/// Prepares the RaisedButton.
private func prepareRaisedButtonExample() {
let button: RaisedButton = RaisedButton(frame: CGRectMake(107, 207, 200, 65))
button.setTitle("Raised", forState: .Normal)
button.titleLabel!.font = RobotoFont.mediumWithSize(32)
// Add to UIViewController.
// Add button to UIViewController.
view.addSubview(button)
}
/**
:name: prepareFabButtonExample
:description: FabButton example.
*/
/// Prepares the FabButton.
private func prepareFabButtonExample() {
let img: UIImage? = UIImage(named: "ic_create_white")
let button: FabButton = FabButton(frame: CGRectMake(175, 315, 64, 64))
button.setImage(img, forState: .Normal)
button.setImage(img, forState: .Highlighted)
// Add to UIViewController.
// Add button to UIViewController.
view.addSubview(button)
}
}
......
Examples/Programmatic/MaterialLayer/MaterialLayer/ViewController.swift
......@@ -28,6 +28,12 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/*
MaterialLayer is a lightweight extension of CAShapeLayer that includes
an extended API to create beautiful visual graphics. An animation
interface is available to add awesome animations with ease.
*/
import UIKit
import MaterialKit
......@@ -58,8 +64,11 @@ class ViewController: UIViewController {
materialLayer.shape = .Circle
materialLayer.depth = .Depth2
// Add layer to UIViewController.
// Add materialLayer to UIViewController.
view.layer.addSublayer(materialLayer)
// Add a rotate animation.
materialLayer.animate(MaterialAnimation.rotate(3, duration: 3))
}
}
Examples/Programmatic/MaterialPulseView/MaterialPulseView/ViewController.swift
......@@ -28,6 +28,12 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/*
MaterialPulseView is at the heart of all pulse animations. Any view that subclasses
MaterialPulseView instantly inherits the pulse animation with full customizability.
Below is an example of using MaterialPulseView.
*/
import UIKit
import MaterialKit
......@@ -35,30 +41,23 @@ class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
prepareView()
// Examples of using MaterialPulseView.
prepareGeneralMaterialPulseViewExample()
}
/**
:name: prepareView
:description: General preparation statements.
*/
/// General preparation statements.
private func prepareView() {
view.backgroundColor = MaterialColor.white
}
/**
:name: prepareGeneralMaterialPulseViewExample
:description: General usage example.
*/
/// Prepares the MaterialPulseView example.
private func prepareGeneralMaterialPulseViewExample() {
let pulseView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(132, 132, 150, 150))
pulseView.image = UIImage(named: "ContentAppIcon")
pulseView.shape = .Circle
pulseView.image = UIImage(named: "GraphKitAppIcon")
pulseView.shape = .Square
pulseView.depth = .Depth2
pulseView.cornerRadius = .Radius4
// Add view to UIViewController.
// Add pulseView to UIViewController.
view.addSubview(pulseView)
}
}
......
Examples/Programmatic/MaterialView/MaterialView/ViewController.swift
......@@ -28,6 +28,13 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/*
MaterialView is the base UIView class used throughout MaterialKit. It is designed
to easily take shape, depth, and animations. The major difference is that
MaterialView has all the added features of the UIView class. Below is an example
of setting a MaterialView's cornerRadius, shape, and depth.
*/
import UIKit
import MaterialKit
......@@ -35,23 +42,15 @@ class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
prepareView()
// Examples of using MaterialView.
prepareGeneralMaterialViewExample()
}
/**
:name: prepareView
:description: General preparation statements.
*/
/// General preparation statements.
private func prepareView() {
view.backgroundColor = MaterialColor.white
}
/**
:name: prepareGeneralMaterialViewExample
:description: General usage example.
*/
/// Prepare the MaterialView.
private func prepareGeneralMaterialViewExample() {
let materialView: MaterialView = MaterialView(frame: CGRectMake(132, 132, 150, 150))
materialView.image = UIImage(named: "FocusAppIcon")
......@@ -59,7 +58,7 @@ class ViewController: UIViewController {
materialView.depth = .Depth2
materialView.cornerRadius = .Radius3
// Add view to UIViewController.
// Add materialView to UIViewController.
view.addSubview(materialView)
}
}
......
Examples/Programmatic/NavigationBarView/NavigationBarView/ViewController.swift
......@@ -28,6 +28,12 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/*
A NavigationBarView is a fully featured NavigationBar that supports orientation
changes, background images, title and detail labels, both left and right button
sets, and status bar settings. Below are examples of its usage.
*/
import UIKit
import MaterialKit
......@@ -36,37 +42,34 @@ class ViewController: UIViewController {
super.viewDidLoad()
prepareView()
// Examples of using NavigationBarView.
// Uncomment different examples and read
// the comments below.
/*
Examples of using NavigationBarView.
Uncomment different examples and read
the comments below.
*/
// prepareGeneralUsageExample()
// prepareOrientationSupportExample()
// prepareDetailLabelExample()
// prepareBackgroundImageExample()
prepareButtonExample()
// prepareAlignTitleAndDetailLabelToLeftExample()
// prepareButtonExample()
prepareAlignTitleAndDetailLabelToLeftExample()
}
/**
:name: prepareView
:description: General preparation statements.
*/
/// General preparation statements.
private func prepareView() {
view.backgroundColor = MaterialColor.white
}
/**
:name: prepareGeneralUsageExample
:description: General usage example.
*/
/// Prepares a general usage example.
private func prepareGeneralUsageExample() {
let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.blue.darken1
// To lighten the status bar add the "View controller-based status bar appearance = NO"
// to your info.plist file and set the following property.
/*
To lighten the status bar - add the
"View controller-based status bar appearance = NO"
to your info.plist file and set the following property.
*/
navigationBarView.statusBarStyle = .LightContent
// Title label.
......@@ -81,18 +84,16 @@ class ViewController: UIViewController {
view.addSubview(navigationBarView)
}
/**
:name: prepareOrientationSupportExample
:description: Orientation support example with MaterialLayout.
*/
/// Prepare an example using MaterialLayout that support orientation change.
private func prepareOrientationSupportExample() {
let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.red.darken1
// To lighten the status bar add the "View controller-based status bar appearance = NO"
// to your info.plist file and set the following property.
/*
To lighten the status bar - add the
"View controller-based status bar appearance = NO"
to your info.plist file and set the following property.
*/
navigationBarView.statusBarStyle = .LightContent
// Title label.
......@@ -112,18 +113,16 @@ class ViewController: UIViewController {
MaterialLayout.height(view, child: navigationBarView, height: 70)
}
/**
:name: prepareDetailLabelExample
:description: Using a detail label to add subtext to the NavigationBarView.
*/
/// Prepares an example that uses a detailLabel.
private func prepareDetailLabelExample() {
let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.purple.darken1
// To lighten the status bar add the "View controller-based status bar appearance = NO"
// to your info.plist file and set the following property.
/*
To lighten the status bar - add the
"View controller-based status bar appearance = NO"
to your info.plist file and set the following property.
*/
navigationBarView.statusBarStyle = .LightContent
// Title label.
......@@ -150,19 +149,17 @@ class ViewController: UIViewController {
MaterialLayout.height(view, child: navigationBarView, height: 70)
}
/**
:name: prepareBackgroundImageExample
:description: Using a background image for the NavigationBarView.
*/
/// Prepares an example that uses a background image.
private func prepareBackgroundImageExample() {
let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.image = UIImage(named: "NavigationBarViewTexture")
navigationBarView.contentsGravity = .ResizeAspectFill
// To lighten the status bar add the "View controller-based status bar appearance = NO"
// to your info.plist file and set the following property.
/*
To lighten the status bar - add the
"View controller-based status bar appearance = NO"
to your info.plist file and set the following property.
*/
navigationBarView.statusBarStyle = .LightContent
// Title label.
......@@ -181,18 +178,16 @@ class ViewController: UIViewController {
MaterialLayout.height(view, child: navigationBarView, height: 70)
}
/**
:name: prepareButtonExample
:description: Adding buttons to the NavigationBarView.
*/
/// Prepares an example that uses buttons.
private func prepareButtonExample() {
let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.blueGrey.darken4
// To lighten the status bar add the "View controller-based status bar appearance = NO"
// to your info.plist file and set the following property.
/*
To lighten the status bar - add the
"View controller-based status bar appearance = NO"
to your info.plist file and set the following property.
*/
navigationBarView.statusBarStyle = .LightContent
// Title label.
......@@ -244,18 +239,16 @@ class ViewController: UIViewController {
MaterialLayout.height(view, child: navigationBarView, height: 70)
}
/**
:name: prepareAlignTitleAndDetailLabelToLeftExample
:description: Aligning the title and detail labes to the left.
*/
/// Prepares a text alignment example.
private func prepareAlignTitleAndDetailLabelToLeftExample() {
let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.indigo.darken1
// To lighten the status bar add the "View controller-based status bar appearance = NO"
// to your info.plist file and set the following property.
/*
To lighten the status bar - add the
"View controller-based status bar appearance = NO"
to your info.plist file and set the following property.
*/
navigationBarView.statusBarStyle = .LightContent
// Title label.
......
Examples/Programmatic/TextField/TextField.xcodeproj/project.pbxproj
......@@ -7,8 +7,6 @@
objects = {
/* Begin PBXBuildFile section */
96607DE31C42C872008D47D8 /* MaterialKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 96607DE21C42C872008D47D8 /* MaterialKit.framework */; };
96607DE41C42C872008D47D8 /* MaterialKit.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 96607DE21C42C872008D47D8 /* MaterialKit.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
966F57A11C226BAA009185B7 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A01C226BAA009185B7 /* AppDelegate.swift */; };
966F57A31C226BAA009185B7 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A21C226BAA009185B7 /* ViewController.swift */; };
966F57A81C226BAA009185B7 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 966F57A71C226BAA009185B7 /* Assets.xcassets */; };
......@@ -22,7 +20,6 @@
dstPath = "";
dstSubfolderSpec = 10;
files = (
96607DE41C42C872008D47D8 /* MaterialKit.framework in Embed Frameworks */,
);
name = "Embed Frameworks";
runOnlyForDeploymentPostprocessing = 0;
......@@ -30,7 +27,6 @@
/* End PBXCopyFilesBuildPhase section */
/* Begin PBXFileReference section */
96607DE21C42C872008D47D8 /* MaterialKit.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; name = MaterialKit.framework; path = "/Users/danieldahan/Library/Developer/Xcode/DerivedData/MaterialKit-gdulktuccbcfwbdfadtpxkworhyc/Build/Products/Debug-iphoneos/MaterialKit.framework"; sourceTree = "<absolute>"; };
966F579D1C226BAA009185B7 /* TextField.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = TextField.app; sourceTree = BUILT_PRODUCTS_DIR; };
966F57A01C226BAA009185B7 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
966F57A21C226BAA009185B7 /* ViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewController.swift; sourceTree = "<group>"; };
......@@ -44,7 +40,6 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
96607DE31C42C872008D47D8 /* MaterialKit.framework in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
......@@ -54,7 +49,6 @@
966F57941C226BAA009185B7 = {
isa = PBXGroup;
children = (
96607DE21C42C872008D47D8 /* MaterialKit.framework */,
966F579F1C226BAA009185B7 /* TextField */,
966F579E1C226BAA009185B7 /* Products */,
);
......
Examples/Programmatic/TextField/TextField/ViewController.swift
......@@ -30,8 +30,8 @@
/*
The following is an example of using a TextField. TextFields offer details
that describe the usage and input results of text. For example, when an
error enters an incorrect email, it is possible to display an error message
that describe the usage and input results of text. For example, when a
user enters an incorrect email, it is possible to display an error message
under the TextField.
*/
......@@ -67,7 +67,7 @@ class ViewController: UIViewController, TextFieldDelegate {
nameField.titleLabel = UILabel()
nameField.titleLabel!.font = RobotoFont.mediumWithSize(12)
nameField.titleLabelColor = MaterialColor.grey.lighten1
nameField.titleLabelColor = MaterialColor.grey.base
nameField.titleLabelActiveColor = MaterialColor.blue.accent3
view.addSubview(nameField)
}
......@@ -82,7 +82,7 @@ class ViewController: UIViewController, TextFieldDelegate {
emailField.titleLabel = UILabel()
emailField.titleLabel!.font = RobotoFont.mediumWithSize(12)
emailField.titleLabelColor = MaterialColor.grey.lighten1
emailField.titleLabelColor = MaterialColor.grey.base
emailField.titleLabelActiveColor = MaterialColor.blue.accent3
emailField.clearButtonMode = .WhileEditing
......
README.md
......@@ -75,10 +75,10 @@ The MaterialKit framework is a fast growing project and will encounter changes t
* [FlatButton](#flatbutton)
* [RaisedButton](#raisedbutton)
* [FabButton](#fabbutton)
* [CardView](#cardview)
* [ImageCardView](#imagecardview)
* [NavigationBarView](#navigationbarview)
* [SideNavigationViewController](#sidenavigationviewcontroller)
* [CardView](#cardview)
* [ImageCardView](#imagecardview)
* [CaptureView](#captureview)
* [MaterialColor](#materialcolor)
* [MaterialLayout](#materiallayout)
......@@ -100,7 +100,10 @@ The MaterialKit framework is a fast growing project and will encounter changes t
<a name="textfield"></a>
### TextField
A TextField is an excellent way to improve UX. Checkout the Examples directory for a project using this component.
A TextField is an excellent way to improve UX. TextFields offer details
that describe the usage and input results of text. For example, when a
user enters an incorrect email, it is possible to display an error message
under the TextField. Checkout the Examples directory for a project using this component.
![MaterialKitTextField](http://www.materialkit.io/MK/MaterialKitTextField.gif)
......@@ -116,7 +119,7 @@ textField.titleLabelColor = MaterialColor.grey.lighten1
textField.titleLabelActiveColor = MaterialColor.blue.accent3
textField.clearButtonMode = .WhileEditing
// Add nameField to UIViewController.
// Add textField to UIViewController.
view.addSubview(textField)
```
......@@ -142,7 +145,7 @@ materialLayer.image = UIImage(named: "CosmicMindAppIcon")
materialLayer.shape = .Circle
materialLayer.shadowDepth = .Depth2
// Add layer to UIViewController.
// Add materialLayer to UIViewController.
view.layer.addSublayer(materialLayer)
```
......@@ -160,31 +163,32 @@ materialView.shape = .Square
materialView.shadowDepth = .Depth2
materialView.cornerRadius = .Radius3
// Add view to UIViewController.
// Add materialView to UIViewController.
view.addSubview(materialView)
```
<a name="materialpulseview"></a>
### MaterialPulseView
MaterialPulseView is at the heart of all pulse animations. Any view that subclasses MaterialPulseView instantly inherits the pulse animation with full customizability.
MaterialPulseView is at the heart of all pulse animations. Any view that subclasses MaterialPulseView instantly inherits the pulse animation with full customizability. Below is an example of using MaterialPulseView.
![MaterialKitMaterialPulseView](http://www.materialkit.io/MK/MaterialKitMaterialPulseView.gif)
```swift
let materialPulseView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(132, 132, 150, 150))
materialPulseView.image = UIImage(named: "ContentAppIcon")
materialPulseView.shape = .Circle
materialPulseView.shadowDepth = .Depth2
// Add view to UIViewController.
view.addSubview(materialPulseView)
let pulseView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(132, 132, 150, 150))
pulseView.image = UIImage(named: "GraphKitAppIcon")
pulseView.shape = .Square
pulseView.depth = .Depth2
pulseView.cornerRadius = .Radius4
// Add pulseView to UIViewController.
view.addSubview(pulseView)
```
<a name="flatbutton"></a>
### FlatButton
A FlatButton is the best place to start when introducing MaterialKit buttons. It is simple, clean, and very effective. Below is an example of a FlatButton in action.
A FlatButton is simple, clean, and very effective. Below is an example of a FlatButton in action.
![MaterialKitFlatButton](http://www.materialkit.io/MK/MaterialKitFlatButton.gif)
......@@ -193,7 +197,7 @@ let button: FlatButton = FlatButton(frame: CGRectMake(107, 107, 200, 65))
button.setTitle("Flat", forState: .Normal)
button.titleLabel!.font = RobotoFont.mediumWithSize(32)
// Add to UIViewController.
// Add button to UIViewController.
view.addSubview(button)
```
......@@ -209,7 +213,7 @@ let button: RaisedButton = RaisedButton(frame: CGRectMake(107, 207, 200, 65))
button.setTitle("Raised", forState: .Normal)
button.titleLabel!.font = RobotoFont.mediumWithSize(32)
// Add to UIViewController.
// Add button to UIViewController.
view.addSubview(button)
```
......@@ -226,10 +230,96 @@ let button: FabButton = FabButton(frame: CGRectMake(175, 315, 64, 64))
button.setImage(img, forState: .Normal)
button.setImage(img, forState: .Highlighted)
// Add to UIViewController.
// Add button to UIViewController.
view.addSubview(button)
```
<a name="navigationbarview"></a>
### NavigationBarView
A NavigationBarView is a fully featured NavigationBar that supports orientation changes,
background images, title and detail labels, both left and right button sets, and
status bar settings. Below is an example of its usage.
![MaterialKitNavigationBarView](http://www.materialkit.io/MK/MaterialKitNavigationBarView.gif)
```swift
let navigationBarView: NavigationBarView = NavigationBarView()
navigationBarView.backgroundColor = MaterialColor.indigo.darken1
/*
To lighten the status bar - add the
"View controller-based status bar appearance = NO"
to your info.plist file and set the following property.
*/
navigationBarView.statusBarStyle = .LightContent
// Title label.
let titleLabel: UILabel = UILabel()
titleLabel.text = "MaterialKit"
titleLabel.textAlignment = .Left
titleLabel.textColor = MaterialColor.white
titleLabel.font = RobotoFont.regularWithSize(20)
navigationBarView.titleLabel = titleLabel
navigationBarView.titleLabelInset.left = 64
// Detail label.
let detailLabel: UILabel = UILabel()
detailLabel.text = "Build Beautiful Software"
detailLabel.textAlignment = .Left
detailLabel.textColor = MaterialColor.white
detailLabel.font = RobotoFont.regularWithSize(12)
navigationBarView.detailLabel = detailLabel
navigationBarView.detailLabelInset.left = 64
// Menu button.
let img1: UIImage? = UIImage(named: "ic_menu_white")
let btn1: FlatButton = FlatButton()
btn1.pulseColor = MaterialColor.white
btn1.pulseFill = true
btn1.pulseScale = false
btn1.setImage(img1, forState: .Normal)
btn1.setImage(img1, forState: .Highlighted)
// Star button.
let img2: UIImage? = UIImage(named: "ic_star_white")
let btn2: FlatButton = FlatButton()
btn2.pulseColor = MaterialColor.white
btn2.pulseFill = true
btn2.pulseScale = false
btn2.setImage(img2, forState: .Normal)
btn2.setImage(img2, forState: .Highlighted)
// Search button.
let img3: UIImage? = UIImage(named: "ic_search_white")
let btn3: FlatButton = FlatButton()
btn3.pulseColor = MaterialColor.white
btn3.pulseFill = true
btn3.pulseScale = false
btn3.setImage(img3, forState: .Normal)
btn3.setImage(img3, forState: .Highlighted)
// Add buttons to left side.
navigationBarView.leftButtons = [btn1]
// Add buttons to right side.
navigationBarView.rightButtons = [btn2, btn3]
// To support orientation changes, use MaterialLayout.
view.addSubview(navigationBarView)
navigationBarView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromTop(view, child: navigationBarView)
MaterialLayout.alignToParentHorizontally(view, child: navigationBarView)
MaterialLayout.height(view, child: navigationBarView, height: 70)
```
<a name="sidenavigationviewcontroller"></a>
### SideNavigationViewController
As elegant as is effective, the SideNavigationViewController is an excellent way to organize your app. In the Examples directory, there is an example project using this wonderful component.
![MaterialKitSideNavigationViewController](http://www.materialkit.io/MK/MaterialKitSideNavigationViewController.gif)
<a name="cardview"></a>
### CardView
......@@ -532,89 +622,6 @@ MaterialLayout.alignFromTop(view, child: imageCardView, top: 100)
MaterialLayout.alignToParentHorizontally(view, child: imageCardView, left: 20, right: 20)
```
<a name="navigationbarview"></a>
### NavigationBarView
One of Material Design's greatest additions to UI is the NavigationBarView. In the Examples folder, you can checkout some code to get you started with this wonderful component.
![MaterialKitNavigationBarView](http://www.materialkit.io/MK/MaterialKitNavigationBarView.gif)
```swift
let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.indigo.darken1
// To lighten the status bar add the "View controller-based status bar appearance = NO"
// to your info.plist file and set the following property.
navigationBarView.statusBarStyle = .LightContent
// Title label.
let titleLabel: UILabel = UILabel()
titleLabel.text = "MaterialKit"
titleLabel.textAlignment = .Left
titleLabel.textColor = MaterialColor.white
titleLabel.font = RobotoFont.regularWithSize(20)
navigationBarView.titleLabel = titleLabel
navigationBarView.titleLabelInset.left = 64
// Detail label.
let detailLabel: UILabel = UILabel()
detailLabel.text = "Build Beautiful Software"
detailLabel.textAlignment = .Left
detailLabel.textColor = MaterialColor.white
detailLabel.font = RobotoFont.regularWithSize(12)
navigationBarView.detailLabel = detailLabel
navigationBarView.detailLabelInset.left = 64
// Menu button.
let img1: UIImage? = UIImage(named: "ic_menu_white")
let btn1: FlatButton = FlatButton()
btn1.pulseColor = MaterialColor.white
btn1.pulseFill = true
btn1.pulseScale = false
btn1.setImage(img1, forState: .Normal)
btn1.setImage(img1, forState: .Highlighted)
// Star button.
let img2: UIImage? = UIImage(named: "ic_star_white")
let btn2: FlatButton = FlatButton()
btn2.pulseColor = MaterialColor.white
btn2.pulseFill = true
btn2.pulseScale = false
btn2.setImage(img2, forState: .Normal)
btn2.setImage(img2, forState: .Highlighted)
// Search button.
let img3: UIImage? = UIImage(named: "ic_search_white")
let btn3: FlatButton = FlatButton()
btn3.pulseColor = MaterialColor.white
btn3.pulseFill = true
btn3.pulseScale = false
btn3.setImage(img3, forState: .Normal)
btn3.setImage(img3, forState: .Highlighted)
// Add buttons to left side.
navigationBarView.leftButtons = [btn1]
// Add buttons to right side.
navigationBarView.rightButtons = [btn2, btn3]
// To support orientation changes, use MaterialLayout.
view.addSubview(navigationBarView)
navigationBarView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromTop(view, child: navigationBarView)
MaterialLayout.alignToParentHorizontally(view, child: navigationBarView)
MaterialLayout.height(view, child: navigationBarView, height: 70)
```
<a name="sidenavigationviewcontroller"></a>
### SideNavigationViewController
As elegant as is effective, the SideNavigationViewController is an excellent way to organize your app. In the Examples directory, there is an example project using this wonderful component.
![MaterialKitSideNavigationViewController](http://www.materialkit.io/MK/MaterialKitSideNavigationViewController.gif)
<a name="captureview"></a>
### CaptureView
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment