Skip to content

M
Material
Commit 4af52895 by Daniel Dahan
Options

updated SideNavigationViewController programmatic example

parent d239b1bc
Showing with 104 additions and 41 deletions
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/Assets.xcassets/ic_materialkit_white.imageset/Contents.json → Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/Assets.xcassets/Profile9.imageset/Contents.json
...@@ -2,17 +2,15 @@ ...@@ -2,17 +2,15 @@
"images" : [ "images" : [
{ {
"idiom" : "universal", "idiom" : "universal",
"filename" : "ic_materialkit_white.png", "filename" : "Profile9.jpg",
"scale" : "1x" "scale" : "1x"
}, },
{ {
"idiom" : "universal", "idiom" : "universal",
"filename" : "ic_materialkit_white@2x.png",
"scale" : "2x" "scale" : "2x"
}, },
{ {
"idiom" : "universal", "idiom" : "universal",
"filename" : "ic_materialkit_white@3x.png",
"scale" : "3x" "scale" : "3x"
} }
], ],
......
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/Assets.xcassets/ic_add_white.imageset/Contents.json 0 → 100644
{
"images" : [
{
"idiom" : "universal",
"filename" : "ic_add_white.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "ic_add_white_2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "ic_add_white_3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
\ No newline at end of file
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/MainViewController.swift
...@@ -57,7 +57,7 @@ class MainViewController: UIViewController { ...@@ -57,7 +57,7 @@ class MainViewController: UIViewController {
prepareItems() prepareItems()
prepareTableView() prepareTableView()
prepareNavigationBarView() prepareNavigationBarView()
prepareMaterialKitButton() prepareAddButton()
} }
override func viewWillAppear(animated: Bool) { override func viewWillAppear(animated: Bool) {
...@@ -112,7 +112,7 @@ class MainViewController: UIViewController { ...@@ -112,7 +112,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.blue.base navigationBarView.backgroundColor = MaterialColor.cyan.base
/* /*
To lighten the status bar - add the To lighten the status bar - add the
...@@ -126,40 +126,33 @@ class MainViewController: UIViewController { ...@@ -126,40 +126,33 @@ class MainViewController: UIViewController {
titleLabel.text = "Inbox" titleLabel.text = "Inbox"
titleLabel.textAlignment = .Left titleLabel.textAlignment = .Left
titleLabel.textColor = MaterialColor.white titleLabel.textColor = MaterialColor.white
titleLabel.font = RobotoFont.regularWithSize(20) titleLabel.font = RobotoFont.regularWithSize(22)
navigationBarView.titleLabel = titleLabel navigationBarView.titleLabel = titleLabel
navigationBarView.titleLabelInset.left = 64 navigationBarView.titleLabelInset.left = 64
// Detail label.
let detailLabel: UILabel = UILabel()
detailLabel.text = "Count: \(items.count)"
detailLabel.textAlignment = .Left
detailLabel.textColor = MaterialColor.white
detailLabel.font = RobotoFont.regularWithSize(12)
navigationBarView.detailLabel = detailLabel
navigationBarView.detailLabelInset.left = 64
// Menu button. // Menu button.
let img1: UIImage? = UIImage(named: "ic_menu_white") let img1: UIImage? = UIImage(named: "ic_menu_white")?.imageWithRenderingMode(.AlwaysTemplate)
let menuButton: FlatButton = FlatButton() let menuButton: FlatButton = FlatButton()
menuButton.pulseColor = MaterialColor.white menuButton.pulseColor = MaterialColor.white
menuButton.pulseFill = true menuButton.pulseFill = true
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.leftButtons = [menuButton]
// Search button. // Search button.
let img2: UIImage? = UIImage(named: "ic_search_white") let img2: UIImage? = UIImage(named: "ic_search_white")?.imageWithRenderingMode(.AlwaysTemplate)
let searchButton: FlatButton = FlatButton() let searchButton: FlatButton = FlatButton()
searchButton.pulseColor = MaterialColor.white searchButton.pulseColor = MaterialColor.white
searchButton.pulseFill = true searchButton.pulseFill = true
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
// Add searchButton to right side. // Add searchButton to right side.
navigationBarView.rightButtons = [searchButton] navigationBarView.rightButtons = [searchButton]
...@@ -172,10 +165,11 @@ class MainViewController: UIViewController { ...@@ -172,10 +165,11 @@ class MainViewController: UIViewController {
MaterialLayout.height(view, child: navigationBarView, height: 70) MaterialLayout.height(view, child: navigationBarView, height: 70)
} }
/// Prepares the MaterialKit button. /// Prepares the add button.
func prepareMaterialKitButton() { func prepareAddButton() {
let image: UIImage? = UIImage(named: "ic_materialkit_white") let image: UIImage? = UIImage(named: "ic_add_white")
let button: FabButton = FabButton() let button: FabButton = FabButton()
button.backgroundColor = MaterialColor.deepPurple.accent3
button.setImage(image, forState: .Normal) button.setImage(image, forState: .Normal)
button.setImage(image, forState: .Highlighted) button.setImage(image, forState: .Highlighted)
...@@ -205,27 +199,31 @@ extension MainViewController: UITableViewDataSource { ...@@ -205,27 +199,31 @@ extension MainViewController: UITableViewDataSource {
let item: Item = items[indexPath.row] let item: Item = items[indexPath.row]
cell.selectionStyle = .None cell.selectionStyle = .None
cell.textLabel!.text = item.text cell.textLabel!.text = item.text
cell.textLabel!.font = RobotoFont.regular
cell.detailTextLabel!.text = item.detail cell.detailTextLabel!.text = item.detail
cell.imageView!.image = item.image?.resize(toWidth: 36) cell.detailTextLabel!.font = RobotoFont.regular
cell.imageView!.layer.cornerRadius = 18 cell.detailTextLabel!.textColor = MaterialColor.grey.darken1
cell.imageView!.image = item.image?.resize(toWidth: 40)
cell.imageView!.layer.cornerRadius = 20
return cell return cell
} }
/// Prepares the header within the tableView. /// Prepares the header within the tableView.
func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? { func tableView(tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
let view = UIView() let header = UIView(frame: CGRectMake(0, 0, view.bounds.width, 48))
view.backgroundColor = MaterialColor.white header.backgroundColor = MaterialColor.white
let label: UILabel = UILabel() let label: UILabel = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false label.font = RobotoFont.medium
label.font = RobotoFont.mediumWithSize(16) label.textColor = MaterialColor.grey.darken1
label.textColor = MaterialColor.grey.base
label.text = "Today" label.text = "Today"
view.addSubview(label) header.addSubview(label)
MaterialLayout.alignToParent(view, child: label, left: 16) label.translatesAutoresizingMaskIntoConstraints = false
return view MaterialLayout.alignToParent(header, child: label, left: 24)
return header
} }
} }
......
Examples/Programmatic/SideNavigationViewController/SideNavigationViewController/SideViewController.swift
...@@ -38,7 +38,8 @@ import MaterialKit ...@@ -38,7 +38,8 @@ import MaterialKit
private struct Item { private struct Item {
var text: String var text: String
var image: UIImage? var imageName: String
var selected: Bool
} }
class SideViewController: UIViewController { class SideViewController: UIViewController {
...@@ -63,12 +64,12 @@ class SideViewController: UIViewController { ...@@ -63,12 +64,12 @@ class SideViewController: UIViewController {
/// Prepares the items that are displayed within the tableView. /// Prepares the items that are displayed within the tableView.
private func prepareItems() { private func prepareItems() {
items.append(Item(text: "Inbox", image: UIImage(named: "ic_inbox"))) items.append(Item(text: "Inbox", imageName: "ic_inbox", selected: true))
items.append(Item(text: "Today", image: UIImage(named: "ic_today"))) items.append(Item(text: "Today", imageName: "ic_today", selected: false))
items.append(Item(text: "Bookmarks", image: UIImage(named: "ic_book"))) items.append(Item(text: "Bookmarks", imageName: "ic_book", selected: false))
items.append(Item(text: "Work", image: UIImage(named: "ic_work"))) items.append(Item(text: "Work", imageName: "ic_work", selected: false))
items.append(Item(text: "Contacts", image: UIImage(named: "ic_contacts"))) items.append(Item(text: "Contacts", imageName: "ic_contacts", selected: false))
items.append(Item(text: "Settings", image: UIImage(named: "ic_settings"))) items.append(Item(text: "Settings", imageName: "ic_settings", selected: false))
} }
/// Prepares profile view. /// Prepares profile view.
...@@ -76,11 +77,32 @@ class SideViewController: UIViewController { ...@@ -76,11 +77,32 @@ class SideViewController: UIViewController {
let backgroundView: MaterialView = MaterialView() let backgroundView: MaterialView = MaterialView()
backgroundView.image = UIImage(named: "ProfileSideNavBackground") backgroundView.image = UIImage(named: "ProfileSideNavBackground")
let profileView: MaterialView = MaterialView()
profileView.image = UIImage(named: "Profile9")?.resize(toWidth: 72)
profileView.shape = .Circle
profileView.borderColor = MaterialColor.white
profileView.borderWidth = .Border3
let nameLabel: UILabel = UILabel()
nameLabel.text = "Michael Smith"
nameLabel.textColor = MaterialColor.white
nameLabel.font = RobotoFont.mediumWithSize(18)
view.addSubview(backgroundView) view.addSubview(backgroundView)
backgroundView.translatesAutoresizingMaskIntoConstraints = false backgroundView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromTop(view, child: backgroundView) MaterialLayout.alignFromTop(view, child: backgroundView)
MaterialLayout.alignToParentHorizontally(view, child: backgroundView) MaterialLayout.alignToParentHorizontally(view, child: backgroundView)
MaterialLayout.height(view, child: backgroundView, height: 140) 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)
nameLabel.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignFromBottom(backgroundView, child: nameLabel, bottom: 20)
MaterialLayout.alignToParentHorizontally(backgroundView, child: nameLabel, left: 20, right: 20)
} }
/// Prepares the tableView. /// Prepares the tableView.
...@@ -93,7 +115,7 @@ class SideViewController: UIViewController { ...@@ -93,7 +115,7 @@ class SideViewController: UIViewController {
// Use MaterialLayout to easily align the tableView. // Use MaterialLayout to easily align the tableView.
view.addSubview(tableView) view.addSubview(tableView)
tableView.translatesAutoresizingMaskIntoConstraints = false tableView.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignToParent(view, child: tableView, top: 140) MaterialLayout.alignToParent(view, child: tableView, top: 170)
} }
} }
...@@ -111,7 +133,13 @@ extension SideViewController: UITableViewDataSource { ...@@ -111,7 +133,13 @@ extension SideViewController: UITableViewDataSource {
let item: Item = items[indexPath.row] let item: Item = items[indexPath.row]
cell.selectionStyle = .None cell.selectionStyle = .None
cell.textLabel!.text = item.text cell.textLabel!.text = item.text
cell.imageView!.image = item.image cell.textLabel!.font = RobotoFont.medium
cell.imageView!.image = UIImage(named: item.imageName)?.imageWithRenderingMode(.AlwaysTemplate)
cell.imageView!.tintColor = MaterialColor.cyan.darken4
if item.selected {
cell.textLabel!.textColor = MaterialColor.cyan.base
}
return cell return cell
} }
......
Sources/MaterialRadius.swift
...@@ -36,6 +36,11 @@ public enum MaterialRadius { ...@@ -36,6 +36,11 @@ public enum MaterialRadius {
case Radius2 case Radius2
case Radius3 case Radius3
case Radius4 case Radius4
case Radius5
case Radius6
case Radius7
case Radius8
case Radius9
} }
/** /**
...@@ -52,6 +57,16 @@ public func MaterialRadiusToValue(radius: MaterialRadius) -> CGFloat { ...@@ -52,6 +57,16 @@ public func MaterialRadiusToValue(radius: MaterialRadius) -> CGFloat {
case .Radius3: case .Radius3:
return 16 return 16
case .Radius4: case .Radius4:
return 24
case .Radius5:
return 32 return 32
case .Radius6:
return 40
case .Radius7:
return 48
case .Radius8:
return 56
case .Radius9:
return 64
} }
} }
Sources/NavigationBarView.swift
...@@ -70,7 +70,7 @@ public class NavigationBarView : MaterialView { ...@@ -70,7 +70,7 @@ public class NavigationBarView : MaterialView {
/** /**
:name: titleLabelInset :name: titleLabelInset
*/ */
public var titleLabelInset: UIEdgeInsets = UIEdgeInsets(top: 8, left: 0, bottom: 0, right: 0) { public var titleLabelInset: UIEdgeInsets = UIEdgeInsets(top: 12, left: 0, bottom: 0, right: 0) {
didSet { didSet {
reloadView() reloadView()
} }
......
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