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 @@ ...@@ -65,6 +65,13 @@
</Group> </Group>
<Group <Group
location = "container:" location = "container:"
name = "SideNavigationViewController">
<FileRef
location = "group:Programmatic/SideNavigationViewController/SideNavigationViewController.xcodeproj">
</FileRef>
</Group>
<Group
location = "container:"
name = "CardView"> name = "CardView">
<FileRef <FileRef
location = "group:Programmatic/CardView/CardView.xcodeproj"> location = "group:Programmatic/CardView/CardView.xcodeproj">
...@@ -84,13 +91,6 @@ ...@@ -84,13 +91,6 @@
location = "group:Programmatic/CaptureView/CaptureView.xcodeproj"> location = "group:Programmatic/CaptureView/CaptureView.xcodeproj">
</FileRef> </FileRef>
</Group> </Group>
<Group
location = "container:"
name = "SideNavigationViewController">
<FileRef
location = "group:Programmatic/SideNavigationViewController/SideNavigationViewController.xcodeproj">
</FileRef>
</Group>
</Group> </Group>
<Group <Group
location = "container:" location = "container:"
...@@ -118,23 +118,23 @@ ...@@ -118,23 +118,23 @@
</Group> </Group>
<Group <Group
location = "container:" location = "container:"
name = "CardView"> name = "SideNavigationViewController">
<FileRef <FileRef
location = "group:Storyboards/CardView/CardView.xcodeproj"> location = "group:Storyboards/SideNavigationViewController/SideNavigationViewController.xcodeproj">
</FileRef> </FileRef>
</Group> </Group>
<Group <Group
location = "container:" location = "container:"
name = "ImageCardView"> name = "CardView">
<FileRef <FileRef
location = "group:Storyboards/ImageCardView/ImageCardView.xcodeproj"> location = "group:Storyboards/CardView/CardView.xcodeproj">
</FileRef> </FileRef>
</Group> </Group>
<Group <Group
location = "container:" location = "container:"
name = "SideNavigationViewController"> name = "ImageCardView">
<FileRef <FileRef
location = "group:Storyboards/SideNavigationViewController/SideNavigationViewController.xcodeproj"> location = "group:Storyboards/ImageCardView/ImageCardView.xcodeproj">
</FileRef> </FileRef>
</Group> </Group>
</Group> </Group>
......
Examples/Programmatic/CardView/CardView.xcodeproj/project.pbxproj
...@@ -7,6 +7,8 @@ ...@@ -7,6 +7,8 @@
objects = { objects = {
/* Begin PBXBuildFile section */ /* 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 */; }; 967513CA1C136BB7009F455A /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 967513C91C136BB7009F455A /* AppDelegate.swift */; };
967513CC1C136BB7009F455A /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 967513CB1C136BB7009F455A /* ViewController.swift */; }; 967513CC1C136BB7009F455A /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 967513CB1C136BB7009F455A /* ViewController.swift */; };
967513D11C136BB7009F455A /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 967513D01C136BB7009F455A /* Assets.xcassets */; }; 967513D11C136BB7009F455A /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 967513D01C136BB7009F455A /* Assets.xcassets */; };
...@@ -20,6 +22,7 @@ ...@@ -20,6 +22,7 @@
dstPath = ""; dstPath = "";
dstSubfolderSpec = 10; dstSubfolderSpec = 10;
files = ( files = (
96607DFB1C436523008D47D8 /* MaterialKit.framework in Embed Frameworks */,
); );
name = "Embed Frameworks"; name = "Embed Frameworks";
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
...@@ -27,6 +30,7 @@ ...@@ -27,6 +30,7 @@
/* End PBXCopyFilesBuildPhase section */ /* End PBXCopyFilesBuildPhase section */
/* Begin PBXFileReference 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; }; 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>"; }; 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>"; }; 967513CB1C136BB7009F455A /* ViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewController.swift; sourceTree = "<group>"; };
...@@ -40,6 +44,7 @@ ...@@ -40,6 +44,7 @@
isa = PBXFrameworksBuildPhase; isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647; buildActionMask = 2147483647;
files = ( files = (
96607DFA1C436523008D47D8 /* MaterialKit.framework in Frameworks */,
); );
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
}; };
...@@ -49,6 +54,7 @@ ...@@ -49,6 +54,7 @@
967513BD1C136BB7009F455A = { 967513BD1C136BB7009F455A = {
isa = PBXGroup; isa = PBXGroup;
children = ( children = (
96607DF91C436523008D47D8 /* MaterialKit.framework */,
967513C81C136BB7009F455A /* CardView */, 967513C81C136BB7009F455A /* CardView */,
967513C71C136BB7009F455A /* Products */, 967513C71C136BB7009F455A /* Products */,
); );
......
Examples/Programmatic/MaterialButton/MaterialButton/ViewController.swift
...@@ -28,6 +28,11 @@ ...@@ -28,6 +28,11 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * 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 UIKit
import MaterialKit import MaterialKit
...@@ -35,58 +40,44 @@ class ViewController: UIViewController { ...@@ -35,58 +40,44 @@ class ViewController: UIViewController {
override func viewDidLoad() { override func viewDidLoad() {
super.viewDidLoad() super.viewDidLoad()
prepareView() prepareView()
// Examples of using MaterialButton.
prepareFlatButtonExample() prepareFlatButtonExample()
prepareRaisedButtonExample() prepareRaisedButtonExample()
prepareFabButtonExample() prepareFabButtonExample()
} }
/** /// General preparation statements.
:name: prepareView
:description: General preparation statements.
*/
private func prepareView() { private func prepareView() {
view.backgroundColor = MaterialColor.white view.backgroundColor = MaterialColor.white
} }
/** /// Prepares the FlatButton.
:name: prepareFlatButtonExample
:description: FlatButton example.
*/
private func prepareFlatButtonExample() { private func prepareFlatButtonExample() {
let button: FlatButton = FlatButton(frame: CGRectMake(107, 107, 200, 65)) let button: FlatButton = FlatButton(frame: CGRectMake(107, 107, 200, 65))
button.setTitle("Flat", forState: .Normal) button.setTitle("Flat", forState: .Normal)
button.titleLabel!.font = RobotoFont.mediumWithSize(32) button.titleLabel!.font = RobotoFont.mediumWithSize(32)
// Add to UIViewController. // Add button to UIViewController.
view.addSubview(button) view.addSubview(button)
} }
/** /// Prepares the RaisedButton.
:name: prepareRaisedButtonExample
:description: RaisedButton example.
*/
private func prepareRaisedButtonExample() { private func prepareRaisedButtonExample() {
let button: RaisedButton = RaisedButton(frame: CGRectMake(107, 207, 200, 65)) let button: RaisedButton = RaisedButton(frame: CGRectMake(107, 207, 200, 65))
button.setTitle("Raised", forState: .Normal) button.setTitle("Raised", forState: .Normal)
button.titleLabel!.font = RobotoFont.mediumWithSize(32) button.titleLabel!.font = RobotoFont.mediumWithSize(32)
// Add to UIViewController. // Add button to UIViewController.
view.addSubview(button) view.addSubview(button)
} }
/** /// Prepares the FabButton.
:name: prepareFabButtonExample
:description: FabButton example.
*/
private func prepareFabButtonExample() { private func prepareFabButtonExample() {
let img: UIImage? = UIImage(named: "ic_create_white") let img: UIImage? = UIImage(named: "ic_create_white")
let button: FabButton = FabButton(frame: CGRectMake(175, 315, 64, 64)) let button: FabButton = FabButton(frame: CGRectMake(175, 315, 64, 64))
button.setImage(img, forState: .Normal) button.setImage(img, forState: .Normal)
button.setImage(img, forState: .Highlighted) button.setImage(img, forState: .Highlighted)
// Add to UIViewController. // Add button to UIViewController.
view.addSubview(button) view.addSubview(button)
} }
} }
......
Examples/Programmatic/MaterialLayer/MaterialLayer/ViewController.swift
...@@ -28,6 +28,12 @@ ...@@ -28,6 +28,12 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * 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 UIKit
import MaterialKit import MaterialKit
...@@ -58,8 +64,11 @@ class ViewController: UIViewController { ...@@ -58,8 +64,11 @@ class ViewController: UIViewController {
materialLayer.shape = .Circle materialLayer.shape = .Circle
materialLayer.depth = .Depth2 materialLayer.depth = .Depth2
// Add layer to UIViewController. // Add materialLayer to UIViewController.
view.layer.addSublayer(materialLayer) view.layer.addSublayer(materialLayer)
// Add a rotate animation.
materialLayer.animate(MaterialAnimation.rotate(3, duration: 3))
} }
} }
Examples/Programmatic/MaterialPulseView/MaterialPulseView/Assets.xcassets/ContentAppIcon.imageset/Contents.json → Examples/Programmatic/MaterialPulseView/MaterialPulseView/Assets.xcassets/GraphKitAppIcon.imageset/Contents.json
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"images" : [ "images" : [
{ {
"idiom" : "universal", "idiom" : "universal",
"filename" : "ContentAppIcon.png", "filename" : "GraphKit-iTunesArtWork.png",
"scale" : "1x" "scale" : "1x"
}, },
{ {
......
Examples/Programmatic/MaterialPulseView/MaterialPulseView/ViewController.swift
...@@ -28,6 +28,12 @@ ...@@ -28,6 +28,12 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * 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 UIKit
import MaterialKit import MaterialKit
...@@ -35,30 +41,23 @@ class ViewController: UIViewController { ...@@ -35,30 +41,23 @@ class ViewController: UIViewController {
override func viewDidLoad() { override func viewDidLoad() {
super.viewDidLoad() super.viewDidLoad()
prepareView() prepareView()
// Examples of using MaterialPulseView.
prepareGeneralMaterialPulseViewExample() prepareGeneralMaterialPulseViewExample()
} }
/** /// General preparation statements.
:name: prepareView
:description: General preparation statements.
*/
private func prepareView() { private func prepareView() {
view.backgroundColor = MaterialColor.white view.backgroundColor = MaterialColor.white
} }
/** /// Prepares the MaterialPulseView example.
:name: prepareGeneralMaterialPulseViewExample
:description: General usage example.
*/
private func prepareGeneralMaterialPulseViewExample() { private func prepareGeneralMaterialPulseViewExample() {
let pulseView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(132, 132, 150, 150)) let pulseView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(132, 132, 150, 150))
pulseView.image = UIImage(named: "ContentAppIcon") pulseView.image = UIImage(named: "GraphKitAppIcon")
pulseView.shape = .Circle pulseView.shape = .Square
pulseView.depth = .Depth2 pulseView.depth = .Depth2
pulseView.cornerRadius = .Radius4
// Add view to UIViewController. // Add pulseView to UIViewController.
view.addSubview(pulseView) view.addSubview(pulseView)
} }
} }
......
Examples/Programmatic/MaterialView/MaterialView/ViewController.swift
...@@ -28,6 +28,13 @@ ...@@ -28,6 +28,13 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * 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 UIKit
import MaterialKit import MaterialKit
...@@ -35,23 +42,15 @@ class ViewController: UIViewController { ...@@ -35,23 +42,15 @@ class ViewController: UIViewController {
override func viewDidLoad() { override func viewDidLoad() {
super.viewDidLoad() super.viewDidLoad()
prepareView() prepareView()
// Examples of using MaterialView.
prepareGeneralMaterialViewExample() prepareGeneralMaterialViewExample()
} }
/** /// General preparation statements.
:name: prepareView
:description: General preparation statements.
*/
private func prepareView() { private func prepareView() {
view.backgroundColor = MaterialColor.white view.backgroundColor = MaterialColor.white
} }
/** /// Prepare the MaterialView.
:name: prepareGeneralMaterialViewExample
:description: General usage example.
*/
private func prepareGeneralMaterialViewExample() { private func prepareGeneralMaterialViewExample() {
let materialView: MaterialView = MaterialView(frame: CGRectMake(132, 132, 150, 150)) let materialView: MaterialView = MaterialView(frame: CGRectMake(132, 132, 150, 150))
materialView.image = UIImage(named: "FocusAppIcon") materialView.image = UIImage(named: "FocusAppIcon")
...@@ -59,7 +58,7 @@ class ViewController: UIViewController { ...@@ -59,7 +58,7 @@ class ViewController: UIViewController {
materialView.depth = .Depth2 materialView.depth = .Depth2
materialView.cornerRadius = .Radius3 materialView.cornerRadius = .Radius3
// Add view to UIViewController. // Add materialView to UIViewController.
view.addSubview(materialView) view.addSubview(materialView)
} }
} }
......
Examples/Programmatic/NavigationBarView/NavigationBarView/ViewController.swift
...@@ -28,6 +28,12 @@ ...@@ -28,6 +28,12 @@
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. * 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 UIKit
import MaterialKit import MaterialKit
...@@ -36,37 +42,34 @@ class ViewController: UIViewController { ...@@ -36,37 +42,34 @@ class ViewController: UIViewController {
super.viewDidLoad() super.viewDidLoad()
prepareView() prepareView()
// Examples of using NavigationBarView. /*
// Uncomment different examples and read Examples of using NavigationBarView.
// the comments below. Uncomment different examples and read
the comments below.
*/
// prepareGeneralUsageExample() // prepareGeneralUsageExample()
// prepareOrientationSupportExample() // prepareOrientationSupportExample()
// prepareDetailLabelExample() // prepareDetailLabelExample()
// prepareBackgroundImageExample() // prepareBackgroundImageExample()
prepareButtonExample() // prepareButtonExample()
// prepareAlignTitleAndDetailLabelToLeftExample() prepareAlignTitleAndDetailLabelToLeftExample()
} }
/** /// General preparation statements.
:name: prepareView
:description: General preparation statements.
*/
private func prepareView() { private func prepareView() {
view.backgroundColor = MaterialColor.white view.backgroundColor = MaterialColor.white
} }
/** /// Prepares a general usage example.
:name: prepareGeneralUsageExample
:description: General usage example.
*/
private func prepareGeneralUsageExample() { private func prepareGeneralUsageExample() {
let navigationBarView: NavigationBarView = NavigationBarView() let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.blue.darken1 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 navigationBarView.statusBarStyle = .LightContent
// Title label. // Title label.
...@@ -81,18 +84,16 @@ class ViewController: UIViewController { ...@@ -81,18 +84,16 @@ class ViewController: UIViewController {
view.addSubview(navigationBarView) view.addSubview(navigationBarView)
} }
/** /// Prepare an example using MaterialLayout that support orientation change.
:name: prepareOrientationSupportExample
:description: Orientation support example with MaterialLayout.
*/
private func prepareOrientationSupportExample() { private func prepareOrientationSupportExample() {
let navigationBarView: NavigationBarView = NavigationBarView() let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.red.darken1 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 navigationBarView.statusBarStyle = .LightContent
// Title label. // Title label.
...@@ -112,18 +113,16 @@ class ViewController: UIViewController { ...@@ -112,18 +113,16 @@ class ViewController: UIViewController {
MaterialLayout.height(view, child: navigationBarView, height: 70) MaterialLayout.height(view, child: navigationBarView, height: 70)
} }
/** /// Prepares an example that uses a detailLabel.
:name: prepareDetailLabelExample
:description: Using a detail label to add subtext to the NavigationBarView.
*/
private func prepareDetailLabelExample() { private func prepareDetailLabelExample() {
let navigationBarView: NavigationBarView = NavigationBarView() let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.purple.darken1 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 navigationBarView.statusBarStyle = .LightContent
// Title label. // Title label.
...@@ -150,19 +149,17 @@ class ViewController: UIViewController { ...@@ -150,19 +149,17 @@ class ViewController: UIViewController {
MaterialLayout.height(view, child: navigationBarView, height: 70) MaterialLayout.height(view, child: navigationBarView, height: 70)
} }
/** /// Prepares an example that uses a background image.
:name: prepareBackgroundImageExample
:description: Using a background image for the NavigationBarView.
*/
private func prepareBackgroundImageExample() { private func prepareBackgroundImageExample() {
let navigationBarView: NavigationBarView = NavigationBarView() let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.image = UIImage(named: "NavigationBarViewTexture") navigationBarView.image = UIImage(named: "NavigationBarViewTexture")
navigationBarView.contentsGravity = .ResizeAspectFill 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 navigationBarView.statusBarStyle = .LightContent
// Title label. // Title label.
...@@ -181,18 +178,16 @@ class ViewController: UIViewController { ...@@ -181,18 +178,16 @@ class ViewController: UIViewController {
MaterialLayout.height(view, child: navigationBarView, height: 70) MaterialLayout.height(view, child: navigationBarView, height: 70)
} }
/** /// Prepares an example that uses buttons.
:name: prepareButtonExample
:description: Adding buttons to the NavigationBarView.
*/
private func prepareButtonExample() { private func prepareButtonExample() {
let navigationBarView: NavigationBarView = NavigationBarView() let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.blueGrey.darken4 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 navigationBarView.statusBarStyle = .LightContent
// Title label. // Title label.
...@@ -244,18 +239,16 @@ class ViewController: UIViewController { ...@@ -244,18 +239,16 @@ class ViewController: UIViewController {
MaterialLayout.height(view, child: navigationBarView, height: 70) MaterialLayout.height(view, child: navigationBarView, height: 70)
} }
/** /// Prepares a text alignment example.
:name: prepareAlignTitleAndDetailLabelToLeftExample
:description: Aligning the title and detail labes to the left.
*/
private func prepareAlignTitleAndDetailLabelToLeftExample() { private func prepareAlignTitleAndDetailLabelToLeftExample() {
let navigationBarView: NavigationBarView = NavigationBarView() let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize.
navigationBarView.backgroundColor = MaterialColor.indigo.darken1 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 navigationBarView.statusBarStyle = .LightContent
// Title label. // Title label.
......
Examples/Programmatic/TextField/TextField.xcodeproj/project.pbxproj
...@@ -7,8 +7,6 @@ ...@@ -7,8 +7,6 @@
objects = { objects = {
/* Begin PBXBuildFile section */ /* 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 */; }; 966F57A11C226BAA009185B7 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A01C226BAA009185B7 /* AppDelegate.swift */; };
966F57A31C226BAA009185B7 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A21C226BAA009185B7 /* ViewController.swift */; }; 966F57A31C226BAA009185B7 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A21C226BAA009185B7 /* ViewController.swift */; };
966F57A81C226BAA009185B7 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 966F57A71C226BAA009185B7 /* Assets.xcassets */; }; 966F57A81C226BAA009185B7 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 966F57A71C226BAA009185B7 /* Assets.xcassets */; };
...@@ -22,7 +20,6 @@ ...@@ -22,7 +20,6 @@
dstPath = ""; dstPath = "";
dstSubfolderSpec = 10; dstSubfolderSpec = 10;
files = ( files = (
96607DE41C42C872008D47D8 /* MaterialKit.framework in Embed Frameworks */,
); );
name = "Embed Frameworks"; name = "Embed Frameworks";
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
...@@ -30,7 +27,6 @@ ...@@ -30,7 +27,6 @@
/* End PBXCopyFilesBuildPhase section */ /* End PBXCopyFilesBuildPhase section */
/* Begin PBXFileReference 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; }; 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>"; }; 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>"; }; 966F57A21C226BAA009185B7 /* ViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewController.swift; sourceTree = "<group>"; };
...@@ -44,7 +40,6 @@ ...@@ -44,7 +40,6 @@
isa = PBXFrameworksBuildPhase; isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647; buildActionMask = 2147483647;
files = ( files = (
96607DE31C42C872008D47D8 /* MaterialKit.framework in Frameworks */,
); );
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
}; };
...@@ -54,7 +49,6 @@ ...@@ -54,7 +49,6 @@
966F57941C226BAA009185B7 = { 966F57941C226BAA009185B7 = {
isa = PBXGroup; isa = PBXGroup;
children = ( children = (
96607DE21C42C872008D47D8 /* MaterialKit.framework */,
966F579F1C226BAA009185B7 /* TextField */, 966F579F1C226BAA009185B7 /* TextField */,
966F579E1C226BAA009185B7 /* Products */, 966F579E1C226BAA009185B7 /* Products */,
); );
......
Examples/Programmatic/TextField/TextField/ViewController.swift
...@@ -30,8 +30,8 @@ ...@@ -30,8 +30,8 @@
/* /*
The following is an example of using a TextField. TextFields offer details 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 that describe the usage and input results of text. For example, when a
error enters an incorrect email, it is possible to display an error message user enters an incorrect email, it is possible to display an error message
under the TextField. under the TextField.
*/ */
...@@ -67,7 +67,7 @@ class ViewController: UIViewController, TextFieldDelegate { ...@@ -67,7 +67,7 @@ class ViewController: UIViewController, TextFieldDelegate {
nameField.titleLabel = UILabel() nameField.titleLabel = UILabel()
nameField.titleLabel!.font = RobotoFont.mediumWithSize(12) nameField.titleLabel!.font = RobotoFont.mediumWithSize(12)
nameField.titleLabelColor = MaterialColor.grey.lighten1 nameField.titleLabelColor = MaterialColor.grey.base
nameField.titleLabelActiveColor = MaterialColor.blue.accent3 nameField.titleLabelActiveColor = MaterialColor.blue.accent3
view.addSubview(nameField) view.addSubview(nameField)
} }
...@@ -82,7 +82,7 @@ class ViewController: UIViewController, TextFieldDelegate { ...@@ -82,7 +82,7 @@ class ViewController: UIViewController, TextFieldDelegate {
emailField.titleLabel = UILabel() emailField.titleLabel = UILabel()
emailField.titleLabel!.font = RobotoFont.mediumWithSize(12) emailField.titleLabel!.font = RobotoFont.mediumWithSize(12)
emailField.titleLabelColor = MaterialColor.grey.lighten1 emailField.titleLabelColor = MaterialColor.grey.base
emailField.titleLabelActiveColor = MaterialColor.blue.accent3 emailField.titleLabelActiveColor = MaterialColor.blue.accent3
emailField.clearButtonMode = .WhileEditing emailField.clearButtonMode = .WhileEditing
......
README.md
...@@ -75,10 +75,10 @@ The MaterialKit framework is a fast growing project and will encounter changes t ...@@ -75,10 +75,10 @@ The MaterialKit framework is a fast growing project and will encounter changes t
* [FlatButton](#flatbutton) * [FlatButton](#flatbutton)
* [RaisedButton](#raisedbutton) * [RaisedButton](#raisedbutton)
* [FabButton](#fabbutton) * [FabButton](#fabbutton)
* [CardView](#cardview)
* [ImageCardView](#imagecardview)
* [NavigationBarView](#navigationbarview) * [NavigationBarView](#navigationbarview)
* [SideNavigationViewController](#sidenavigationviewcontroller) * [SideNavigationViewController](#sidenavigationviewcontroller)
* [CardView](#cardview)
* [ImageCardView](#imagecardview)
* [CaptureView](#captureview) * [CaptureView](#captureview)
* [MaterialColor](#materialcolor) * [MaterialColor](#materialcolor)
* [MaterialLayout](#materiallayout) * [MaterialLayout](#materiallayout)
...@@ -100,7 +100,10 @@ The MaterialKit framework is a fast growing project and will encounter changes t ...@@ -100,7 +100,10 @@ The MaterialKit framework is a fast growing project and will encounter changes t
<a name="textfield"></a> <a name="textfield"></a>
### TextField ### 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) ![MaterialKitTextField](http://www.materialkit.io/MK/MaterialKitTextField.gif)
...@@ -116,7 +119,7 @@ textField.titleLabelColor = MaterialColor.grey.lighten1 ...@@ -116,7 +119,7 @@ textField.titleLabelColor = MaterialColor.grey.lighten1
textField.titleLabelActiveColor = MaterialColor.blue.accent3 textField.titleLabelActiveColor = MaterialColor.blue.accent3
textField.clearButtonMode = .WhileEditing textField.clearButtonMode = .WhileEditing
// Add nameField to UIViewController. // Add textField to UIViewController.
view.addSubview(textField) view.addSubview(textField)
``` ```
...@@ -142,7 +145,7 @@ materialLayer.image = UIImage(named: "CosmicMindAppIcon") ...@@ -142,7 +145,7 @@ materialLayer.image = UIImage(named: "CosmicMindAppIcon")
materialLayer.shape = .Circle materialLayer.shape = .Circle
materialLayer.shadowDepth = .Depth2 materialLayer.shadowDepth = .Depth2
// Add layer to UIViewController. // Add materialLayer to UIViewController.
view.layer.addSublayer(materialLayer) view.layer.addSublayer(materialLayer)
``` ```
...@@ -160,31 +163,32 @@ materialView.shape = .Square ...@@ -160,31 +163,32 @@ materialView.shape = .Square
materialView.shadowDepth = .Depth2 materialView.shadowDepth = .Depth2
materialView.cornerRadius = .Radius3 materialView.cornerRadius = .Radius3
// Add view to UIViewController. // Add materialView to UIViewController.
view.addSubview(materialView) view.addSubview(materialView)
``` ```
<a name="materialpulseview"></a> <a name="materialpulseview"></a>
### MaterialPulseView ### 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) ![MaterialKitMaterialPulseView](http://www.materialkit.io/MK/MaterialKitMaterialPulseView.gif)
```swift ```swift
let materialPulseView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(132, 132, 150, 150)) let pulseView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(132, 132, 150, 150))
materialPulseView.image = UIImage(named: "ContentAppIcon") pulseView.image = UIImage(named: "GraphKitAppIcon")
materialPulseView.shape = .Circle pulseView.shape = .Square
materialPulseView.shadowDepth = .Depth2 pulseView.depth = .Depth2
pulseView.cornerRadius = .Radius4
// Add view to UIViewController.
view.addSubview(materialPulseView) // Add pulseView to UIViewController.
view.addSubview(pulseView)
``` ```
<a name="flatbutton"></a> <a name="flatbutton"></a>
### FlatButton ### 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) ![MaterialKitFlatButton](http://www.materialkit.io/MK/MaterialKitFlatButton.gif)
...@@ -193,7 +197,7 @@ let button: FlatButton = FlatButton(frame: CGRectMake(107, 107, 200, 65)) ...@@ -193,7 +197,7 @@ let button: FlatButton = FlatButton(frame: CGRectMake(107, 107, 200, 65))
button.setTitle("Flat", forState: .Normal) button.setTitle("Flat", forState: .Normal)
button.titleLabel!.font = RobotoFont.mediumWithSize(32) button.titleLabel!.font = RobotoFont.mediumWithSize(32)
// Add to UIViewController. // Add button to UIViewController.
view.addSubview(button) view.addSubview(button)
``` ```
...@@ -209,7 +213,7 @@ let button: RaisedButton = RaisedButton(frame: CGRectMake(107, 207, 200, 65)) ...@@ -209,7 +213,7 @@ let button: RaisedButton = RaisedButton(frame: CGRectMake(107, 207, 200, 65))
button.setTitle("Raised", forState: .Normal) button.setTitle("Raised", forState: .Normal)
button.titleLabel!.font = RobotoFont.mediumWithSize(32) button.titleLabel!.font = RobotoFont.mediumWithSize(32)
// Add to UIViewController. // Add button to UIViewController.
view.addSubview(button) view.addSubview(button)
``` ```
...@@ -226,10 +230,96 @@ let button: FabButton = FabButton(frame: CGRectMake(175, 315, 64, 64)) ...@@ -226,10 +230,96 @@ let button: FabButton = FabButton(frame: CGRectMake(175, 315, 64, 64))
button.setImage(img, forState: .Normal) button.setImage(img, forState: .Normal)
button.setImage(img, forState: .Highlighted) button.setImage(img, forState: .Highlighted)
// Add to UIViewController. // Add button to UIViewController.
view.addSubview(button) 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> <a name="cardview"></a>
### CardView ### CardView
...@@ -532,89 +622,6 @@ MaterialLayout.alignFromTop(view, child: imageCardView, top: 100) ...@@ -532,89 +622,6 @@ MaterialLayout.alignFromTop(view, child: imageCardView, top: 100)
MaterialLayout.alignToParentHorizontally(view, child: imageCardView, left: 20, right: 20) 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> <a name="captureview"></a>
### CaptureView ### 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