updated MaterialView example

Examples/NavigationBarView/NavigationBarView/ViewController.swift

@@ -54,7 +54,7 @@ class ViewController: UIViewController {
 		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 lighten the status bar add the "View controller-based status bar appearance = NO"
-		// to you info.plist file and set the following property.
+		// to your info.plist file and set the following property.
 		navigationBarView.statusBarStyle = .LightContent
 		navigationBarView.statusBarStyle = .LightContent
 		
 		
 		// Title label.
 		// Title label.
@@ -80,7 +80,7 @@ class ViewController: UIViewController {
 		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 lighten the status bar add the "View controller-based status bar appearance = NO"
-		// to you info.plist file and set the following property.
+		// to your info.plist file and set the following property.
 		navigationBarView.statusBarStyle = .LightContent
 		navigationBarView.statusBarStyle = .LightContent
 		
 		
 		// Title label.
 		// Title label.
@@ -111,7 +111,7 @@ class ViewController: UIViewController {
 		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 lighten the status bar add the "View controller-based status bar appearance = NO"
-		// to you info.plist file and set the following property.
+		// to your info.plist file and set the following property.
 		navigationBarView.statusBarStyle = .LightContent
 		navigationBarView.statusBarStyle = .LightContent
 		
 		
 		// Title label.
 		// Title label.
@@ -150,7 +150,7 @@ class ViewController: UIViewController {
 		navigationBarView.contentsGravity = .ResizeAspectFill
 		navigationBarView.contentsGravity = .ResizeAspectFill
 		
 		
 		// To lighten the status bar add the "View controller-based status bar appearance = NO"
 		// To lighten the status bar add the "View controller-based status bar appearance = NO"
-		// to you info.plist file and set the following property.
+		// to your info.plist file and set the following property.
 		navigationBarView.statusBarStyle = .LightContent
 		navigationBarView.statusBarStyle = .LightContent
 		
 		
 		// Title label.
 		// Title label.
@@ -180,7 +180,7 @@ class ViewController: UIViewController {
 		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 lighten the status bar add the "View controller-based status bar appearance = NO"
-		// to you info.plist file and set the following property.
+		// to your info.plist file and set the following property.
 		navigationBarView.statusBarStyle = .LightContent
 		navigationBarView.statusBarStyle = .LightContent
 		
 		
 		// Title label.
 		// Title label.
@@ -243,7 +243,7 @@ class ViewController: UIViewController {
 		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 lighten the status bar add the "View controller-based status bar appearance = NO"
-		// to you info.plist file and set the following property.
+		// to your info.plist file and set the following property.
 		navigationBarView.statusBarStyle = .LightContent
 		navigationBarView.statusBarStyle = .LightContent
 		
 		
 		// Title label.
 		// Title label.

README.md

@@ -45,24 +45,265 @@ One of Material Design's greatest additions to UI is the NavigationBarView. In t
 
 
 ![MaterialKitNavigationBarView](http://www.materialkit.io/MK/MaterialKitNavigationBarView.gif)
 ![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.titleLabelInsetsRef.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.detailLabelInsetsRef.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)
+```
+
 ### CardView
 ### CardView
 
 
 Right out of the box to a fully customized configuration, CardView always stands out. Take a look at a few examples in action and find more in the Examples directory.
 Right out of the box to a fully customized configuration, CardView always stands out. Take a look at a few examples in action and find more in the Examples directory.
 
 
 ![MaterialKitCardView](http://www.materialkit.io/MK/MaterialKitCardView.gif)
 ![MaterialKitCardView](http://www.materialkit.io/MK/MaterialKitCardView.gif)
 
 
+```swift
+let cardView: CardView = CardView()
+
+// Title label.
+let titleLabel: UILabel = UILabel()
+titleLabel.text = "Welcome Back!"
+titleLabel.textColor = MaterialColor.blue.darken1
+titleLabel.font = RobotoFont.mediumWithSize(20)
+cardView.titleLabel = titleLabel
+
+// Detail label
+let detailLabel: UILabel = UILabel()
+detailLabel.text = "It’s been a while, have you read any new books lately?"
+detailLabel.numberOfLines = 0
+cardView.detailLabel = detailLabel
+
+// Yes button.
+let btn1: FlatButton = FlatButton()
+btn1.pulseColor = MaterialColor.blue.lighten1
+btn1.pulseFill = true
+btn1.pulseScale = false
+btn1.setTitle("YES", forState: .Normal)
+btn1.setTitleColor(MaterialColor.blue.darken1, forState: .Normal)
+
+// No button.
+let btn2: FlatButton = FlatButton()
+btn2.pulseColor = MaterialColor.blue.lighten1
+btn2.pulseFill = true
+btn2.pulseScale = false
+btn2.setTitle("NO", forState: .Normal)
+btn2.setTitleColor(MaterialColor.blue.darken1, forState: .Normal)
+
+// Add buttons to left side.
+cardView.leftButtons = [btn1, btn2]
+
+// To support orientation changes, use MaterialLayout.
+view.addSubview(cardView)
+cardView.translatesAutoresizingMaskIntoConstraints = false
+MaterialLayout.alignFromTop(view, child: cardView, top: 100)
+MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 20, right: 20)
+```
+
 Easily remove the pulse animation and add a background image for an entirely new feel.
 Easily remove the pulse animation and add a background image for an entirely new feel.
 
 
 ![MaterialKitCardViewFavorite](http://www.materialkit.io/MK/MaterialKitCardViewFavorite.gif)
 ![MaterialKitCardViewFavorite](http://www.materialkit.io/MK/MaterialKitCardViewFavorite.gif)
 
 
+```swift
+let cardView: CardView = CardView()
+cardView.divider = false
+cardView.backgroundColor = MaterialColor.red.darken1
+cardView.pulseScale = false
+cardView.pulseColor = nil
+
+// Image.
+cardView.image = UIImage(named: "iTunesArtwork")?.resize(toWidth: 400)
+cardView.contentsGravity = .BottomRight
+
+// Title label.
+let titleLabel: UILabel = UILabel()
+titleLabel.text = "MaterialKit"
+titleLabel.textColor = MaterialColor.white
+titleLabel.font = RobotoFont.mediumWithSize(24)
+cardView.titleLabel = titleLabel
+
+// Detail label
+let detailLabel: UILabel = UILabel()
+detailLabel.text = "Build beautiful software."
+detailLabel.textColor = MaterialColor.white
+detailLabel.numberOfLines = 0
+cardView.detailLabel = detailLabel
+
+// Favorite button.
+let img1: UIImage? = UIImage(named: "ic_favorite_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)
+
+// Add buttons to left side.
+cardView.leftButtons = [btn1]
+
+// To support orientation changes, use MaterialLayout.
+view.addSubview(cardView)
+cardView.translatesAutoresizingMaskIntoConstraints = false
+MaterialLayout.alignFromTop(view, child: cardView, top: 100)
+MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 20, right: 20)
+```
+
 Adjust the alignment of the UI elements to create different configurations of the CardView.
 Adjust the alignment of the UI elements to create different configurations of the CardView.
 
 
 ![MaterialKitCardViewDataDriven](http://www.materialkit.io/MK/MaterialKitCardViewDataDriven.gif)
 ![MaterialKitCardViewDataDriven](http://www.materialkit.io/MK/MaterialKitCardViewDataDriven.gif)
 
 
+```swift
+let cardView: CardView = CardView()
+cardView.dividerInsetsRef.left = 100
+cardView.titleLabelInsetsRef.left = 100
+cardView.detailLabelInsetsRef.left = 100
+cardView.pulseColor = MaterialColor.teal.lighten4
+
+// Image.
+cardView.image = UIImage(named: "GraphKit")
+cardView.contentsGravity = .TopLeft
+
+// Title label.
+let titleLabel: UILabel = UILabel()
+titleLabel.text = "GraphKit"
+titleLabel.font = RobotoFont.mediumWithSize(24)
+cardView.titleLabel = titleLabel
+
+// Detail label
+let detailLabel: UILabel = UILabel()
+detailLabel.text = "Build scalable data-driven apps."
+detailLabel.numberOfLines = 0
+cardView.detailLabel = detailLabel
+
+// LEARN MORE button.
+let btn1: FlatButton = FlatButton()
+btn1.pulseColor = MaterialColor.teal.lighten1
+btn1.pulseFill = true
+btn1.pulseScale = false
+btn1.setTitle("LEARN MORE", forState: .Normal)
+btn1.setTitleColor(MaterialColor.teal.darken1, forState: .Normal)
+
+// Add buttons to right side.
+cardView.rightButtons = [btn1]
+
+// To support orientation changes, use MaterialLayout.
+view.addSubview(cardView)
+cardView.translatesAutoresizingMaskIntoConstraints = false
+MaterialLayout.alignFromTop(view, child: cardView, top: 100)
+MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 20, right: 20)
+```
+
 CardViews are so flexible they create entirely new components by removing all but certain elements. For example, bellow is a button bar by only setting the button values of the CardView.
 CardViews are so flexible they create entirely new components by removing all but certain elements. For example, bellow is a button bar by only setting the button values of the CardView.
 
 
 ![MaterialKitCardViewButtonBar](http://www.materialkit.io/MK/MaterialKitCardViewButtonBar.gif)
 ![MaterialKitCardViewButtonBar](http://www.materialkit.io/MK/MaterialKitCardViewButtonBar.gif)
 
 
+```swift
+let cardView: CardView = CardView()
+cardView.divider = false
+cardView.pulseColor = nil
+cardView.pulseScale = false
+cardView.backgroundColor = MaterialColor.blueGrey.darken4
+
+// Favorite button.
+let img1: UIImage? = UIImage(named: "ic_search_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)
+
+// BUTTON 1 button.
+let btn2: FlatButton = FlatButton()
+btn2.pulseColor = MaterialColor.teal.lighten3
+btn2.pulseFill = true
+btn2.pulseScale = false
+btn2.setTitle("BUTTON 1", forState: .Normal)
+btn2.setTitleColor(MaterialColor.teal.lighten3, forState: .Normal)
+
+// BUTTON 2 button.
+let btn3: FlatButton = FlatButton()
+btn3.pulseColor = MaterialColor.teal.lighten3
+btn3.pulseFill = true
+btn3.pulseScale = false
+btn3.setTitle("BUTTON 2", forState: .Normal)
+btn3.setTitleColor(MaterialColor.teal.lighten3, forState: .Normal)
+
+// Add buttons to left side.
+cardView.leftButtons = [btn1]
+
+// Add buttons to right side.
+cardView.rightButtons = [btn2, btn3]
+
+// To support orientation changes, use MaterialLayout.
+view.addSubview(cardView)
+cardView.translatesAutoresizingMaskIntoConstraints = false
+MaterialLayout.alignFromTop(view, child: cardView, top: 100)
+MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 20, right: 20)
+```
+
 ### ImageCardView
 ### ImageCardView
 
 
 Bold and attractive, ImageCardView is the next step from a CardView. In the Examples folder you will find examples using the ImageCardView. Below are some animations to give you an idea of the possibilities the ImageCardView has to offer.
 Bold and attractive, ImageCardView is the next step from a CardView. In the Examples folder you will find examples using the ImageCardView. Below are some animations to give you an idea of the possibilities the ImageCardView has to offer.