Skip to content

M
Material
Commit 8fbe2490 by Daniel Dahan
Options

added MaterialApp demo to SideNavigationViewController

parent 6fb928ec
Showing with 172 additions and 117 deletions
Examples/Programmatic/MaterialSwitch/MaterialSwitch.xcodeproj/project.pbxproj
......@@ -11,8 +11,6 @@
96A71ED71C6FFF7300C0C4AE /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96A71ED61C6FFF7300C0C4AE /* ViewController.swift */; };
96A71EDC1C6FFF7300C0C4AE /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 96A71EDB1C6FFF7300C0C4AE /* Assets.xcassets */; };
96A71EDF1C6FFF7300C0C4AE /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 96A71EDD1C6FFF7300C0C4AE /* LaunchScreen.storyboard */; };
96A71F5A1C74E86B00C0C4AE /* Material.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 96A71F591C74E86B00C0C4AE /* Material.framework */; };
96A71F5B1C74E86B00C0C4AE /* Material.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 96A71F591C74E86B00C0C4AE /* Material.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
/* End PBXBuildFile section */
/* Begin PBXCopyFilesBuildPhase section */
......@@ -22,7 +20,6 @@
dstPath = "";
dstSubfolderSpec = 10;
files = (
96A71F5B1C74E86B00C0C4AE /* Material.framework in Embed Frameworks */,
);
name = "Embed Frameworks";
runOnlyForDeploymentPostprocessing = 0;
......@@ -36,7 +33,6 @@
96A71EDB1C6FFF7300C0C4AE /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
96A71EDE1C6FFF7300C0C4AE /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
96A71EE01C6FFF7300C0C4AE /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
96A71F591C74E86B00C0C4AE /* 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 */
/* Begin PBXFrameworksBuildPhase section */
......@@ -44,7 +40,6 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
96A71F5A1C74E86B00C0C4AE /* Material.framework in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
......@@ -54,7 +49,6 @@
96A71EC81C6FFF7300C0C4AE = {
isa = PBXGroup;
children = (
96A71F591C74E86B00C0C4AE /* Material.framework */,
96A71ED31C6FFF7300C0C4AE /* MaterialSwitch */,
96A71ED21C6FFF7300C0C4AE /* Products */,
);
......
Examples/Programmatic/NavigationBarView/NavigationBarView/ViewController.swift
......@@ -72,18 +72,18 @@ class ViewController: UIViewController {
// Menu button.
let menuButton: FlatButton = FlatButton()
menuButton.pulseColor = nil
menuButton.pulseColor = MaterialColor.white
menuButton.pulseScale = false
menuButton.setImage(image, forState: .Normal)
menuButton.setImage(image, forState: .Highlighted)
// Switch control.
let switchControl: MaterialSwitch = MaterialSwitch(state: .On, style: .LightContent)
let switchControl: MaterialSwitch = MaterialSwitch(state: .Off, style: .LightContent, size: .Small)
// Search button.
image = UIImage(named: "ic_search_white")
let searchButton: FlatButton = FlatButton()
searchButton.pulseColor = nil
searchButton.pulseColor = MaterialColor.white
searchButton.pulseScale = false
searchButton.setImage(image, forState: .Normal)
searchButton.setImage(image, forState: .Highlighted)
......@@ -95,6 +95,7 @@ class ViewController: UIViewController {
*/
navigationBarView.statusBarStyle = .LightContent
navigationBarView.delegate = self
navigationBarView.backgroundColor = MaterialColor.blue.base
navigationBarView.titleLabel = titleLabel
navigationBarView.detailLabel = detailLabel
......@@ -105,3 +106,10 @@ class ViewController: UIViewController {
}
}
/// NavigationBarViewDelegate methods.
extension ViewController: NavigationBarViewDelegate {
func navigationBarViewLayoutChanged(navigationBarView: NavigationBarView) {
print("Updated Frame: \(navigationBarView.frame)")
}
}
Examples/Programmatic/SearchBarView/SearchBarView/Assets.xcassets/ic_search_white.imageset/Contents.json deleted 100644 → 0
{
"images" : [
{
"idiom" : "universal",
"filename" : "ic_search_white.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "ic_search_white@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "ic_search_white@3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
\ No newline at end of file
Examples/Programmatic/SearchBarView/SearchBarView/ViewController.swift
......@@ -57,24 +57,20 @@ class ViewController: UIViewController {
var image = UIImage(named: "ic_close_white")
let clearButton: FlatButton = FlatButton()
clearButton.pulseColor = nil
clearButton.pulseColor = MaterialColor.white
clearButton.pulseScale = false
clearButton.setImage(image, forState: .Normal)
clearButton.setImage(image, forState: .Highlighted)
image = UIImage(named: "ic_menu_white")
let menuButton: FlatButton = FlatButton()
menuButton.pulseColor = nil
menuButton.pulseColor = MaterialColor.white
menuButton.pulseScale = false
menuButton.setImage(image, forState: .Normal)
menuButton.setImage(image, forState: .Highlighted)
image = UIImage(named: "ic_search_white")
let searchButton: FlatButton = FlatButton()
searchButton.pulseColor = nil
searchButton.pulseScale = false
searchButton.setImage(image, forState: .Normal)
searchButton.setImage(image, forState: .Highlighted)
// Switch control.
let switchControl: MaterialSwitch = MaterialSwitch(state: .Off, style: .LightContent, size: .Small)
/*
To lighten the status bar - add the
......@@ -83,17 +79,27 @@ class ViewController: UIViewController {
*/
searchBarView.statusBarStyle = .LightContent
searchBarView.delegate = self
searchBarView.backgroundColor = MaterialColor.blue.base
searchBarView.placeholder = "Search"
searchBarView.tintColor = MaterialColor.white
searchBarView.textColor = MaterialColor.white
searchBarView.placeholderTextColor = MaterialColor.white
searchBarView.textField.font = RobotoFont.regularWithSize(22)
searchBarView.textField.font = RobotoFont.regularWithSize(17)
searchBarView.clearButton = clearButton
searchBarView.leftControls = [menuButton]
searchBarView.rightControls = [searchButton]
searchBarView.rightControls = [switchControl]
view.addSubview(searchBarView)
}
}
/// SearchBarViewDelegate methods.
extension ViewController: SearchBarViewDelegate {
func searchBarViewLayoutChanged(searchBarView: SearchBarView) {
print("Updated Frame: \(searchBarView.frame)")
}
}
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/AppViewController.swift
......@@ -81,10 +81,10 @@ class AppViewController: NavigationViewController {
}
/**
Handles the search button click, which opens the
Handles the more button click, which opens the
SideNavigationViewController.
*/
func handleSearchButton() {
func handleMoreButton() {
sideNavigationViewController?.openRightView()
}
......@@ -122,7 +122,7 @@ class AppViewController: NavigationViewController {
private func prepareNavigationBarView() {
// Title label.
let titleLabel: UILabel = UILabel()
titleLabel.text = "Recipes"
titleLabel.text = "Inbox"
titleLabel.textAlignment = .Left
titleLabel.textColor = MaterialColor.white
titleLabel.font = RobotoFont.regularWithSize(17)
......@@ -146,15 +146,16 @@ class AppViewController: NavigationViewController {
menuButton.addTarget(self, action: "handleMenuButton", forControlEvents: .TouchUpInside)
// Switch control.
let switchControl: MaterialSwitch = MaterialSwitch(state: .Off, style: .LightContent)
let switchControl: MaterialSwitch = MaterialSwitch(state: .Off, style: .LightContent, size: .Small)
// Search button.
image = UIImage(named: "ic_search_white")
let searchButton: FlatButton = FlatButton()
searchButton.pulseColor = nil
searchButton.pulseScale = false
searchButton.setImage(image, forState: .Normal)
searchButton.setImage(image, forState: .Highlighted)
image = UIImage(named: "ic_more_vert_white")
let moreButton: FlatButton = FlatButton()
moreButton.pulseColor = nil
moreButton.pulseScale = false
moreButton.setImage(image, forState: .Normal)
moreButton.setImage(image, forState: .Highlighted)
moreButton.addTarget(self, action: "handleMoreButton", forControlEvents: .TouchUpInside)
/*
To lighten the status bar - add the
......@@ -166,7 +167,7 @@ class AppViewController: NavigationViewController {
navigationBarView.backgroundColor = MaterialColor.blue.base
navigationBarView.titleLabel = titleLabel
navigationBarView.leftControls = [menuButton]
navigationBarView.rightControls = [switchControl, searchButton]
navigationBarView.rightControls = [switchControl, moreButton]
}
/// Prepares the menuBackdropLayer.
......
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/Assets.xcassets/ic_search_white.imageset/Contents.json deleted 100644 → 0
{
"images" : [
{
"idiom" : "universal",
"filename" : "ic_search_white.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "ic_search_white@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "ic_search_white@3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
\ No newline at end of file
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/FeedViewController.swift
......@@ -130,7 +130,7 @@ extension FeedViewController: UITableViewDataSource {
header.addSubview(label)
label.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignToParent(header, child: label, left: 24)
MaterialLayout.alignToParent(header, child: label, left: navigationViewController!.navigationBarView.contentInset.left + navigationViewController!.navigationBarView.spacing)
return header
}
......
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/LeftViewController.swift
......@@ -53,13 +53,25 @@ class LeftViewController: UIViewController {
super.viewDidLoad()
prepareView()
prepareCells()
prepareProfileView()
prepareTableView()
}
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
/*
The dimensions of the view will not be updated by the side navigation
until the view appears, so loading a dyanimc width is better done here.
The user will not see this, as it is hidden, by the drawer being closed
when launching the app. There are other strategies to mitigate from this.
This is one approach that works nicely here.
*/
prepareProfileView()
}
/// General preparation statements.
private func prepareView() {
view.backgroundColor = MaterialColor.clear
view.backgroundColor = MaterialColor.blueGrey.darken4
}
/// Prepares the items that are displayed within the tableView.
......@@ -79,35 +91,32 @@ class LeftViewController: UIViewController {
let profileView: MaterialView = MaterialView()
profileView.image = UIImage(named: "Profile9")?.resize(toWidth: 72)
profileView.backgroundColor = MaterialColor.clear
profileView.shape = .Circle
profileView.borderColor = MaterialColor.white
profileView.borderWidth = 3
view.addSubview(profileView)
let nameLabel: UILabel = UILabel()
nameLabel.text = "Michael Smith"
nameLabel.textColor = MaterialColor.white
nameLabel.font = RobotoFont.mediumWithSize(18)
view.addSubview(nameLabel)
view.addSubview(backgroundView)
backgroundView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromTop(view, child: backgroundView)
MaterialLayout.alignToParentHorizontally(view, child: backgroundView)
MaterialLayout.height(view, child: backgroundView, height: 170)
backgroundView.addSubview(profileView)
profileView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromTopLeft(backgroundView, child: profileView, top: 20, left: 20)
MaterialLayout.size(backgroundView, child: profileView, width: 72, height: 72)
backgroundView.addSubview(nameLabel)
MaterialLayout.alignFromTopLeft(view, child: profileView, top: 30, left: (view.bounds.width - 72) / 2)
MaterialLayout.size(view, child: profileView, width: 72, height: 72)
nameLabel.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromBottom(backgroundView, child: nameLabel, bottom: 20)
MaterialLayout.alignToParentHorizontally(backgroundView, child: nameLabel, left: 20, right: 20)
MaterialLayout.alignFromTop(view, child: nameLabel, top: 130)
MaterialLayout.alignToParentHorizontally(view, child: nameLabel, left: 20, right: 20)
}
/// Prepares the tableView.
private func prepareTableView() {
tableView.registerClass(MaterialTableViewCell.self, forCellReuseIdentifier: "MaterialTableViewCell")
tableView.backgroundColor = MaterialColor.clear
tableView.dataSource = self
tableView.delegate = self
tableView.separatorStyle = .None
......@@ -132,15 +141,12 @@ extension LeftViewController: UITableViewDataSource {
cell.backgroundColor = MaterialColor.clear
let item: Cell = items[indexPath.row]
cell.selectionStyle = .None
cell.textLabel!.text = item.text
cell.textLabel!.font = RobotoFont.medium
cell.imageView!.image = UIImage(named: item.imageName)?.imageWithRenderingMode(.AlwaysTemplate)
cell.imageView!.tintColor = MaterialColor.cyan.darken4
cell.imageView!.tintColor = MaterialColor.grey.lighten2
if item.selected {
cell.textLabel!.textColor = MaterialColor.cyan.base
}
cell.textLabel!.textColor = item.selected ? MaterialColor.cyan.lighten5 : MaterialColor.grey.lighten3
return cell
}
......
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/RightViewController.swift
......@@ -58,7 +58,7 @@ class RightViewController: UIViewController {
/// General preparation statements.
private func prepareView() {
view.backgroundColor = MaterialColor.grey.darken4
view.backgroundColor = MaterialColor.blueGrey.darken4
}
override func viewWillAppear(animated: Bool) {
......@@ -104,16 +104,12 @@ extension RightViewController: UITableViewDataSource {
cell.backgroundColor = MaterialColor.clear
let item: Cell = items[indexPath.row]
cell.selectionStyle = .None
cell.textLabel!.text = item.text
cell.textLabel!.textColor = MaterialColor.white
cell.textLabel!.font = RobotoFont.medium
cell.imageView!.image = UIImage(named: item.imageName)?.imageWithRenderingMode(.AlwaysTemplate)
cell.imageView!.tintColor = MaterialColor.cyan.lighten4
cell.imageView!.tintColor = MaterialColor.grey.lighten2
if item.selected {
cell.textLabel!.textColor = MaterialColor.cyan.lighten3
}
cell.textLabel!.textColor = item.selected ? MaterialColor.cyan.lighten5 : MaterialColor.grey.lighten3
return cell
}
......
Material.podspec
Pod::Spec.new do |s|
s.name = 'Material'
s.version = '1.32.3'
s.version = '1.33.0'
s.license = 'BSD'
s.summary = 'Express your creativity with Material, an animation and graphics framework for Google\'s Material Design and Apple\'s Flat UI in Swift.'
s.homepage = 'http://cosmicmind.io'
......
README.md
......@@ -4,6 +4,8 @@
Express your creativity with Material, an animation and graphics framework for Google's Material Design and Apple's Flat UI in Swift.
![MaterialMockup](http://www.cosmicmind.io/MK/MaterialMockup.png)
## Notice
The CosmicMind Team would like to thank everyone for helping make Material a growing project. Since Material is growing, we feel it is time to ensure that standards are met. As we release new components and features, we will be converting older components to follow the standards we set forward. If this causes any issues for your project, please create an issue and we will help resolve it. This process is meant to be short and swift. We thank everyone in advance.
......@@ -56,6 +58,8 @@ Material is a growing project and will encounter changes throughout its developm
* Visit the Examples directory to see example projects using Material.
![MaterialApp](http://www.cosmicmind.io/MK/MaterialApp.gif)
## A Tour
* [MaterialColor](#materialcolor)
......@@ -67,7 +71,7 @@ Material is a growing project and will encounter changes throughout its developm
* [FlatButton](#flatbutton)
* [RaisedButton](#raisedbutton)
* [FabButton](#fabbutton)
* [MaterialSwitch](#materialswitch)
* [MaterialSwitch](#materialswitch) (New)
* [Menu](#menu) (New)
* [Grid](#grid) (New)
* [MaterialTableViewCell](#materialtableviewcell) (New)
......@@ -170,13 +174,17 @@ A FabButton is essential to Material Design's overall look. Below showcases its
![MaterialFabButton](http://www.cosmicmind.io/MK/MaterialFabButton.gif)
[Learn More About FabButton](https://github.com/CosmicMind/Material/wiki/FabButton)
<a name="materialswitch"></a>
## MaterialSwitch
MaterialSwitch is a fully customizable UIControl. It has auto centering when using AutoLayout, and makes for a great addition to the UIControl family of components.
MaterialSwitch is a fully customizable UIControl. It has auto centre alignment when using AutoLayout, and makes for a great addition to the UIControl family of components.
![MaterialMaterialSwitch](http://www.cosmicmind.io/MK/MaterialMaterialSwitch.gif)
[Learn More About MaterialSwitch](https://github.com/CosmicMind/Material/wiki/MaterialSwitch)
<a name="menu"></a>
## Menu
......@@ -227,12 +235,21 @@ UITableView is a popular and widely used view in iOS. Now the pulse animation an
<a name="navigationbarview"></a>
## NavigationBarView
A NavigationBarView is a fully featured navigation bar that supports orientation changes, background images, title and detail labels, both left and right button sets, and status bar settings.
A NavigationBarView is a fully featured navigation bar that supports orientation changes, background images, title and detail labels, both left and right UIControl sets, and status bar settings.
![MaterialNavigationBarView](http://www.cosmicmind.io/MK/MaterialNavigationBarView.gif)
[Learn More About NavigationBarView](https://github.com/CosmicMind/Material/wiki/NavigationBarView)
<a name="searchbarview"></a>
## SearchBarView
A SearchBarView is fully featured and supports orientation changes, background images, title and detail labels, both left and right UIControl sets, and status bar settings.
![MaterialSearchBarView](http://www.cosmicmind.io/MK/MaterialSearchBarView.gif)
[Learn More About SearchBarView](https://github.com/CosmicMind/Material/wiki/SearchBarView)
<a name="sidenavigationviewcontroller"></a>
## SideNavigationViewController
......
Sources/Info.plist
......@@ -15,7 +15,7 @@
<key>CFBundlePackageType</key>
<string>FMWK</string>
<key>CFBundleShortVersionString</key>
<string>1.32.3</string>
<string>1.33.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
......
Sources/NavigationBarView.swift
......@@ -36,6 +36,9 @@ public protocol NavigationBarViewDelegate : MaterialDelegate {
}
public class NavigationBarView : MaterialView {
/// Tracks the old frame size.
private var oldFrame: CGRect?
/// TitleView that holds the titleLabel and detailLabel.
public private(set) lazy var titleView: MaterialView = MaterialView()
......@@ -46,6 +49,35 @@ public class NavigationBarView : MaterialView {
}
}
/// A preset wrapper around contentInset.
public var contentInsetPreset: MaterialEdgeInset = .None {
didSet {
contentInset = MaterialEdgeInsetToValue(contentInsetPreset)
}
}
/// A wrapper around grid.contentInset.
public var contentInset: UIEdgeInsets {
get {
return grid.contentInset
}
set(value) {
grid.contentInset = contentInset
reloadView()
}
}
/// A wrapper around grid.spacing.
public var spacing: CGFloat {
get {
return grid.spacing
}
set(value) {
grid.spacing = spacing
reloadView()
}
}
/// Title label.
public var titleLabel: UILabel? {
didSet {
......@@ -159,7 +191,10 @@ public class NavigationBarView : MaterialView {
// Column adjustment.
width = UIScreen.mainScreen().bounds.width
grid.axis.columns = Int(width / 48)
(delegate as? NavigationBarViewDelegate)?.navigationBarViewLayoutChanged?(self)
if frame.origin.x != oldFrame!.origin.x || frame.origin.y != oldFrame!.origin.y || frame.width != oldFrame!.width || frame.height != oldFrame!.height {
(delegate as? NavigationBarViewDelegate)?.navigationBarViewLayoutChanged?(self)
oldFrame = frame
}
reloadView()
}
......@@ -253,6 +288,7 @@ public class NavigationBarView : MaterialView {
*/
public override func prepareView() {
super.prepareView()
oldFrame = frame
grid.spacing = 8
grid.axis.inherited = false
grid.contentInset.left = 8
......
Sources/SearchBarView.swift
......@@ -30,7 +30,15 @@
import UIKit
@objc(SearchBarViewDelegate)
public protocol SearchBarViewDelegate : MaterialDelegate {
optional func searchBarViewLayoutChanged(searchBarView: SearchBarView)
}
public class SearchBarView : MaterialView {
/// Tracks the old frame size.
private var oldFrame: CGRect?
/// The UITextField for the searchBar.
public private(set) lazy var textField: TextField = TextField()
......@@ -41,6 +49,35 @@ public class SearchBarView : MaterialView {
}
}
/// A preset wrapper around contentInset.
public var contentInsetPreset: MaterialEdgeInset = .None {
didSet {
contentInset = MaterialEdgeInsetToValue(contentInsetPreset)
}
}
/// A wrapper around grid.contentInset.
public var contentInset: UIEdgeInsets {
get {
return grid.contentInset
}
set(value) {
grid.contentInset = contentInset
reloadView()
}
}
/// A wrapper around grid.spacing.
public var spacing: CGFloat {
get {
return grid.spacing
}
set(value) {
grid.spacing = spacing
reloadView()
}
}
/// Left side UIControls.
public var leftControls: Array<UIControl>? {
didSet {
......@@ -138,18 +175,20 @@ public class SearchBarView : MaterialView {
// General alignment.
switch UIDevice.currentDevice().orientation {
case .LandscapeLeft, .LandscapeRight:
grid.contentInset.top = 0
grid.contentInset.bottom = 0
grid.contentInset.top = 8
height = 44
default:
grid.contentInset.top = 20
grid.contentInset.bottom = 8
grid.contentInset.top = 28
height = 64
}
// Column adjustment.
width = UIScreen.mainScreen().bounds.width
grid.axis.columns = Int(width / 48)
if frame.origin.x != oldFrame!.origin.x || frame.origin.y != oldFrame!.origin.y || frame.width != oldFrame!.width || frame.height != oldFrame!.height {
(delegate as? SearchBarViewDelegate)?.searchBarViewLayoutChanged?(self)
oldFrame = frame
}
reloadView()
}
......@@ -229,9 +268,9 @@ public class SearchBarView : MaterialView {
*/
public override func prepareView() {
super.prepareView()
oldFrame = frame
grid.spacing = 8
grid.axis.inherited = false
grid.contentInset.top = 20
grid.contentInset.left = 8
grid.contentInset.bottom = 8
grid.contentInset.right = 8
......
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