Commit 5a342f4a by Daniel Dahan

updated README with example 4 for CardView

parent 8b24655c
...@@ -29,7 +29,8 @@ class ViewController: UIViewController { ...@@ -29,7 +29,8 @@ class ViewController: UIViewController {
// the comments below. // the comments below.
// prepareGeneralCardViewExample() // prepareGeneralCardViewExample()
// prepareCardViewWithoutPulseBackgroundImageExample() // prepareCardViewWithoutPulseBackgroundImageExample()
prepareCardViewWithAlteredAlignmentExample() // prepareCardViewWithAlteredAlignmentExample()
prepareCardViewButtonBar()
} }
/** /**
...@@ -50,7 +51,7 @@ class ViewController: UIViewController { ...@@ -50,7 +51,7 @@ class ViewController: UIViewController {
// Title label. // Title label.
let titleLabel: UILabel = UILabel() let titleLabel: UILabel = UILabel()
titleLabel.text = "Welcome Back!" titleLabel.text = "Welcome Back!"
titleLabel.textColor = MaterialColor.teal.darken1 titleLabel.textColor = MaterialColor.blue.darken1
titleLabel.font = RobotoFont.mediumWithSize(20) titleLabel.font = RobotoFont.mediumWithSize(20)
cardView.titleLabel = titleLabel cardView.titleLabel = titleLabel
...@@ -62,19 +63,19 @@ class ViewController: UIViewController { ...@@ -62,19 +63,19 @@ class ViewController: UIViewController {
// Yes button. // Yes button.
let btn1: FlatButton = FlatButton() let btn1: FlatButton = FlatButton()
btn1.pulseColor = MaterialColor.teal.lighten1 btn1.pulseColor = MaterialColor.blue.lighten1
btn1.pulseFill = true btn1.pulseFill = true
btn1.pulseScale = false btn1.pulseScale = false
btn1.setTitle("YES", forState: .Normal) btn1.setTitle("YES", forState: .Normal)
btn1.setTitleColor(MaterialColor.teal.darken1, forState: .Normal) btn1.setTitleColor(MaterialColor.blue.darken1, forState: .Normal)
// No button. // No button.
let btn2: FlatButton = FlatButton() let btn2: FlatButton = FlatButton()
btn2.pulseColor = MaterialColor.teal.lighten1 btn2.pulseColor = MaterialColor.blue.lighten1
btn2.pulseFill = true btn2.pulseFill = true
btn2.pulseScale = false btn2.pulseScale = false
btn2.setTitle("NO", forState: .Normal) btn2.setTitle("NO", forState: .Normal)
btn2.setTitleColor(MaterialColor.teal.darken1, forState: .Normal) btn2.setTitleColor(MaterialColor.blue.darken1, forState: .Normal)
// Add buttons to left side. // Add buttons to left side.
cardView.leftButtons = [btn1, btn2] cardView.leftButtons = [btn1, btn2]
...@@ -147,7 +148,7 @@ class ViewController: UIViewController { ...@@ -147,7 +148,7 @@ class ViewController: UIViewController {
cardView.pulseColor = MaterialColor.teal.lighten4 cardView.pulseColor = MaterialColor.teal.lighten4
// Image. // Image.
cardView.image = UIImage(named: "GraphKit")?.resize(toWidth: 300) cardView.image = UIImage(named: "GraphKit")
cardView.contentsGravity = .TopLeft cardView.contentsGravity = .TopLeft
// Title label. // Title label.
...@@ -179,5 +180,54 @@ class ViewController: UIViewController { ...@@ -179,5 +180,54 @@ class ViewController: UIViewController {
MaterialLayout.alignFromTop(view, child: cardView, top: 100) MaterialLayout.alignFromTop(view, child: cardView, top: 100)
MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 20, right: 20) MaterialLayout.alignToParentHorizontally(view, child: cardView, left: 20, right: 20)
} }
/**
:name: prepareCardViewButtonBar
:description: An example of the CardView with only buttons to create a button bar.
*/
private func prepareCardViewButtonBar() {
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)
}
} }
...@@ -240,7 +240,7 @@ class ViewController: UIViewController { ...@@ -240,7 +240,7 @@ class ViewController: UIViewController {
let navigationBarView: NavigationBarView = NavigationBarView() let navigationBarView: NavigationBarView = NavigationBarView()
// Stylize. // Stylize.
navigationBarView.backgroundColor = MaterialColor.blue.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 you info.plist file and set the following property.
......
...@@ -32,6 +32,10 @@ Adjust the alignment of the UI elements to create different configurations of th ...@@ -32,6 +32,10 @@ Adjust the alignment of the UI elements to create different configurations of th
![MaterialKitCardViewDataDriven](http://www.materialkit.io/MK/MaterialKitCardViewDataDriven.gif) ![MaterialKitCardViewDataDriven](http://www.materialkit.io/MK/MaterialKitCardViewDataDriven.gif)
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)
### ImageCardView ### ImageCardView
Bold and attractive, ImageCardView is Bold and attractive, ImageCardView is
......
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