Skip to content

M
Material
Commit f9162494 by Daniel Dahan
Options

updated SideNavigationViewController example to use Grid for the LeftViewController

parent da02b950
Showing with 110 additions and 80 deletions
Examples/Programmatic/MenuView/MenuView/ViewController.swift
...@@ -38,7 +38,7 @@ import Material ...@@ -38,7 +38,7 @@ import Material
class ViewController: UIViewController { class ViewController: UIViewController {
/// MenuView reference. /// MenuView reference.
private var menuView: MenuView! private lazy var menuView: MenuView = MenuView()
/// Default spacing size /// Default spacing size
let spacing: CGFloat = 16 let spacing: CGFloat = 16
...@@ -52,16 +52,9 @@ class ViewController: UIViewController { ...@@ -52,16 +52,9 @@ class ViewController: UIViewController {
override func viewDidLoad() { override func viewDidLoad() {
super.viewDidLoad() super.viewDidLoad()
prepareView() prepareView()
prepareMenuView()
prepareMenuViewExample() prepareMenuViewExample()
} }
/// Handle orientation.
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)
}
/// Handle the menuView touch event. /// Handle the menuView touch event.
internal func handleMenu() { internal func handleMenu() {
let image: UIImage? let image: UIImage?
...@@ -93,13 +86,6 @@ class ViewController: UIViewController { ...@@ -93,13 +86,6 @@ class ViewController: UIViewController {
view.backgroundColor = MaterialColor.white view.backgroundColor = MaterialColor.white
} }
/// Prepares the MenuView.
private func prepareMenuView() {
if nil == menuView {
menuView = MenuView()
}
}
/// Prepares the MenuView example. /// Prepares the MenuView example.
private func prepareMenuViewExample() { private func prepareMenuViewExample() {
var image: UIImage? = UIImage(named: "ic_add_white")?.imageWithRenderingMode(.AlwaysTemplate) var image: UIImage? = UIImage(named: "ic_add_white")?.imageWithRenderingMode(.AlwaysTemplate)
......
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController.xcodeproj/project.pbxproj
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
9642FA251C1B50E700022BC6 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 9642FA231C1B50E700022BC6 /* LaunchScreen.storyboard */; }; 9642FA251C1B50E700022BC6 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 9642FA231C1B50E700022BC6 /* LaunchScreen.storyboard */; };
9642FA331C1B909700022BC6 /* LeftViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9642FA321C1B909700022BC6 /* LeftViewController.swift */; }; 9642FA331C1B909700022BC6 /* LeftViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9642FA321C1B909700022BC6 /* LeftViewController.swift */; };
967585381C569AA9001E4268 /* RightViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 967585371C569AA9001E4268 /* RightViewController.swift */; }; 967585381C569AA9001E4268 /* RightViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 967585371C569AA9001E4268 /* RightViewController.swift */; };
96A71F1E1C71960900C0C4AE /* Material.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 96A71F1D1C71960900C0C4AE /* Material.framework */; };
96A71F1F1C71960900C0C4AE /* Material.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 96A71F1D1C71960900C0C4AE /* Material.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
/* End PBXBuildFile section */ /* End PBXBuildFile section */
/* Begin PBXCopyFilesBuildPhase section */ /* Begin PBXCopyFilesBuildPhase section */
...@@ -22,6 +24,7 @@ ...@@ -22,6 +24,7 @@
dstPath = ""; dstPath = "";
dstSubfolderSpec = 10; dstSubfolderSpec = 10;
files = ( files = (
96A71F1F1C71960900C0C4AE /* Material.framework in Embed Frameworks */,
); );
name = "Embed Frameworks"; name = "Embed Frameworks";
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
...@@ -37,6 +40,7 @@ ...@@ -37,6 +40,7 @@
9642FA261C1B50E700022BC6 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; }; 9642FA261C1B50E700022BC6 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
9642FA321C1B909700022BC6 /* LeftViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = LeftViewController.swift; sourceTree = "<group>"; }; 9642FA321C1B909700022BC6 /* LeftViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = LeftViewController.swift; sourceTree = "<group>"; };
967585371C569AA9001E4268 /* RightViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RightViewController.swift; sourceTree = "<group>"; }; 967585371C569AA9001E4268 /* RightViewController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = RightViewController.swift; sourceTree = "<group>"; };
96A71F1D1C71960900C0C4AE /* Material.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; name = Material.framework; path = "/Users/danieldahan/Library/Developer/Xcode/DerivedData/Material-hbpnflxhoouqxebjcyhbbhqyesjd/Build/Products/Debug-iphoneos/Material.framework"; sourceTree = "<absolute>"; };
/* End PBXFileReference section */ /* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */ /* Begin PBXFrameworksBuildPhase section */
...@@ -44,6 +48,7 @@ ...@@ -44,6 +48,7 @@
isa = PBXFrameworksBuildPhase; isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647; buildActionMask = 2147483647;
files = ( files = (
96A71F1E1C71960900C0C4AE /* Material.framework in Frameworks */,
); );
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
}; };
...@@ -53,6 +58,7 @@ ...@@ -53,6 +58,7 @@
9642FA0E1C1B50E700022BC6 = { 9642FA0E1C1B50E700022BC6 = {
isa = PBXGroup; isa = PBXGroup;
children = ( children = (
96A71F1D1C71960900C0C4AE /* Material.framework */,
9642FA191C1B50E700022BC6 /* SideNavigationViewController */, 9642FA191C1B50E700022BC6 /* SideNavigationViewController */,
9642FA181C1B50E700022BC6 /* Products */, 9642FA181C1B50E700022BC6 /* Products */,
); );
......
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/Assets.xcassets/MaterialBackground.imageset/Contents.json deleted 100644 → 0
{
"images" : [
{
"idiom" : "universal",
"filename" : "MaterialBackground.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x"
},
{
"idiom" : "universal",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
\ No newline at end of file
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/LeftViewController.swift
...@@ -55,11 +55,16 @@ class LeftViewController: UIViewController { ...@@ -55,11 +55,16 @@ class LeftViewController: UIViewController {
prepareItems() prepareItems()
prepareProfileView() prepareProfileView()
prepareTableView() prepareTableView()
// Reload the Grid layout.
view.grid.reloadLayout()
} }
/// General preparation statements. /// General preparation statements.
private func prepareView() { private func prepareView() {
view.backgroundColor = MaterialColor.clear view.backgroundColor = MaterialColor.clear
view.grid.axis.direction = .None
view.grid.views = []
} }
/// Prepares the items that are displayed within the tableView. /// Prepares the items that are displayed within the tableView.
...@@ -74,35 +79,29 @@ class LeftViewController: UIViewController { ...@@ -74,35 +79,29 @@ class LeftViewController: UIViewController {
/// Prepares profile view. /// Prepares profile view.
private func prepareProfileView() { private func prepareProfileView() {
let backgroundView: MaterialView = MaterialView() let imageView: MaterialView = MaterialView()
backgroundView.image = UIImage(named: "MaterialBackground") imageView.image = UIImage(named: "Profile9")?.resize(toWidth: 72)
imageView.shape = .Circle
let profileView: MaterialView = MaterialView() imageView.borderColor = MaterialColor.white
profileView.image = UIImage(named: "Profile9")?.resize(toWidth: 72) imageView.borderWidth = 3
profileView.shape = .Circle view.addSubview(imageView)
profileView.borderColor = MaterialColor.white
profileView.borderWidth = 3
let nameLabel: UILabel = UILabel() let nameLabel: UILabel = UILabel()
nameLabel.text = "Michael Smith" nameLabel.text = "Michael Smith"
nameLabel.textColor = MaterialColor.white nameLabel.textColor = MaterialColor.white
nameLabel.font = RobotoFont.mediumWithSize(18) nameLabel.font = RobotoFont.mediumWithSize(18)
view.addSubview(backgroundView) view.addSubview(nameLabel)
backgroundView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromTop(view, child: backgroundView)
MaterialLayout.alignToParentHorizontally(view, child: backgroundView)
MaterialLayout.height(view, child: backgroundView, height: 170)
backgroundView.addSubview(profileView) nameLabel.grid.rows = 1
profileView.translatesAutoresizingMaskIntoConstraints = false nameLabel.grid.offset.rows = 3
MaterialLayout.alignFromTopLeft(backgroundView, child: profileView, top: 20, left: 20)
MaterialLayout.size(backgroundView, child: profileView, width: 72, height: 72)
backgroundView.addSubview(nameLabel) view.grid.views?.append(nameLabel)
nameLabel.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromBottom(backgroundView, child: nameLabel, bottom: 20) print(nameLabel.frame.width)
MaterialLayout.alignToParentHorizontally(backgroundView, child: nameLabel, left: 20, right: 20) imageView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromTopLeft(view, child: imageView, top: (nameLabel.frame.origin.y - 72) / 2 , left: (nameLabel.frame.width - 72) / 2)
MaterialLayout.size(view, child: imageView, width: 72, height: 72)
} }
/// Prepares the tableView. /// Prepares the tableView.
...@@ -112,10 +111,11 @@ class LeftViewController: UIViewController { ...@@ -112,10 +111,11 @@ class LeftViewController: UIViewController {
tableView.delegate = self tableView.delegate = self
tableView.separatorStyle = .None tableView.separatorStyle = .None
// Use MaterialLayout to easily align the tableView.
view.addSubview(tableView) view.addSubview(tableView)
tableView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignToParent(view, child: tableView, top: 170) tableView.grid.rows = 8
tableView.grid.offset.rows = 4
view.grid.views?.append(tableView)
} }
} }
......
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/MainViewController.swift
...@@ -48,6 +48,9 @@ class MainViewController: UIViewController { ...@@ -48,6 +48,9 @@ class MainViewController: UIViewController {
/// A tableView used to display Bond entries. /// A tableView used to display Bond entries.
private let tableView: UITableView = UITableView() private let tableView: UITableView = UITableView()
/// MenuView.
let menuView: MenuView = MenuView()
/// A list of all the Author Bond types. /// A list of all the Author Bond types.
private var items: Array<Item> = Array<Item>() private var items: Array<Item> = Array<Item>()
...@@ -57,7 +60,7 @@ class MainViewController: UIViewController { ...@@ -57,7 +60,7 @@ class MainViewController: UIViewController {
prepareItems() prepareItems()
prepareTableView() prepareTableView()
prepareNavigationBarView() prepareNavigationBarView()
prepareAddButton() prepareMenuView()
} }
override func viewWillAppear(animated: Bool) { override func viewWillAppear(animated: Bool) {
...@@ -89,6 +92,27 @@ class MainViewController: UIViewController { ...@@ -89,6 +92,27 @@ class MainViewController: UIViewController {
sideNavigationViewController?.openRightView() sideNavigationViewController?.openRightView()
} }
/// Handle the menuView touch event.
func handleMenu() {
let image: UIImage?
if menuView.menu.opened {
menuView.menu.close()
image = UIImage(named: "ic_add_white")
} else {
menuView.menu.open() { (v: UIView) in
(v as? MaterialButton)?.pulse()
}
image = UIImage(named: "ic_close_white")
}
// Add a nice rotation animation to the base button.
let first: MaterialButton? = menuView.menu.views?.first as? MaterialButton
first?.animate(MaterialAnimation.rotate(1))
first?.setImage(image, forState: .Normal)
first?.setImage(image, forState: .Highlighted)
}
/// Prepares view. /// Prepares view.
private func prepareView() { private func prepareView() {
view.backgroundColor = MaterialColor.white view.backgroundColor = MaterialColor.white
...@@ -121,7 +145,7 @@ class MainViewController: UIViewController { ...@@ -121,7 +145,7 @@ class MainViewController: UIViewController {
/// Prepares the navigationBarView. /// Prepares the navigationBarView.
private func prepareNavigationBarView() { private func prepareNavigationBarView() {
let navigationBarView: NavigationBarView = NavigationBarView() let navigationBarView: NavigationBarView = NavigationBarView()
navigationBarView.backgroundColor = MaterialColor.cyan.base navigationBarView.backgroundColor = MaterialColor.blue.base
/* /*
To lighten the status bar - add the To lighten the status bar - add the
...@@ -137,33 +161,33 @@ class MainViewController: UIViewController { ...@@ -137,33 +161,33 @@ class MainViewController: UIViewController {
titleLabel.textColor = MaterialColor.white titleLabel.textColor = MaterialColor.white
titleLabel.font = RobotoFont.regularWithSize(22) titleLabel.font = RobotoFont.regularWithSize(22)
navigationBarView.titleLabel = titleLabel navigationBarView.titleLabel = titleLabel
navigationBarView.titleLabelInset.left = 64
// Menu button. // Menu button.
let img1: UIImage? = UIImage(named: "ic_menu_white")?.imageWithRenderingMode(.AlwaysTemplate) let img1: UIImage? = UIImage(named: "ic_menu_white")
let menuButton: FlatButton = FlatButton() let menuButton: FlatButton = FlatButton()
menuButton.pulseColor = MaterialColor.white menuButton.pulseColor = MaterialColor.white
menuButton.pulseScale = false menuButton.pulseScale = false
menuButton.setImage(img1, forState: .Normal) menuButton.setImage(img1, forState: .Normal)
menuButton.setImage(img1, forState: .Highlighted) menuButton.setImage(img1, forState: .Highlighted)
menuButton.tintColor = MaterialColor.cyan.darken4
menuButton.addTarget(self, action: "handleMenuButton", forControlEvents: .TouchUpInside) menuButton.addTarget(self, action: "handleMenuButton", forControlEvents: .TouchUpInside)
// Add menuButton to left side. // Add menuButton to left side.
navigationBarView.leftButtons = [menuButton] navigationBarView.leftControls = [menuButton]
// MaterialSwitch control.
let materialSwitch: MaterialSwitch = MaterialSwitch(state: .Off, style: .Light, size: .Normal)
// Search button. // Search button.
let img2: UIImage? = UIImage(named: "ic_more_vert_white")?.imageWithRenderingMode(.AlwaysTemplate) let img2: UIImage? = UIImage(named: "ic_more_vert_white")
let searchButton: FlatButton = FlatButton() let searchButton: FlatButton = FlatButton()
searchButton.pulseColor = MaterialColor.white searchButton.pulseColor = MaterialColor.white
searchButton.pulseScale = false searchButton.pulseScale = false
searchButton.setImage(img2, forState: .Normal) searchButton.setImage(img2, forState: .Normal)
searchButton.setImage(img2, forState: .Highlighted) searchButton.setImage(img2, forState: .Highlighted)
searchButton.tintColor = MaterialColor.cyan.darken4
searchButton.addTarget(self, action: "handleSearchButton", forControlEvents: .TouchUpInside) searchButton.addTarget(self, action: "handleSearchButton", forControlEvents: .TouchUpInside)
// Add searchButton to right side. // Add searchButton to right side.
navigationBarView.rightButtons = [searchButton] navigationBarView.rightControls = [materialSwitch, searchButton]
// To support orientation changes, use MaterialLayout. // To support orientation changes, use MaterialLayout.
view.addSubview(navigationBarView) view.addSubview(navigationBarView)
...@@ -174,17 +198,52 @@ class MainViewController: UIViewController { ...@@ -174,17 +198,52 @@ class MainViewController: UIViewController {
} }
/// Prepares the add button. /// Prepares the add button.
func prepareAddButton() { private func prepareMenuView() {
let image: UIImage? = UIImage(named: "ic_add_white") /// MenuView diameter.
let button: FabButton = FabButton() let diameter: CGFloat = 56
button.backgroundColor = MaterialColor.blue.accent3
button.setImage(image, forState: .Normal) var image: UIImage? = UIImage(named: "ic_add_white")
button.setImage(image, forState: .Highlighted) let btn1: FabButton = FabButton()
/**
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: .Highlighted)
btn1.addTarget(self, action: "handleMenu", forControlEvents: .TouchUpInside)
menuView.addSubview(btn1)
image = UIImage(named: "ic_create_white")
let btn2: FabButton = FabButton()
btn2.backgroundColor = MaterialColor.blue.base
btn2.setImage(image, forState: .Normal)
btn2.setImage(image, forState: .Highlighted)
menuView.addSubview(btn2)
image = UIImage(named: "ic_photo_camera_white")
let btn3: FabButton = FabButton()
btn3.backgroundColor = MaterialColor.green.base
btn3.setImage(image, forState: .Normal)
btn3.setImage(image, forState: .Highlighted)
menuView.addSubview(btn3)
image = UIImage(named: "ic_note_add_white")
let btn4: FabButton = FabButton()
btn4.backgroundColor = MaterialColor.amber.base
btn4.setImage(image, forState: .Normal)
btn4.setImage(image, forState: .Highlighted)
menuView.addSubview(btn4)
// Initialize the menu and setup the configuration options.
menuView.menu.direction = .Up
menuView.menu.baseViewSize = CGSizeMake(diameter, diameter)
menuView.menu.views = [btn1, btn2, btn3, btn4]
view.addSubview(button) view.addSubview(menuView)
button.translatesAutoresizingMaskIntoConstraints = false menuView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromBottomRight(view, child: button, bottom: 16, right: 16) MaterialLayout.size(view, child: menuView, width: diameter, height: diameter)
MaterialLayout.size(view, child: button, width: 56, height: 56) MaterialLayout.alignFromBottomRight(view, child: menuView, bottom: 16, right: 16)
} }
} }
......
Sources/MenuView.swift
...@@ -46,6 +46,7 @@ public class MenuView : MaterialPulseView { ...@@ -46,6 +46,7 @@ public class MenuView : MaterialPulseView {
pulseColor = nil pulseColor = nil
pulseScale = false pulseScale = false
clipsToBounds = false clipsToBounds = false
backgroundColor = nil
} }
public override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? { public override func hitTest(point: CGPoint, withEvent event: UIEvent?) -> UIView? {
......
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