Skip to content

M
Material
Commit 83b3a2ef by Daniel Dahan
Options

prepare for release with Grid

parent 8db29285
Showing with 191 additions and 202 deletions
Examples/Programmatic/CardView/CardView/ViewController.swift
...@@ -39,10 +39,10 @@ class ViewController: UIViewController { ...@@ -39,10 +39,10 @@ class ViewController: UIViewController {
// Examples of using CardView. // Examples of using CardView.
// Uncomment different examples and read // Uncomment different examples and read
// the comments below. // the comments below.
prepareGeneralCardViewExample() // prepareGeneralCardViewExample()
// prepareCardViewWithoutPulseBackgroundImageExample() // prepareCardViewWithoutPulseBackgroundImageExample()
// prepareCardViewWithPulseBackgroundImageExample() // prepareCardViewWithPulseBackgroundImageExample()
// prepareCardViewButtonBarExample() prepareCardViewButtonBarExample()
} }
/** /**
......
Examples/Programmatic/Grid/Grid.xcodeproj/project.pbxproj
...@@ -11,8 +11,6 @@ ...@@ -11,8 +11,6 @@
9656CD231C6CFA6200EBCEF1 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9656CD221C6CFA6200EBCEF1 /* ViewController.swift */; }; 9656CD231C6CFA6200EBCEF1 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9656CD221C6CFA6200EBCEF1 /* ViewController.swift */; };
9656CD281C6CFA6200EBCEF1 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 9656CD271C6CFA6200EBCEF1 /* Assets.xcassets */; }; 9656CD281C6CFA6200EBCEF1 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 9656CD271C6CFA6200EBCEF1 /* Assets.xcassets */; };
9656CD2B1C6CFA6200EBCEF1 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 9656CD291C6CFA6200EBCEF1 /* LaunchScreen.storyboard */; }; 9656CD2B1C6CFA6200EBCEF1 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 9656CD291C6CFA6200EBCEF1 /* LaunchScreen.storyboard */; };
9656CD331C6CFACC00EBCEF1 /* Material.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 9656CD321C6CFACC00EBCEF1 /* Material.framework */; };
9656CD341C6CFACC00EBCEF1 /* Material.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 9656CD321C6CFACC00EBCEF1 /* Material.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
/* End PBXBuildFile section */ /* End PBXBuildFile section */
/* Begin PBXCopyFilesBuildPhase section */ /* Begin PBXCopyFilesBuildPhase section */
...@@ -22,7 +20,6 @@ ...@@ -22,7 +20,6 @@
dstPath = ""; dstPath = "";
dstSubfolderSpec = 10; dstSubfolderSpec = 10;
files = ( files = (
9656CD341C6CFACC00EBCEF1 /* Material.framework in Embed Frameworks */,
); );
name = "Embed Frameworks"; name = "Embed Frameworks";
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
...@@ -36,7 +33,6 @@ ...@@ -36,7 +33,6 @@
9656CD271C6CFA6200EBCEF1 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; }; 9656CD271C6CFA6200EBCEF1 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
9656CD2A1C6CFA6200EBCEF1 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; }; 9656CD2A1C6CFA6200EBCEF1 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
9656CD2C1C6CFA6200EBCEF1 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; }; 9656CD2C1C6CFA6200EBCEF1 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
9656CD321C6CFACC00EBCEF1 /* 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,7 +40,6 @@ ...@@ -44,7 +40,6 @@
isa = PBXFrameworksBuildPhase; isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647; buildActionMask = 2147483647;
files = ( files = (
9656CD331C6CFACC00EBCEF1 /* Material.framework in Frameworks */,
); );
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
}; };
...@@ -54,7 +49,6 @@ ...@@ -54,7 +49,6 @@
9656CD141C6CFA6200EBCEF1 = { 9656CD141C6CFA6200EBCEF1 = {
isa = PBXGroup; isa = PBXGroup;
children = ( children = (
9656CD321C6CFACC00EBCEF1 /* Material.framework */,
9656CD1F1C6CFA6200EBCEF1 /* Grid */, 9656CD1F1C6CFA6200EBCEF1 /* Grid */,
9656CD1E1C6CFA6200EBCEF1 /* Products */, 9656CD1E1C6CFA6200EBCEF1 /* Products */,
); );
......
Examples/Programmatic/Grid/Grid/ViewController.swift
...@@ -40,10 +40,10 @@ class ViewController: UIViewController { ...@@ -40,10 +40,10 @@ class ViewController: UIViewController {
override func viewDidLoad() { override func viewDidLoad() {
super.viewDidLoad() super.viewDidLoad()
prepareView() prepareView()
// prepareHorizontalGridViewExample() // prepareHorizontalGridViewExample()
// prepareVerticalGridViewExample() // prepareVerticalGridViewExample()
// prepareSmallCardViewExample() // prepareSmallCardViewExample()
// prepareMediumCardViewExample() // prepareMediumCardViewExample()
prepareLargeCardViewExample() prepareLargeCardViewExample()
} }
...@@ -53,58 +53,122 @@ class ViewController: UIViewController { ...@@ -53,58 +53,122 @@ class ViewController: UIViewController {
view.backgroundColor = MaterialColor.white view.backgroundColor = MaterialColor.white
} }
/// Prepares the medium card example. /// Prepares the Horizontal GridView example.
private func prepareLargeCardViewExample() { private func prepareHorizontalGridViewExample() {
let cardView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(16, 100, view.bounds.width - 32, 400)) var image: UIImage? = UIImage(named: "ic_flash_auto_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn1: FlatButton = FlatButton()
btn1.grid.columns = 3
btn1.pulseColor = MaterialColor.blueGrey.darken4
btn1.tintColor = MaterialColor.blueGrey.darken4
btn1.backgroundColor = MaterialColor.grey.lighten3
btn1.setImage(image, forState: .Normal)
btn1.setImage(image, forState: .Highlighted)
view.addSubview(btn1)
image = UIImage(named: "ic_flash_off_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn2: FlatButton = FlatButton()
btn2.grid.columns = 3
btn2.pulseColor = MaterialColor.blueGrey.darken4
btn2.tintColor = MaterialColor.blueGrey.darken4
btn2.backgroundColor = MaterialColor.grey.lighten3
btn2.setImage(image, forState: .Normal)
btn2.setImage(image, forState: .Highlighted)
view.addSubview(btn2)
image = UIImage(named: "ic_flash_on_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn3: FlatButton = FlatButton()
btn3.grid.columns = 4
btn3.pulseColor = MaterialColor.blueGrey.darken4
btn3.tintColor = MaterialColor.blueGrey.darken4
btn3.backgroundColor = MaterialColor.grey.lighten3
btn3.setImage(image, forState: .Normal)
btn3.setImage(image, forState: .Highlighted)
view.addSubview(btn3)
// view.grid.columns = 9
view.grid.spacing = 16
view.grid.contentInset.left = 16
view.grid.contentInset.right = 16
view.grid.contentInset.top = 100
view.grid.contentInset.bottom = 100
view.grid.views = [btn1, btn2, btn3]
for v in view.grid.views! {
print(v.frame)
}
}
/// Prepares the Vertical GridView example.
private func prepareVerticalGridViewExample() {
var image: UIImage? = UIImage(named: "ic_flash_auto_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn1: FlatButton = FlatButton()
btn1.grid.rows = 3
btn1.pulseColor = MaterialColor.blueGrey.darken4
btn1.tintColor = MaterialColor.blueGrey.darken4
btn1.backgroundColor = MaterialColor.grey.lighten3
btn1.setImage(image, forState: .Normal)
btn1.setImage(image, forState: .Highlighted)
view.addSubview(btn1)
image = UIImage(named: "ic_flash_off_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn2: FlatButton = FlatButton()
btn2.grid.rows = 3
btn2.pulseColor = MaterialColor.blueGrey.darken4
btn2.tintColor = MaterialColor.blueGrey.darken4
btn2.backgroundColor = MaterialColor.grey.lighten3
btn2.setImage(image, forState: .Normal)
btn2.setImage(image, forState: .Highlighted)
view.addSubview(btn2)
image = UIImage(named: "ic_flash_on_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn3: FlatButton = FlatButton()
btn3.grid.rows = 3
btn3.pulseColor = MaterialColor.blueGrey.darken4
btn3.tintColor = MaterialColor.blueGrey.darken4
btn3.backgroundColor = MaterialColor.grey.lighten3
btn3.setImage(image, forState: .Normal)
btn3.setImage(image, forState: .Highlighted)
view.addSubview(btn3)
view.grid.axis.direction = .Vertical
view.grid.rows = 9
view.grid.spacing = 16
view.grid.contentInset.left = 16
view.grid.contentInset.right = 16
view.grid.contentInset.top = 100
view.grid.contentInset.bottom = 100
view.grid.views = [btn1, btn2, btn3]
for v in view.grid.views! {
print(v.frame)
}
}
/// Prepares the small card example.
private func prepareSmallCardViewExample() {
let cardView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(16, 100, view.bounds.width - 32, 152))
cardView.pulseColor = MaterialColor.blueGrey.base cardView.pulseColor = MaterialColor.blueGrey.base
cardView.grid.axis.direction = .Vertical
cardView.depth = .Depth1 cardView.depth = .Depth1
view.addSubview(cardView) view.addSubview(cardView)
var image: UIImage? = UIImage(named: "CosmicMindInverted")
let imageView: MaterialView = MaterialView() let imageView: MaterialView = MaterialView()
imageView.grid.rows = 7 imageView.grid.columns = 4
imageView.grid.columns = 6 imageView.image = image
imageView.grid.spacing = 4 imageView.contentsGravity = .ResizeAspectFill
imageView.backgroundColor = MaterialColor.clear
cardView.addSubview(imageView) cardView.addSubview(imageView)
var image: UIImage? = UIImage(named: "CosmicMindInverted")
let leftImageViewCollection: MaterialView = MaterialView()
leftImageViewCollection.grid.columns = 3
leftImageViewCollection.image = image
leftImageViewCollection.contentsGravity = .ResizeAspectFill
imageView.addSubview(leftImageViewCollection)
let rightImageViewCollection: MaterialView = MaterialView()
rightImageViewCollection.grid.columns = 3
rightImageViewCollection.grid.axis.direction = .Vertical
rightImageViewCollection.grid.spacing = 4
rightImageViewCollection.backgroundColor = MaterialColor.clear
imageView.addSubview(rightImageViewCollection)
image = UIImage(named: "CosmicMindInverted")
let topImageViewCollection: MaterialView = MaterialView()
topImageViewCollection.grid.rows = 6
topImageViewCollection.image = image
topImageViewCollection.contentsGravity = .ResizeAspectFill
rightImageViewCollection.addSubview(topImageViewCollection)
image = UIImage(named: "CosmicMindInverted")
let bottomImageViewCollection: MaterialView = MaterialView()
bottomImageViewCollection.grid.rows = 6
bottomImageViewCollection.image = image
bottomImageViewCollection.contentsGravity = .ResizeAspectFill
rightImageViewCollection.addSubview(bottomImageViewCollection)
let contentView: MaterialView = MaterialView() let contentView: MaterialView = MaterialView()
contentView.grid.rows = 5 contentView.grid.columns = 8
contentView.grid.axis.direction = .Vertical contentView.grid.axis.direction = .Vertical
contentView.grid.contentInsetPreset = .Square3 contentView.grid.contentInsetPreset = .Square3
contentView.grid.spacing = 12
contentView.backgroundColor = MaterialColor.clear contentView.backgroundColor = MaterialColor.clear
cardView.addSubview(contentView) cardView.addSubview(contentView)
let titleView: MaterialView = MaterialView() let titleView: MaterialView = MaterialView()
titleView.grid.rows = 1 titleView.grid.columns = 8
titleView.grid.rows = 4
titleView.backgroundColor = MaterialColor.clear titleView.backgroundColor = MaterialColor.clear
contentView.addSubview(titleView) contentView.addSubview(titleView)
...@@ -118,7 +182,6 @@ class ViewController: UIViewController { ...@@ -118,7 +182,6 @@ class ViewController: UIViewController {
image = UIImage(named: "ic_more_vert_white")?.imageWithRenderingMode(.AlwaysTemplate) image = UIImage(named: "ic_more_vert_white")?.imageWithRenderingMode(.AlwaysTemplate)
let moreButton: FlatButton = FlatButton() let moreButton: FlatButton = FlatButton()
moreButton.grid.columns = 1 moreButton.grid.columns = 1
moreButton.grid.offset.columns = 4
moreButton.contentInsetPreset = .None moreButton.contentInsetPreset = .None
moreButton.pulseColor = MaterialColor.blueGrey.darken4 moreButton.pulseColor = MaterialColor.blueGrey.darken4
moreButton.tintColor = MaterialColor.blueGrey.darken4 moreButton.tintColor = MaterialColor.blueGrey.darken4
...@@ -127,17 +190,18 @@ class ViewController: UIViewController { ...@@ -127,17 +190,18 @@ class ViewController: UIViewController {
titleView.addSubview(moreButton) titleView.addSubview(moreButton)
let detailLabel: UILabel = UILabel() let detailLabel: UILabel = UILabel()
detailLabel.grid.rows = 3 detailLabel.grid.rows = 4
detailLabel.numberOfLines = 0 detailLabel.numberOfLines = 0
detailLabel.lineBreakMode = .ByTruncatingTail detailLabel.lineBreakMode = .ByTruncatingTail
detailLabel.font = RobotoFont.regularWithSize(12) detailLabel.font = RobotoFont.regularWithSize(12)
detailLabel.text = "Material is a graphics and animation framework for Google's Material Design. It is designed to allow the creativity of others to easily be expressed." detailLabel.text = "Material is a graphics and animation framework. It may be used for Google's Material Design and Apple's Flat UI. It is designed to allow the creativity of others to easily be expressed."
detailLabel.textColor = MaterialColor.blueGrey.darken4 detailLabel.textColor = MaterialColor.blueGrey.darken4
detailLabel.backgroundColor = MaterialColor.clear detailLabel.backgroundColor = MaterialColor.clear
contentView.addSubview(detailLabel) contentView.addSubview(detailLabel)
let alarmView: MaterialView = MaterialView() let alarmView: MaterialView = MaterialView()
alarmView.grid.rows = 1 alarmView.grid.columns = 8
alarmView.grid.rows = 4
alarmView.backgroundColor = MaterialColor.clear alarmView.backgroundColor = MaterialColor.clear
contentView.addSubview(alarmView) contentView.addSubview(alarmView)
...@@ -152,7 +216,6 @@ class ViewController: UIViewController { ...@@ -152,7 +216,6 @@ class ViewController: UIViewController {
image = UIImage(named: "ic_alarm_white")?.imageWithRenderingMode(.AlwaysTemplate) image = UIImage(named: "ic_alarm_white")?.imageWithRenderingMode(.AlwaysTemplate)
let alarmButton: FlatButton = FlatButton() let alarmButton: FlatButton = FlatButton()
alarmButton.grid.columns = 1 alarmButton.grid.columns = 1
alarmButton.grid.offset.columns = 4
alarmButton.contentInsetPreset = .None alarmButton.contentInsetPreset = .None
alarmButton.pulseColor = MaterialColor.blueGrey.darken4 alarmButton.pulseColor = MaterialColor.blueGrey.darken4
alarmButton.tintColor = MaterialColor.red.base alarmButton.tintColor = MaterialColor.red.base
...@@ -161,8 +224,6 @@ class ViewController: UIViewController { ...@@ -161,8 +224,6 @@ class ViewController: UIViewController {
alarmView.addSubview(alarmButton) alarmView.addSubview(alarmButton)
cardView.grid.views = [imageView, contentView] cardView.grid.views = [imageView, contentView]
imageView.grid.views = [leftImageViewCollection, rightImageViewCollection]
rightImageViewCollection.grid.views = [topImageViewCollection, bottomImageViewCollection]
contentView.grid.views = [titleView, detailLabel, alarmView] contentView.grid.views = [titleView, detailLabel, alarmView]
titleView.grid.views = [titleLabel, moreButton] titleView.grid.views = [titleLabel, moreButton]
alarmView.grid.views = [alarmLabel, alarmButton] alarmView.grid.views = [alarmLabel, alarmButton]
...@@ -218,7 +279,7 @@ class ViewController: UIViewController { ...@@ -218,7 +279,7 @@ class ViewController: UIViewController {
detailLabel.numberOfLines = 0 detailLabel.numberOfLines = 0
detailLabel.lineBreakMode = .ByTruncatingTail detailLabel.lineBreakMode = .ByTruncatingTail
detailLabel.font = RobotoFont.regularWithSize(12) detailLabel.font = RobotoFont.regularWithSize(12)
detailLabel.text = "Material is a graphics and animation framework for Google's Material Design. It is designed to allow the creativity of others to easily be expressed." detailLabel.text = "Material is a graphics and animation framework. It may be used for Google's Material Design and Apple's Flat UI. It is designed to allow the creativity of others to easily be expressed."
detailLabel.textColor = MaterialColor.blueGrey.darken4 detailLabel.textColor = MaterialColor.blueGrey.darken4
detailLabel.backgroundColor = MaterialColor.clear detailLabel.backgroundColor = MaterialColor.clear
contentView.addSubview(detailLabel) contentView.addSubview(detailLabel)
...@@ -253,31 +314,59 @@ class ViewController: UIViewController { ...@@ -253,31 +314,59 @@ class ViewController: UIViewController {
alarmView.grid.views = [alarmLabel, alarmButton] alarmView.grid.views = [alarmLabel, alarmButton]
} }
/// Prepares the small card example.
private func prepareSmallCardViewExample() { /// Prepares the medium card example.
let cardView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(16, 100, view.bounds.width - 32, 152)) private func prepareLargeCardViewExample() {
let cardView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(16, 100, view.bounds.width - 32, 400))
cardView.pulseColor = MaterialColor.blueGrey.base cardView.pulseColor = MaterialColor.blueGrey.base
cardView.grid.axis.direction = .Vertical
cardView.depth = .Depth1 cardView.depth = .Depth1
view.addSubview(cardView) view.addSubview(cardView)
var image: UIImage? = UIImage(named: "CosmicMindInverted")
let imageView: MaterialView = MaterialView() let imageView: MaterialView = MaterialView()
imageView.grid.columns = 4 imageView.grid.rows = 7
imageView.image = image imageView.grid.columns = 6
imageView.contentsGravity = .ResizeAspectFill imageView.grid.spacing = 4
imageView.backgroundColor = MaterialColor.clear
cardView.addSubview(imageView) cardView.addSubview(imageView)
var image: UIImage? = UIImage(named: "CosmicMindInverted")
let leftImageViewCollection: MaterialView = MaterialView()
leftImageViewCollection.grid.columns = 3
leftImageViewCollection.image = image
leftImageViewCollection.contentsGravity = .ResizeAspectFill
imageView.addSubview(leftImageViewCollection)
let rightImageViewCollection: MaterialView = MaterialView()
rightImageViewCollection.grid.columns = 3
rightImageViewCollection.grid.axis.direction = .Vertical
rightImageViewCollection.grid.spacing = 4
rightImageViewCollection.backgroundColor = MaterialColor.clear
imageView.addSubview(rightImageViewCollection)
image = UIImage(named: "CosmicMindInverted")
let topImageViewCollection: MaterialView = MaterialView()
topImageViewCollection.grid.rows = 6
topImageViewCollection.image = image
topImageViewCollection.contentsGravity = .ResizeAspectFill
rightImageViewCollection.addSubview(topImageViewCollection)
image = UIImage(named: "CosmicMindInverted")
let bottomImageViewCollection: MaterialView = MaterialView()
bottomImageViewCollection.grid.rows = 6
bottomImageViewCollection.image = image
bottomImageViewCollection.contentsGravity = .ResizeAspectFill
rightImageViewCollection.addSubview(bottomImageViewCollection)
let contentView: MaterialView = MaterialView() let contentView: MaterialView = MaterialView()
contentView.grid.columns = 8 contentView.grid.rows = 5
contentView.grid.axis.direction = .Vertical contentView.grid.axis.direction = .Vertical
contentView.grid.contentInsetPreset = .Square3 contentView.grid.contentInsetPreset = .Square3
contentView.grid.spacing = 12
contentView.backgroundColor = MaterialColor.clear contentView.backgroundColor = MaterialColor.clear
cardView.addSubview(contentView) cardView.addSubview(contentView)
let titleView: MaterialView = MaterialView() let titleView: MaterialView = MaterialView()
titleView.grid.columns = 8 titleView.grid.rows = 1
titleView.grid.rows = 4
titleView.backgroundColor = MaterialColor.clear titleView.backgroundColor = MaterialColor.clear
contentView.addSubview(titleView) contentView.addSubview(titleView)
...@@ -291,6 +380,7 @@ class ViewController: UIViewController { ...@@ -291,6 +380,7 @@ class ViewController: UIViewController {
image = UIImage(named: "ic_more_vert_white")?.imageWithRenderingMode(.AlwaysTemplate) image = UIImage(named: "ic_more_vert_white")?.imageWithRenderingMode(.AlwaysTemplate)
let moreButton: FlatButton = FlatButton() let moreButton: FlatButton = FlatButton()
moreButton.grid.columns = 1 moreButton.grid.columns = 1
moreButton.grid.offset.columns = 4
moreButton.contentInsetPreset = .None moreButton.contentInsetPreset = .None
moreButton.pulseColor = MaterialColor.blueGrey.darken4 moreButton.pulseColor = MaterialColor.blueGrey.darken4
moreButton.tintColor = MaterialColor.blueGrey.darken4 moreButton.tintColor = MaterialColor.blueGrey.darken4
...@@ -299,18 +389,17 @@ class ViewController: UIViewController { ...@@ -299,18 +389,17 @@ class ViewController: UIViewController {
titleView.addSubview(moreButton) titleView.addSubview(moreButton)
let detailLabel: UILabel = UILabel() let detailLabel: UILabel = UILabel()
detailLabel.grid.rows = 4 detailLabel.grid.rows = 3
detailLabel.numberOfLines = 0 detailLabel.numberOfLines = 0
detailLabel.lineBreakMode = .ByTruncatingTail detailLabel.lineBreakMode = .ByTruncatingTail
detailLabel.font = RobotoFont.regularWithSize(12) detailLabel.font = RobotoFont.regularWithSize(12)
detailLabel.text = "Material is a graphics and animation framework for Google's Material Design. It is designed to allow the creativity of others to easily be expressed." detailLabel.text = "Material is a graphics and animation framework. It may be used for Google's Material Design and Apple's Flat UI. It is designed to allow the creativity of others to easily be expressed."
detailLabel.textColor = MaterialColor.blueGrey.darken4 detailLabel.textColor = MaterialColor.blueGrey.darken4
detailLabel.backgroundColor = MaterialColor.clear detailLabel.backgroundColor = MaterialColor.clear
contentView.addSubview(detailLabel) contentView.addSubview(detailLabel)
let alarmView: MaterialView = MaterialView() let alarmView: MaterialView = MaterialView()
alarmView.grid.columns = 8 alarmView.grid.rows = 1
alarmView.grid.rows = 4
alarmView.backgroundColor = MaterialColor.clear alarmView.backgroundColor = MaterialColor.clear
contentView.addSubview(alarmView) contentView.addSubview(alarmView)
...@@ -325,6 +414,7 @@ class ViewController: UIViewController { ...@@ -325,6 +414,7 @@ class ViewController: UIViewController {
image = UIImage(named: "ic_alarm_white")?.imageWithRenderingMode(.AlwaysTemplate) image = UIImage(named: "ic_alarm_white")?.imageWithRenderingMode(.AlwaysTemplate)
let alarmButton: FlatButton = FlatButton() let alarmButton: FlatButton = FlatButton()
alarmButton.grid.columns = 1 alarmButton.grid.columns = 1
alarmButton.grid.offset.columns = 4
alarmButton.contentInsetPreset = .None alarmButton.contentInsetPreset = .None
alarmButton.pulseColor = MaterialColor.blueGrey.darken4 alarmButton.pulseColor = MaterialColor.blueGrey.darken4
alarmButton.tintColor = MaterialColor.red.base alarmButton.tintColor = MaterialColor.red.base
...@@ -333,122 +423,11 @@ class ViewController: UIViewController { ...@@ -333,122 +423,11 @@ class ViewController: UIViewController {
alarmView.addSubview(alarmButton) alarmView.addSubview(alarmButton)
cardView.grid.views = [imageView, contentView] cardView.grid.views = [imageView, contentView]
imageView.grid.views = [leftImageViewCollection, rightImageViewCollection]
rightImageViewCollection.grid.views = [topImageViewCollection, bottomImageViewCollection]
contentView.grid.views = [titleView, detailLabel, alarmView] contentView.grid.views = [titleView, detailLabel, alarmView]
titleView.grid.views = [titleLabel, moreButton] titleView.grid.views = [titleLabel, moreButton]
alarmView.grid.views = [alarmLabel, alarmButton] alarmView.grid.views = [alarmLabel, alarmButton]
} }
/// Prepares the Horizontal GridView example.
private func prepareHorizontalGridViewExample() {
var image: UIImage? = UIImage(named: "ic_flash_auto_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn1: FlatButton = FlatButton()
btn1.grid.columns = 3
btn1.pulseColor = MaterialColor.blueGrey.darken4
btn1.tintColor = MaterialColor.blueGrey.darken4
btn1.backgroundColor = MaterialColor.grey.lighten3
btn1.setImage(image, forState: .Normal)
btn1.setImage(image, forState: .Highlighted)
view.addSubview(btn1)
image = UIImage(named: "ic_flash_off_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn2: FlatButton = FlatButton()
btn2.grid.columns = 3
btn2.pulseColor = MaterialColor.blueGrey.darken4
btn2.tintColor = MaterialColor.blueGrey.darken4
btn2.backgroundColor = MaterialColor.grey.lighten3
btn2.setImage(image, forState: .Normal)
btn2.setImage(image, forState: .Highlighted)
view.addSubview(btn2)
image = UIImage(named: "ic_flash_on_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn3: FlatButton = FlatButton()
btn3.grid.columns = 4
btn3.pulseColor = MaterialColor.blueGrey.darken4
btn3.tintColor = MaterialColor.blueGrey.darken4
btn3.backgroundColor = MaterialColor.grey.lighten3
btn3.setImage(image, forState: .Normal)
btn3.setImage(image, forState: .Highlighted)
view.addSubview(btn3)
let label1: UILabel = UILabel()
label1.text = "A"
label1.backgroundColor = MaterialColor.red.base
label1.grid.columns = 2
view.addSubview(label1)
let label2: MaterialLabel = MaterialLabel()
label2.text = "B"
label2.backgroundColor = MaterialColor.blue.base
// view.grid.columns = 9
view.grid.spacing = 16
view.grid.contentInset.left = 16
view.grid.contentInset.right = 16
view.grid.contentInset.top = 100
view.grid.contentInset.bottom = 100
view.grid.views = [btn1, btn2, label1, btn3]
for v in view.grid.views! {
print(v.frame)
}
}
internal func handleButton() {
print("Clicked Button")
}
/// Prepares the Vertical GridView example.
private func prepareVerticalGridViewExample() {
var image: UIImage? = UIImage(named: "ic_flash_auto_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn1: FlatButton = FlatButton()
btn1.grid.rows = 3
btn1.pulseColor = MaterialColor.blueGrey.darken4
btn1.tintColor = MaterialColor.blueGrey.darken4
btn1.backgroundColor = MaterialColor.grey.lighten3
btn1.setImage(image, forState: .Normal)
btn1.setImage(image, forState: .Highlighted)
view.addSubview(btn1)
image = UIImage(named: "ic_flash_off_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn2: FlatButton = FlatButton()
btn2.grid.rows = 3
btn2.pulseColor = MaterialColor.blueGrey.darken4
btn2.tintColor = MaterialColor.blueGrey.darken4
btn2.backgroundColor = MaterialColor.grey.lighten3
btn2.setImage(image, forState: .Normal)
btn2.setImage(image, forState: .Highlighted)
view.addSubview(btn2)
image = UIImage(named: "ic_flash_on_white")?.imageWithRenderingMode(.AlwaysTemplate)
let btn3: FlatButton = FlatButton()
btn3.grid.rows = 3
btn3.pulseColor = MaterialColor.blueGrey.darken4
btn3.tintColor = MaterialColor.blueGrey.darken4
btn3.backgroundColor = MaterialColor.grey.lighten3
btn3.setImage(image, forState: .Normal)
btn3.setImage(image, forState: .Highlighted)
view.addSubview(btn3)
let label1: MaterialLabel = MaterialLabel()
label1.text = "A"
label1.backgroundColor = MaterialColor.blue.base
let label2: MaterialLabel = MaterialLabel()
label2.text = "B"
label2.backgroundColor = MaterialColor.blue.base
view.grid.axis.direction = .Vertical
view.grid.rows = 9
view.grid.spacing = 16
view.grid.contentInset.left = 16
view.grid.contentInset.right = 16
view.grid.contentInset.top = 100
view.grid.contentInset.bottom = 100
view.grid.views = [btn1, btn2, btn3]
for v in view.grid.views! {
print(v.frame)
}
}
} }
Examples/Programmatic/ImageCardView/ImageCardView/ViewController.swift
...@@ -39,8 +39,8 @@ class ViewController: UIViewController { ...@@ -39,8 +39,8 @@ class ViewController: UIViewController {
// Examples of using ImageCardView. // Examples of using ImageCardView.
// Uncomment different examples and read // Uncomment different examples and read
// the comments below. // the comments below.
// prepareGeneralImageCardViewExample() prepareGeneralImageCardViewExample()
prepareImageCardViewWithoutDetailLabelAndDividerExample() // prepareImageCardViewWithoutDetailLabelAndDividerExample()
} }
/** /**
...@@ -117,6 +117,7 @@ class ViewController: UIViewController { ...@@ -117,6 +117,7 @@ class ViewController: UIViewController {
titleLabel.textColor = MaterialColor.white titleLabel.textColor = MaterialColor.white
titleLabel.font = RobotoFont.regularWithSize(24) titleLabel.font = RobotoFont.regularWithSize(24)
imageCardView.titleLabel = titleLabel imageCardView.titleLabel = titleLabel
imageCardView.titleLabelInset.top = 80
// Star button. // Star button.
let img1: UIImage? = UIImage(named: "ic_star_grey_darken_2") let img1: UIImage? = UIImage(named: "ic_star_grey_darken_2")
......
Examples/Programmatic/MaterialLayer/MaterialLayer/ViewController.swift
...@@ -63,7 +63,6 @@ class ViewController: UIViewController { ...@@ -63,7 +63,6 @@ class ViewController: UIViewController {
let point: CGFloat = UIScreen.mainScreen().bounds.width / 2 - diameter / 2 let point: CGFloat = UIScreen.mainScreen().bounds.width / 2 - diameter / 2
let materialLayer: MaterialLayer = MaterialLayer(frame: CGRectMake(point, point, diameter, diameter)) let materialLayer: MaterialLayer = MaterialLayer(frame: CGRectMake(point, point, diameter, diameter))
materialLayer.shape = .Circle materialLayer.shape = .Circle
materialLayer.depth = .Depth2
UIImage.contentsOfURL(NSURL(string: "http://www.cosmicmind.io/CM/iTunesArtwork.png")!) { (image: UIImage?, error: NSError?) in UIImage.contentsOfURL(NSURL(string: "http://www.cosmicmind.io/CM/iTunesArtwork.png")!) { (image: UIImage?, error: NSError?) in
if let v: UIImage = image { if let v: UIImage = image {
......
Examples/Programmatic/MaterialPulseView/MaterialPulseView/ViewController.swift
...@@ -56,9 +56,8 @@ class ViewController: UIViewController { ...@@ -56,9 +56,8 @@ class ViewController: UIViewController {
let pulseView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(point, point, 150, 150)) let pulseView: MaterialPulseView = MaterialPulseView(frame: CGRectMake(point, point, 150, 150))
pulseView.image = UIImage(named: "Graph") pulseView.image = UIImage(named: "Graph")
pulseView.shape = .Square pulseView.shape = .Square
pulseView.depth = .Depth2 pulseView.depth = .Depth1
pulseView.cornerRadius = .Radius3 pulseView.cornerRadius = .Radius3
print(pulseView)
// Add pulseView to UIViewController. // Add pulseView to UIViewController.
view.addSubview(pulseView) view.addSubview(pulseView)
......
Examples/Programmatic/Menu/Menu/ViewController.swift
...@@ -237,7 +237,7 @@ class ViewController: UIViewController { ...@@ -237,7 +237,7 @@ class ViewController: UIViewController {
view.addSubview(btn3) view.addSubview(btn3)
// Initialize the menu and setup the configuration options. // Initialize the menu and setup the configuration options.
flashMenu = Menu(origin: CGPointMake(300, 100)) flashMenu = Menu(origin: CGPointMake((view.bounds.width + btn1.width) / 2, 100))
flashMenu.direction = .Left flashMenu.direction = .Left
flashMenu.buttonSize = btn1.intrinsicContentSize() flashMenu.buttonSize = btn1.intrinsicContentSize()
flashMenu.buttons = [btn1, btn2, btn3] flashMenu.buttons = [btn1, btn2, btn3]
......
Examples/Programmatic/NavigationBarView/NavigationBarView/ViewController.swift
...@@ -239,7 +239,7 @@ class ViewController: UIViewController { ...@@ -239,7 +239,7 @@ class ViewController: UIViewController {
/// Prepares a text alignment example. /// Prepares a text alignment example.
private func prepareAlignTitleAndDetailLabelToLeftExample() { private func prepareAlignTitleAndDetailLabelToLeftExample() {
let navigationBarView: NavigationBarView = NavigationBarView() let navigationBarView: NavigationBarView = NavigationBarView()
navigationBarView.backgroundColor = MaterialColor.deepPurple.base navigationBarView.backgroundColor = MaterialColor.blue.base
/* /*
To lighten the status bar - add the To lighten the status bar - add the
......
README.md
...@@ -2,11 +2,12 @@ ...@@ -2,11 +2,12 @@
# Welcome to Material # Welcome to Material
Material is a graphics and animation framework for Google's Material Design. It is designed to allow the creativity of others to easily be expressed. Material is a graphics and animation framework. It may be used for Google's Material Design and Apple's Flat UI. It is designed to allow the creativity of others to easily be expressed.
## Features ## Features
- [x] Fully Configurable UI Components - [x] Fully Configurable UI Components
- [x] Grid System For Complex UIs
- [x] Base Material Layers & Material Views To Create New UI Components - [x] Base Material Layers & Material Views To Create New UI Components
- [x] Side Navigation View Controller - [x] Side Navigation View Controller
- [x] Navigation Bar View - [x] Navigation Bar View
...@@ -57,7 +58,8 @@ Material is a growing project and will encounter changes throughout its developm ...@@ -57,7 +58,8 @@ 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) * [Menu](#menu) (New)
* [Grid](#grid) (New)
* [NavigationBarView](#navigationbarview) * [NavigationBarView](#navigationbarview)
* [SideNavigationViewController](#sidenavigationviewcontroller) * [SideNavigationViewController](#sidenavigationviewcontroller)
* [CardView](#cardview) * [CardView](#cardview)
...@@ -168,18 +170,37 @@ A Menu manages a group of UIButtons that may be animated open in the Up, Down, L ...@@ -168,18 +170,37 @@ A Menu manages a group of UIButtons that may be animated open in the Up, Down, L
Below is an example using FabButtons. Below is an example using FabButtons.
![MaterialFabButton](http://www.cosmicmind.io/MK/MaterialFabMenu.gif) ![MaterialFabMenu](http://www.cosmicmind.io/MK/MaterialFabMenu.gif)
Below is an example using FlatButtons. Below is an example using FlatButtons.
![MaterialFabButton](http://www.cosmicmind.io/MK/MaterialFlatMenu.gif) ![MaterialFlatMenu](http://www.cosmicmind.io/MK/MaterialFlatMenu.gif)
Below is an example using FlatButtons with images. Below is an example using FlatButtons with images.
![MaterialFabButton](http://www.cosmicmind.io/MK/MaterialFlashMenu.gif) ![MaterialFlashMenu](http://www.cosmicmind.io/MK/MaterialFlashMenu.gif)
[Learn More About Menu](https://github.com/CosmicMind/Material/wiki/Menu) [Learn More About Menu](https://github.com/CosmicMind/Material/wiki/Menu)
<a name="grid"></a>
## Grid
Grid is an extension of UIView that enables any collection of subviews to be managed in a flexible grid system, independent of other views that would need to be freely moving. Below are examples of using Grid. In the Examples/Programmatic directory, there are examples using this wonderful feature.
Below is an example of a small CardView using Grid.
![MaterialSmallCardView](http://www.cosmicmind.io/MK/MaterialGridSmallCardView.gif)
Below is an example of a medium CardView using Grid.
![MaterialGridMediumCardView](http://www.cosmicmind.io/MK/MaterialGridMediumCardView.gif)
Below is an example of a large CardView using Grid.
![MaterialGridLargeCardView](http://www.cosmicmind.io/MK/MaterialGridLargeCardView.gif)
[Learn More About Grid](https://github.com/CosmicMind/Material/wiki/Grid)
<a name="navigationbarview"></a> <a name="navigationbarview"></a>
## NavigationBarView ## NavigationBarView
...@@ -211,10 +232,6 @@ Easily remove the pulse animation and add a background image for an entirely new ...@@ -211,10 +232,6 @@ Easily remove the pulse animation and add a background image for an entirely new
![MaterialCardViewFavorite](http://www.cosmicmind.io/MK/MaterialCardViewFavorite.gif) ![MaterialCardViewFavorite](http://www.cosmicmind.io/MK/MaterialCardViewFavorite.gif)
Adjust the alignment of the UI elements to create different configurations of the CardView.
![MaterialCardViewDataDriven](http://www.cosmicmind.io/MK/MaterialCardViewFavoritePulse.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. 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.
![MaterialCardViewButtonBar](http://www.cosmicmind.io/MK/MaterialCardViewButtonBar.gif) ![MaterialCardViewButtonBar](http://www.cosmicmind.io/MK/MaterialCardViewButtonBar.gif)
......
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