Skip to content

M
Material
Commit a2cf6137 by Daniel Dahan
Options

experimental: updated button animations

parent c81f4dfb
Showing with 137 additions and 109 deletions
Source/MaterialButton.swift
...@@ -25,14 +25,23 @@ public class MaterialButton : UIButton { ...@@ -25,14 +25,23 @@ public class MaterialButton : UIButton {
public private(set) lazy var visualLayer: CAShapeLayer = CAShapeLayer() public private(set) lazy var visualLayer: CAShapeLayer = CAShapeLayer()
// //
// :name: pulseLayer // :name: touchesLayer
// //
internal lazy var pulseLayer: CAShapeLayer = CAShapeLayer() internal lazy var touchesLayer: CAShapeLayer = CAShapeLayer()
// //
// :name: pulseColorOpacity // :name: pulseLayer
// //
internal var pulseColorOpacity: CGFloat! internal lazy var pulseLayer: CAShapeLayer = CAShapeLayer()
/**
:name: pulseColorOpacity
*/
public var pulseColorOpacity: CGFloat! {
didSet {
pulseColorOpacity = nil == pulseColorOpacity ? 0.5 : pulseColorOpacity!
}
}
/** /**
:name: pulseColor :name: pulseColor
...@@ -161,7 +170,7 @@ public class MaterialButton : UIButton { ...@@ -161,7 +170,7 @@ public class MaterialButton : UIButton {
*/ */
public var cornerRadius: MaterialRadius! { public var cornerRadius: MaterialRadius! {
didSet { didSet {
visualLayer.cornerRadius = MaterialRadiusToValue(nil == cornerRadius ? .Radius0 : cornerRadius!) layer.cornerRadius = MaterialRadiusToValue(nil == cornerRadius ? .Radius0 : cornerRadius!)
shape = nil shape = nil
} }
} }
...@@ -187,7 +196,7 @@ public class MaterialButton : UIButton { ...@@ -187,7 +196,7 @@ public class MaterialButton : UIButton {
*/ */
public var borderWidth: MaterialBorder! { public var borderWidth: MaterialBorder! {
didSet { didSet {
visualLayer.borderWidth = MaterialBorderToValue(nil == borderWidth ? .Border0 : borderWidth!) layer.borderWidth = MaterialBorderToValue(nil == borderWidth ? .Border0 : borderWidth!)
} }
} }
...@@ -196,7 +205,7 @@ public class MaterialButton : UIButton { ...@@ -196,7 +205,7 @@ public class MaterialButton : UIButton {
*/ */
public var borderColor: UIColor! { public var borderColor: UIColor! {
didSet { didSet {
visualLayer.borderColor = nil == borderColor ? MaterialColor.clear.CGColor : borderColor!.CGColor layer.borderColor = nil == borderColor ? MaterialColor.clear.CGColor : borderColor!.CGColor
} }
} }
...@@ -265,6 +274,10 @@ public class MaterialButton : UIButton { ...@@ -265,6 +274,10 @@ public class MaterialButton : UIButton {
public override func layoutSubviews() { public override func layoutSubviews() {
super.layoutSubviews() super.layoutSubviews()
visualLayer.frame = bounds visualLayer.frame = bounds
visualLayer.cornerRadius = layer.cornerRadius
touchesLayer.frame = bounds
touchesLayer.cornerRadius = layer.cornerRadius
} }
/** /**
...@@ -323,17 +336,21 @@ public class MaterialButton : UIButton { ...@@ -323,17 +336,21 @@ public class MaterialButton : UIButton {
visualLayer.zPosition = -1 visualLayer.zPosition = -1
layer.addSublayer(visualLayer) layer.addSublayer(visualLayer)
// touchesLayer
touchesLayer.zPosition = 1000
touchesLayer.masksToBounds = true
layer.addSublayer(touchesLayer)
// pulseLayer // pulseLayer
pulseLayer.hidden = true pulseLayer.hidden = true
pulseLayer.zPosition = 1000 touchesLayer.addSublayer(pulseLayer)
visualLayer.addSublayer(pulseLayer)
} }
// //
// :name: prepareShape // :name: prepareShape
// //
internal func prepareShape() { internal func prepareShape() {
visualLayer.cornerRadius = .Square == shape ? 0 : width / 2 layer.cornerRadius = .Square == shape ? 0 : width / 2
} }
// //
......
Source/MaterialPulseView.swift
...@@ -30,11 +30,20 @@ public class MaterialPulseView: MaterialView { ...@@ -30,11 +30,20 @@ public class MaterialPulseView: MaterialView {
internal lazy var pulseLayer: CAShapeLayer = CAShapeLayer() internal lazy var pulseLayer: CAShapeLayer = CAShapeLayer()
/** /**
:name: pulseColorOpacity
*/
public var pulseColorOpacity: CGFloat! {
didSet {
pulseColorOpacity = nil == pulseColorOpacity ? 0.5 : pulseColorOpacity!
}
}
/**
:name: pulseColor :name: pulseColor
*/ */
public var pulseColor: UIColor? { public var pulseColor: UIColor? {
didSet { didSet {
pulseLayer.backgroundColor = pulseColor?.colorWithAlphaComponent(MaterialTheme.pulseView.pulseColorOpacity).CGColor pulseLayer.backgroundColor = pulseColor?.colorWithAlphaComponent(pulseColorOpacity!).CGColor
} }
} }
...@@ -109,6 +118,7 @@ public class MaterialPulseView: MaterialView { ...@@ -109,6 +118,7 @@ public class MaterialPulseView: MaterialView {
super.prepareView() super.prepareView()
userInteractionEnabled = MaterialTheme.pulseView.userInteractionEnabled userInteractionEnabled = MaterialTheme.pulseView.userInteractionEnabled
backgroundColor = MaterialTheme.pulseView.backgroudColor backgroundColor = MaterialTheme.pulseView.backgroudColor
pulseColorOpacity = MaterialTheme.pulseView.pulseColorOpacity
pulseColor = MaterialTheme.pulseView.pulseColor pulseColor = MaterialTheme.pulseView.pulseColor
contentsRect = MaterialTheme.pulseView.contentsRect contentsRect = MaterialTheme.pulseView.contentsRect
...@@ -128,6 +138,7 @@ public class MaterialPulseView: MaterialView { ...@@ -128,6 +138,7 @@ public class MaterialPulseView: MaterialView {
touchesLayer.masksToBounds = true touchesLayer.masksToBounds = true
layer.addSublayer(touchesLayer) layer.addSublayer(touchesLayer)
// pulseLayer
pulseLayer.hidden = true pulseLayer.hidden = true
touchesLayer.addSublayer(pulseLayer) touchesLayer.addSublayer(pulseLayer)
} }
......
Source/MaterialTheme.swift
...@@ -33,206 +33,206 @@ public struct MaterialTheme { ...@@ -33,206 +33,206 @@ public struct MaterialTheme {
public extension MaterialTheme.view { public extension MaterialTheme.view {
// frame // frame
public static var x: CGFloat = 0 public static var x: CGFloat = 0
public static let y: CGFloat = 0 public static var y: CGFloat = 0
public static let width: CGFloat = UIScreen.mainScreen().bounds.width public static var width: CGFloat = UIScreen.mainScreen().bounds.width
public static let height: CGFloat = UIScreen.mainScreen().bounds.height public static var height: CGFloat = UIScreen.mainScreen().bounds.height
// shadow // shadow
public static let shadowDepth: MaterialDepth = .Depth0 public static var shadowDepth: MaterialDepth = .Depth0
public static let shadowColor: UIColor = MaterialColor.black public static var shadowColor: UIColor = MaterialColor.black
// shape // shape
public static let masksToBounds: Bool = true public static var masksToBounds: Bool = true
public static let cornerRadius: MaterialRadius = .Radius0 public static var cornerRadius: MaterialRadius = .Radius0
// border // border
public static let borderWidth: MaterialBorder = .Border0 public static var borderWidth: MaterialBorder = .Border0
public static let bordercolor: UIColor = MaterialColor.black public static var bordercolor: UIColor = MaterialColor.black
// color // color
public static let backgroudColor: UIColor = MaterialColor.white public static var backgroudColor: UIColor = MaterialColor.white
// interaction // interaction
public static let userInteractionEnabled: Bool = true public static var userInteractionEnabled: Bool = true
// image // image
public static let contentsRect: CGRect = CGRectMake(0, 0, 1, 1) public static var contentsRect: CGRect = CGRectMake(0, 0, 1, 1)
public static let contentsCenter: CGRect = CGRectMake(0, 0, 1, 1) public static var contentsCenter: CGRect = CGRectMake(0, 0, 1, 1)
public static let contentsScale: CGFloat = UIScreen.mainScreen().scale public static var contentsScale: CGFloat = UIScreen.mainScreen().scale
public static let contentsGravity: MaterialGravity = .ResizeAspectFill public static var contentsGravity: MaterialGravity = .ResizeAspectFill
// position // position
public static let zPosition: CGFloat = 0 public static var zPosition: CGFloat = 0
} }
// pulseView // pulseView
public extension MaterialTheme.pulseView { public extension MaterialTheme.pulseView {
// frame // frame
public static let x: CGFloat = MaterialTheme.view.x public static var x: CGFloat = MaterialTheme.view.x
public static let y: CGFloat = MaterialTheme.view.y public static var y: CGFloat = MaterialTheme.view.y
public static let width: CGFloat = MaterialTheme.view.width public static var width: CGFloat = MaterialTheme.view.width
public static let height: CGFloat = MaterialTheme.view.height public static var height: CGFloat = MaterialTheme.view.height
// shadow // shadow
public static let shadowDepth: MaterialDepth = MaterialTheme.view.shadowDepth public static var shadowDepth: MaterialDepth = MaterialTheme.view.shadowDepth
public static let shadowColor: UIColor = MaterialTheme.view.shadowColor public static var shadowColor: UIColor = MaterialTheme.view.shadowColor
// shape // shape
public static let masksToBounds: Bool = true public static var masksToBounds: Bool = true
public static let cornerRadius: MaterialRadius = MaterialTheme.view.cornerRadius public static var cornerRadius: MaterialRadius = MaterialTheme.view.cornerRadius
// border // border
public static let borderWidth: MaterialBorder = MaterialTheme.view.borderWidth public static var borderWidth: MaterialBorder = MaterialTheme.view.borderWidth
public static let bordercolor: UIColor = MaterialTheme.view.bordercolor public static var bordercolor: UIColor = MaterialTheme.view.bordercolor
// color // color
public static let backgroudColor: UIColor = MaterialColor.clear public static var backgroudColor: UIColor = MaterialColor.clear
public static let pulseColor: UIColor = MaterialColor.white public static var pulseColor: UIColor = MaterialColor.white
public static let pulseColorOpacity: CGFloat = 0.5 public static var pulseColorOpacity: CGFloat = 0.5
// interaction // interaction
public static let userInteractionEnabled: Bool = MaterialTheme.view.userInteractionEnabled public static var userInteractionEnabled: Bool = MaterialTheme.view.userInteractionEnabled
// image // image
public static let contentsRect: CGRect = MaterialTheme.view.contentsRect public static var contentsRect: CGRect = MaterialTheme.view.contentsRect
public static let contentsCenter: CGRect = MaterialTheme.view.contentsCenter public static var contentsCenter: CGRect = MaterialTheme.view.contentsCenter
public static let contentsScale: CGFloat = MaterialTheme.view.contentsScale public static var contentsScale: CGFloat = MaterialTheme.view.contentsScale
public static let contentsGravity: MaterialGravity = MaterialTheme.view.contentsGravity public static var contentsGravity: MaterialGravity = MaterialTheme.view.contentsGravity
// position // position
public static let zPosition: CGFloat = MaterialTheme.view.zPosition public static var zPosition: CGFloat = MaterialTheme.view.zPosition
} }
// navigation // navigation
public extension MaterialTheme.navigation { public extension MaterialTheme.navigation {
// frame // frame
public static let x: CGFloat = MaterialTheme.view.x public static var x: CGFloat = MaterialTheme.view.x
public static let y: CGFloat = MaterialTheme.view.y public static var y: CGFloat = MaterialTheme.view.y
public static let width: CGFloat = MaterialTheme.view.width public static var width: CGFloat = MaterialTheme.view.width
public static let height: CGFloat = 70 public static var height: CGFloat = 70
// shadow // shadow
public static let shadowDepth: MaterialDepth = .Depth1 public static var shadowDepth: MaterialDepth = .Depth1
public static let shadowColor: UIColor = MaterialTheme.view.shadowColor public static var shadowColor: UIColor = MaterialTheme.view.shadowColor
// shape // shape
public static let masksToBounds: Bool = MaterialTheme.view.masksToBounds public static var masksToBounds: Bool = MaterialTheme.view.masksToBounds
public static let cornerRadius: MaterialRadius = MaterialTheme.view.cornerRadius public static var cornerRadius: MaterialRadius = MaterialTheme.view.cornerRadius
// border // border
public static let borderWidth: MaterialBorder = MaterialTheme.view.borderWidth public static var borderWidth: MaterialBorder = MaterialTheme.view.borderWidth
public static let bordercolor: UIColor = MaterialTheme.view.bordercolor public static var bordercolor: UIColor = MaterialTheme.view.bordercolor
// color // color
public static let backgroudColor: UIColor = MaterialColor.blue.accent3 public static var backgroudColor: UIColor = MaterialColor.blue.accent3
public static let lightContentStatusBar: Bool = true public static var lightContentStatusBar: Bool = true
// interaction // interaction
public static let userInteractionEnabled: Bool = true public static var userInteractionEnabled: Bool = true
// image // image
public static let contentsRect: CGRect = MaterialTheme.view.contentsRect public static var contentsRect: CGRect = MaterialTheme.view.contentsRect
public static let contentsCenter: CGRect = MaterialTheme.view.contentsCenter public static var contentsCenter: CGRect = MaterialTheme.view.contentsCenter
public static let contentsScale: CGFloat = MaterialTheme.view.contentsScale public static var contentsScale: CGFloat = MaterialTheme.view.contentsScale
public static let contentsGravity: MaterialGravity = MaterialTheme.view.contentsGravity public static var contentsGravity: MaterialGravity = MaterialTheme.view.contentsGravity
// position // position
public static let zPosition: CGFloat = 100 public static var zPosition: CGFloat = 100
} }
// button.flat // button.flat
public extension MaterialTheme.button.flat { public extension MaterialTheme.button.flat {
// shadow // shadow
public static let shadowDepth: MaterialDepth = .Depth0 public static var shadowDepth: MaterialDepth = .Depth0
public static let shadowColor: UIColor = MaterialTheme.view.shadowColor public static var shadowColor: UIColor = MaterialTheme.view.shadowColor
// shape // shape
public static let masksToBounds: Bool = true public static var masksToBounds: Bool = true
public static let cornerRadius: MaterialRadius = .Radius1 public static var cornerRadius: MaterialRadius = .Radius1
public static let contentInsets: MaterialInsets = .Inset2 public static var contentInsets: MaterialInsets = .Inset2
public static let shape: MaterialShape? = nil public static var shape: MaterialShape? = nil
// border // border
public static let borderWidth: MaterialBorder = MaterialTheme.view.borderWidth public static var borderWidth: MaterialBorder = MaterialTheme.view.borderWidth
public static let bordercolor: UIColor = MaterialTheme.view.bordercolor public static var bordercolor: UIColor = MaterialTheme.view.bordercolor
// color // color
public static let backgroudColor: UIColor = MaterialColor.clear public static var backgroudColor: UIColor = MaterialColor.clear
public static let pulseColor: UIColor = MaterialColor.blue.accent3 public static var pulseColor: UIColor = MaterialColor.blue.accent3
public static let pulseColorOpacity: CGFloat = MaterialTheme.pulseView.pulseColorOpacity public static var pulseColorOpacity: CGFloat = MaterialTheme.pulseView.pulseColorOpacity
public static let titleLabelColorForNormalState: UIColor = MaterialColor.blue.accent3 public static var titleLabelColorForNormalState: UIColor = MaterialColor.blue.accent3
// interaction // interaction
public static let userInteractionEnabled: Bool = true public static var userInteractionEnabled: Bool = true
// position // position
public static let zPosition: CGFloat = 200 public static var zPosition: CGFloat = 200
// font // font
public static let titleLabelFont: UIFont = RobotoFont.regular public static var titleLabelFont: UIFont = RobotoFont.regular
} }
// button.raised // button.raised
public extension MaterialTheme.button.raised { public extension MaterialTheme.button.raised {
// shadow // shadow
public static let shadowDepth: MaterialDepth = .Depth2 public static var shadowDepth: MaterialDepth = .Depth2
public static let shadowColor: UIColor = MaterialTheme.view.shadowColor public static var shadowColor: UIColor = MaterialTheme.view.shadowColor
// shape // shape
public static let masksToBounds: Bool = true public static var masksToBounds: Bool = true
public static let cornerRadius: MaterialRadius = .Radius1 public static var cornerRadius: MaterialRadius = .Radius1
public static let contentInsets: MaterialInsets = .Inset2 public static var contentInsets: MaterialInsets = .Inset2
public static let shape: MaterialShape? = nil public static var shape: MaterialShape? = nil
// border // border
public static let borderWidth: MaterialBorder = MaterialTheme.view.borderWidth public static var borderWidth: MaterialBorder = MaterialTheme.view.borderWidth
public static let bordercolor: UIColor = MaterialTheme.view.bordercolor public static var bordercolor: UIColor = MaterialTheme.view.bordercolor
// color // color
public static let backgroudColor: UIColor = MaterialColor.blue.accent3 public static var backgroudColor: UIColor = MaterialColor.blue.accent3
public static let pulseColor: UIColor = MaterialColor.white public static var pulseColor: UIColor = MaterialColor.white
public static let pulseColorOpacity: CGFloat = MaterialTheme.pulseView.pulseColorOpacity public static var pulseColorOpacity: CGFloat = MaterialTheme.pulseView.pulseColorOpacity
public static let titleLabelColorForNormalState: UIColor = MaterialColor.white public static var titleLabelColorForNormalState: UIColor = MaterialColor.white
// interaction // interaction
public static let userInteractionEnabled: Bool = true public static var userInteractionEnabled: Bool = true
// position // position
public static let zPosition: CGFloat = 200 public static var zPosition: CGFloat = 200
// font // font
public static let titleLabelFont: UIFont = RobotoFont.regular public static var titleLabelFont: UIFont = RobotoFont.regular
} }
// button.fab // button.fab
public extension MaterialTheme.button.fab { public extension MaterialTheme.button.fab {
// shadow // shadow
public static let shadowDepth: MaterialDepth = .Depth2 public static var shadowDepth: MaterialDepth = .Depth2
public static let shadowColor: UIColor = MaterialTheme.view.shadowColor public static var shadowColor: UIColor = MaterialTheme.view.shadowColor
// shape // shape
public static let masksToBounds: Bool = true public static var masksToBounds: Bool = true
public static let cornerRadius: MaterialRadius = .Radius0 public static var cornerRadius: MaterialRadius = .Radius0
public static let contentInsets: MaterialInsets = .Inset0 public static var contentInsets: MaterialInsets = .Inset0
public static let shape: MaterialShape? = .Circle public static var shape: MaterialShape? = .Circle
// border // border
public static let borderWidth: MaterialBorder = MaterialTheme.view.borderWidth public static var borderWidth: MaterialBorder = MaterialTheme.view.borderWidth
public static let bordercolor: UIColor = MaterialTheme.view.bordercolor public static var bordercolor: UIColor = MaterialTheme.view.bordercolor
// color // color
public static let backgroudColor: UIColor = MaterialColor.red.darken1 public static var backgroudColor: UIColor = MaterialColor.red.darken1
public static let pulseColor: UIColor = MaterialColor.white public static var pulseColor: UIColor = MaterialColor.white
public static let pulseColorOpacity: CGFloat = MaterialTheme.pulseView.pulseColorOpacity public static var pulseColorOpacity: CGFloat = MaterialTheme.pulseView.pulseColorOpacity
public static let titleLabelColorForNormalState: UIColor = MaterialColor.white public static var titleLabelColorForNormalState: UIColor = MaterialColor.white
// interaction // interaction
public static let userInteractionEnabled: Bool = true public static var userInteractionEnabled: Bool = true
// position // position
public static let zPosition: CGFloat = 200 public static var zPosition: CGFloat = 200
// font // font
public static let titleLabelFont: UIFont = RobotoFont.regular public static var titleLabelFont: UIFont = RobotoFont.regular
} }
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