Skip to content

M
Material
Commit 297dc4db by Daniel Dahan
Options

preparation for Menu component

parent 10002a2c
Showing with 150 additions and 24 deletions
Examples/Programmatic/Menu/Menu/Assets.xcassets/ic_close_white.imageset/Contents.json 0 → 100644
{
"images" : [
{
"idiom" : "universal",
"filename" : "ic_close_white.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "ic_close_white_2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "ic_close_white_3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
\ No newline at end of file
Examples/Programmatic/Menu/Menu/Assets.xcassets/ic_create_white.imageset/Contents.json 0 → 100644
{
"images" : [
{
"idiom" : "universal",
"filename" : "ic_create_white.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "ic_create_white_2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "ic_create_white_3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
\ No newline at end of file
Examples/Programmatic/Menu/Menu/Assets.xcassets/ic_note_add_white.imageset/Contents.json 0 → 100644
{
"images" : [
{
"idiom" : "universal",
"filename" : "ic_note_add_white.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "ic_note_add_white_2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "ic_note_add_white_3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
\ No newline at end of file
Examples/Programmatic/Menu/Menu/Assets.xcassets/ic_photo_camera_white.imageset/Contents.json 0 → 100644
{
"images" : [
{
"idiom" : "universal",
"filename" : "ic_photo_camera_white.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "ic_photo_camera_white_2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "ic_photo_camera_white_3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
\ No newline at end of file
Examples/Programmatic/Menu/Menu/ViewController.swift
...@@ -29,40 +29,56 @@ ...@@ -29,40 +29,56 @@
*/ */
/** /**
This is an example of using the Menu component. It is designed to take any array
of buttons and provide a facility to animate them opened and closed as a group.
*/ */
import UIKit import UIKit
import Material import Material
class ViewController: UIViewController { class ViewController: UIViewController {
/// Menu component.
private var menu: Menu! private var menu: Menu!
/// Default spacing size
let spacing: CGFloat = 16
/// Base button diameter, otherwise default to buttonSize (48 x 48)
let diameter: CGFloat = 56
override func viewDidLoad() { override func viewDidLoad() {
super.viewDidLoad() super.viewDidLoad()
prepareView() prepareView()
prepareMenuExample() prepareMenuExample()
} }
override func viewWillLayoutSubviews() { /// Handle orientation.
super.viewWillLayoutSubviews()
}
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) { override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator) super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
// menuLayout.origin.x = size.width
// menuLayout.origin.y = size.height // Handle orientation change.
menu.reloadLayout() menu.origin = CGPointMake(view.bounds.height - diameter - spacing, view.bounds.width - diameter - spacing)
} }
/// Handle the base button touch event.
internal func handleOpenMenu() { internal func handleOpenMenu() {
if menu.opened { // Only trigger open and close animations when enabled.
menu.close() if menu.enabled {
} else { let image: UIImage?
// (menuLayout.items?.first?.button as? MaterialButton)?.animate(MaterialAnimation.rotate(1)) if menu.opened {
menu.open() { (button: UIButton) in menu.close()
(button as? MaterialButton)?.pulse() image = UIImage(named: "ic_add_white")
} else {
menu.open() { (button: UIButton) in
(button as? MaterialButton)?.pulse()
}
image = UIImage(named: "ic_close_white")
} }
// Add a nice rotation animation to the base button.
(menu.buttons?.first as? MaterialButton)?.animate(MaterialAnimation.rotate(1))
menu.buttons?.first?.setImage(image, forState: .Normal)
menu.buttons?.first?.setImage(image, forState: .Highlighted)
} }
} }
...@@ -73,38 +89,43 @@ class ViewController: UIViewController { ...@@ -73,38 +89,43 @@ class ViewController: UIViewController {
/// Prepares the Menu example. /// Prepares the Menu example.
private func prepareMenuExample() { private func prepareMenuExample() {
let image: UIImage? = UIImage(named: "ic_add_white") var image: UIImage? = UIImage(named: "ic_add_white")
let btn1: FabButton = FabButton() let btn1: FabButton = FabButton()
btn1.depth = .Depth1 /**
Remove the pulse animation, so the rotation animation
doesn't seem like too much with the pulse animation.
*/
btn1.pulseColor = nil
btn1.setImage(image, forState: .Normal) btn1.setImage(image, forState: .Normal)
btn1.setImage(image, forState: .Highlighted) btn1.setImage(image, forState: .Highlighted)
btn1.addTarget(self, action: "handleOpenMenu", forControlEvents: .TouchUpInside) btn1.addTarget(self, action: "handleOpenMenu", forControlEvents: .TouchUpInside)
view.addSubview(btn1) view.addSubview(btn1)
image = UIImage(named: "ic_create_white")
let btn2: FabButton = FabButton() let btn2: FabButton = FabButton()
btn2.depth = .Depth1
btn2.backgroundColor = MaterialColor.blue.base btn2.backgroundColor = MaterialColor.blue.base
btn2.setImage(image, forState: .Normal) btn2.setImage(image, forState: .Normal)
btn2.setImage(image, forState: .Highlighted) btn2.setImage(image, forState: .Highlighted)
view.addSubview(btn2) view.addSubview(btn2)
image = UIImage(named: "ic_photo_camera_white")
let btn3: FabButton = FabButton() let btn3: FabButton = FabButton()
btn3.depth = .Depth1
btn3.backgroundColor = MaterialColor.green.base btn3.backgroundColor = MaterialColor.green.base
btn3.setImage(image, forState: .Normal) btn3.setImage(image, forState: .Normal)
btn3.setImage(image, forState: .Highlighted) btn3.setImage(image, forState: .Highlighted)
view.addSubview(btn3) view.addSubview(btn3)
image = UIImage(named: "ic_note_add_white")
let btn4: FabButton = FabButton() let btn4: FabButton = FabButton()
btn4.depth = .Depth1 btn4.backgroundColor = MaterialColor.amber.base
btn4.backgroundColor = MaterialColor.yellow.base
btn4.setImage(image, forState: .Normal) btn4.setImage(image, forState: .Normal)
btn4.setImage(image, forState: .Highlighted) btn4.setImage(image, forState: .Highlighted)
view.addSubview(btn4) view.addSubview(btn4)
menu = Menu(origin: CGPointMake(100, 100)) // Initialize the menu and setup the configuration options.
menu.direction = .Down menu = Menu(origin: CGPointMake(view.bounds.width - diameter - spacing, view.bounds.height - diameter - spacing))
menu.baseSize = CGSizeMake(88, 88) menu.direction = .Up
menu.baseSize = CGSizeMake(diameter, diameter)
menu.buttons = [btn1, btn2, btn3, btn4] menu.buttons = [btn1, btn2, btn3, btn4]
} }
} }
......
README.md
...@@ -57,6 +57,7 @@ Material is a growing project and will encounter changes throughout its developm ...@@ -57,6 +57,7 @@ Material is a growing project and will encounter changes throughout its developm
* [FlatButton](#flatbutton) * [FlatButton](#flatbutton)
* [RaisedButton](#raisedbutton) * [RaisedButton](#raisedbutton)
* [FabButton](#fabbutton) * [FabButton](#fabbutton)
* [Menu](#menu)
* [NavigationBarView](#navigationbarview) * [NavigationBarView](#navigationbarview)
* [SideNavigationViewController](#sidenavigationviewcontroller) * [SideNavigationViewController](#sidenavigationviewcontroller)
* [CardView](#cardview) * [CardView](#cardview)
...@@ -75,6 +76,7 @@ Material is a growing project and will encounter changes throughout its developm ...@@ -75,6 +76,7 @@ Material is a growing project and will encounter changes throughout its developm
* ProgressBar (circular and horizontal) * ProgressBar (circular and horizontal)
* DatePicker * DatePicker
* TimePicker * TimePicker
* Switch Control
* More Examples * More Examples
<a name="materialcolor"></a> <a name="materialcolor"></a>
...@@ -159,7 +161,14 @@ A FabButton is essential to Material Design's overall look. Below showcases its ...@@ -159,7 +161,14 @@ A FabButton is essential to Material Design's overall look. Below showcases its
![MaterialFabButton](http://www.cosmicmind.io/MK/MaterialFabButton.gif) ![MaterialFabButton](http://www.cosmicmind.io/MK/MaterialFabButton.gif)
[Learn More About FabButton](https://github.com/CosmicMind/Material/wiki/FabButton) <a name="menu"></a>
## Menu
A Menu manages a group of UIButtons that may be animated open in the Up, Down, Left, and Right directions. The animations are fully customizable.
![MaterialFabButton](http://www.cosmicmind.io/MK/MaterialMenu.gif)
[Learn More About Menu](https://github.com/CosmicMind/Material/wiki/Menu)
<a name="navigationbarview"></a> <a name="navigationbarview"></a>
## NavigationBarView ## NavigationBarView
......
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