Commit b42fb55d by Daniel Dahan

preparation for ImageCardView release

parent 3d4b16ac
Pod::Spec.new do |s|
s.name = 'MK'
s.version = '1.19.1'
s.version = '1.20.0'
s.license = { :type => "AGPLv3+", :file => "LICENSE" }
s.summary = 'A Material Design Framework In Swift'
s.homepage = 'http://materialkit.io'
......
......@@ -8,14 +8,14 @@ MaterialKit is on CocoaPods under the name [MK](https://cocoapods.org/?q=MK).
To get started, let's introduce MaterialView, a lightweight UIView Object that has flexibility in mind. Common controls have been added to make things easier. For example, let's make a circle view that has a shadow, border, and image.
![MaterialKitPreview](http://www.materialkit.io/github/img1.png)
![MaterialKitPreview](http://www.materialkit.io/github/img1.gif)
```swift
let v: MaterialView = MaterialView(frame: CGRectMake(100, 100, 200, 200))
let v: MaterialView = MaterialView(frame: CGRectMake(20, 20, view.frame.size.width - 40, 200))
v.shape = .Circle
v.shadowDepth = .Depth2
v.borderWidth = .Border1
v.image = UIImage(named: "focus")
v.image = UIImage(named: "space")
// Add to UIViewController.
view.addSubview(v)
......@@ -28,11 +28,10 @@ Let's expand on the basic MaterialView and use an animated MaterialPulseView. In
![MaterialKitPreview](http://www.materialkit.io/github/img2.gif)
```swift
let v: MaterialPulseView = MaterialPulseView(frame: CGRectMake(100, 100, 200, 200))
v.shape = .Square
let v: MaterialPulseView = MaterialPulseView(frame: CGRectMake(20, 20, view.frame.size.width - 40, 200))
v.cornerRadius = .Radius2
v.shadowDepth = .Depth2
v.image = UIImage(named: "focus")
v.image = UIImage(named: "space")
// Add to UIViewController.
view.addSubview(v)
......@@ -201,7 +200,7 @@ A BasicCardView can easily add an image as its background, below is the code tha
```swift
let v: BasicCardView = BasicCardView(titleLabel: UILabel(), detailLabel: UILabel())!
v.image = UIImage(named: "forest")
v.image = UIImage(named: "space")
v.titleLabel!.textColor = MaterialColor.white
v.titleLabel!.font = RobotoFont.regularWithSize(18)
......@@ -220,6 +219,53 @@ MaterialLayout.alignToParentHorizontallyWithInsets(view, child: v, left: 20, rig
MaterialLayout.alignFromTop(view, child: v, top: 100)
```
### Wonderful ImageCardView
An ImageCardView is a great way to enclose many components into a single and presentable layout. Below is an example of setting one up.
![MaterialKitPreview](http://www.materialkit.io/github/img10.gif)
```swift
let v: ImageCardView = ImageCardView()
v.pulseColor = MaterialColor.blueGrey.lighten4
v.pulseFill = true
v.image = UIImage(named: "space")
v.titleLabel = MaterialLabel()
v.titleLabel!.textColor = MaterialColor.white
v.titleLabel!.font = RobotoFont.regularWithSize(24)
v.titleLabel!.text = "Card Title"
v.titleLabelInsetsRef!.top = 136
v.detailLabel = MaterialLabel()
v.detailLabel!.font = RobotoFont.regularWithSize(14)
v.detailLabel!.lineBreakMode = .ByWordWrapping
v.detailLabel!.numberOfLines = 0
v.detailLabel!.text = "I am a very simple card. I am good at containing small bits of information. I am convenient because I require little code to use effectively."
let b1: FlatButton = FlatButton()
b1.setTitle("Btn 1", forState: .Normal)
let b2: FlatButton = FlatButton()
b2.setTitle("Btn 2", forState: .Normal)
v.leftButtons = [b1, b2]
let b3: FlatButton = FlatButton()
b3.setImage(UIImage(named: "ic_star_blue_grey"), forState: .Normal)
b3.setImage(UIImage(named: "ic_star_blue_grey"), forState: .Highlighted)
b3.pulseColor = MaterialColor.blueGrey.darken4
v.rightButtons = [b3]
// Add to UIViewController.
view.addSubview(v)
v.translatesAutoresizingMaskIntoConstraints = false
MaterialLayout.alignToParentHorizontallyWithInsets(view, child: v, left: 20, right: 20)
MaterialLayout.alignFromTop(view, child: v, top: 100)
```
### Easy MaterialAnimation
Animations are a wonderful way to add life to your application. MaterialAnimation is a lightweight API for constructing complex animations. Below is an example of an animation.
......
......@@ -30,7 +30,6 @@ public class BasicCardView : MaterialPulseView {
public var dividerColor: UIColor? {
didSet {
dividerLayer?.backgroundColor = dividerColor?.CGColor
reloadView()
}
}
......
......@@ -22,27 +22,25 @@ public class ImageCardView : MaterialPulseView {
//
// :name: imageLayer
//
public private(set) var imageLayer: CAShapeLayer?
public private(set) lazy var imageLayer: CAShapeLayer = CAShapeLayer()
/**
:name: image
*/
public override var image: UIImage? {
get {
return nil == imageLayer?.contents ? nil : UIImage(CGImage: imageLayer!.contents as! CGImage)
return nil == imageLayer.contents ? nil : UIImage(CGImage: imageLayer.contents as! CGImage)
}
set(value) {
if let v = value {
prepareImageLayer()
imageLayer!.contents = v.CGImage
if 0 == imageLayer!.frame.size.height {
imageLayer!.frame.size.height = 200
imageLayer.contents = v.CGImage
if 0 == imageLayer.frame.size.height {
imageLayer.frame.size.height = 200
}
}
else {
imageLayer?.frame = CGRectZero
imageLayer?.removeFromSuperlayer()
imageLayer = nil
imageLayer.frame = CGRectZero
imageLayer.removeFromSuperlayer()
}
reloadView()
}
......@@ -53,13 +51,7 @@ public class ImageCardView : MaterialPulseView {
*/
public override var contentsRect: CGRect {
didSet {
prepareImageLayer()
if let v = imageLayer {
v.contentsRect = contentsRect
if nil != imageLayer?.contents {
reloadView()
}
}
imageLayer.contentsRect = contentsRect
}
}
......@@ -68,13 +60,7 @@ public class ImageCardView : MaterialPulseView {
*/
public override var contentsCenter: CGRect {
didSet {
prepareImageLayer()
if let v = imageLayer {
v.contentsCenter = contentsCenter
if nil != imageLayer?.contents {
reloadView()
}
}
imageLayer.contentsCenter = contentsCenter
}
}
......@@ -83,13 +69,7 @@ public class ImageCardView : MaterialPulseView {
*/
public override var contentsScale: CGFloat {
didSet {
prepareImageLayer()
if let v = imageLayer {
v.contentsScale = contentsScale
if nil != imageLayer?.contents {
reloadView()
}
}
imageLayer.contentsScale = contentsScale
}
}
......@@ -98,13 +78,7 @@ public class ImageCardView : MaterialPulseView {
*/
public override var contentsGravity: MaterialGravity {
didSet {
prepareImageLayer()
if let v = imageLayer {
v.contentsGravity = MaterialGravityToString(contentsGravity)
if nil != imageLayer?.contents {
reloadView()
}
}
imageLayer.contentsGravity = MaterialGravityToString(contentsGravity)
}
}
......@@ -113,10 +87,10 @@ public class ImageCardView : MaterialPulseView {
*/
public override var masksToBounds: Bool {
get {
return nil == imageLayer?.masksToBounds ? false : imageLayer!.masksToBounds
return imageLayer.masksToBounds
}
set(value) {
imageLayer?.masksToBounds = value
imageLayer.masksToBounds = value
}
}
......@@ -131,7 +105,6 @@ public class ImageCardView : MaterialPulseView {
public var dividerColor: UIColor? {
didSet {
dividerLayer?.backgroundColor = dividerColor?.CGColor
reloadView()
}
}
......@@ -292,6 +265,7 @@ public class ImageCardView : MaterialPulseView {
*/
public required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
prepareImageLayer()
}
/**
......@@ -299,6 +273,7 @@ public class ImageCardView : MaterialPulseView {
*/
public override init(frame: CGRect) {
super.init(frame: frame)
prepareImageLayer()
}
/**
......@@ -322,10 +297,10 @@ public class ImageCardView : MaterialPulseView {
public override func layoutSubviews() {
super.layoutSubviews()
// image
let h: CGFloat? = imageLayer?.frame.size.height
imageLayer?.frame = bounds
if 0 < h {
imageLayer?.frame.size.height = h!
let h: CGFloat = imageLayer.frame.size.height
imageLayer.frame = bounds
if 0 < h && nil != imageLayer.contents {
imageLayer.frame.size.height = h
}
// divider
......@@ -359,7 +334,10 @@ public class ImageCardView : MaterialPulseView {
var views: Dictionary<String, AnyObject> = Dictionary<String, AnyObject>()
var metrics: Dictionary<String, AnyObject> = Dictionary<String, AnyObject>()
if nil != titleLabel {
if nil != imageLayer.contents {
verticalFormat += "-(insetTop)"
metrics["insetTop"] = contentInsetsRef!.top + imageLayer.frame.size.height
} else if nil != titleLabel {
verticalFormat += "-(insetTop)"
metrics["insetTop"] = contentInsetsRef!.top + titleLabelInsetsRef!.top
} else if nil != detailLabel {
......@@ -367,24 +345,21 @@ public class ImageCardView : MaterialPulseView {
metrics["insetTop"] = contentInsetsRef!.top + detailLabelInsetsRef!.top
}
// image
if 0 < imageLayer?.frame.size.height {
metrics["insetTop"] = (metrics["insetTop"] as! CGFloat) + imageLayer!.frame.size.height - (nil == titleLabel ? 0 : titleLabel!.frame.size.height)
print(titleLabel!.frame.size.height)
}
// title
if let v = titleLabel {
verticalFormat += "-[titleLabel]"
views["titleLabel"] = v
addSubview(v)
if nil == imageLayer.contents {
verticalFormat += "-[titleLabel]"
views["titleLabel"] = v
} else {
MaterialLayout.alignFromTop(self, child: v, top: contentInsetsRef!.top + titleLabelInsetsRef!.top)
}
MaterialLayout.alignToParentHorizontallyWithInsets(self, child: v, left: contentInsetsRef!.left + titleLabelInsetsRef!.left, right: contentInsetsRef!.right + titleLabelInsetsRef!.right)
}
// detail
if let v = detailLabel {
if nil != titleLabel {
if nil == imageLayer.contents && nil != titleLabel {
verticalFormat += "-(insetB)"
metrics["insetB"] = titleLabelInsetsRef!.bottom + detailLabelInsetsRef!.top
}
......@@ -487,11 +462,9 @@ public class ImageCardView : MaterialPulseView {
// :name: prepareImageLayer
//
internal func prepareImageLayer() {
if nil == imageLayer {
imageLayer = CAShapeLayer()
imageLayer!.zPosition = 0
visualLayer.addSublayer(imageLayer!)
}
imageLayer = CAShapeLayer()
imageLayer.zPosition = 0
visualLayer.addSublayer(imageLayer)
}
//
......
......@@ -15,7 +15,7 @@
<key>CFBundlePackageType</key>
<string>FMWK</string>
<key>CFBundleShortVersionString</key>
<string>1.19.1</string>
<string>1.20.0</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
......
......@@ -143,8 +143,8 @@ public extension MaterialTheme.imageCardView {
public static var masksToBounds: Bool = true
public static var cornerRadius: MaterialRadius = .None
public static var contentInsetsRef: MaterialInsetsType = MaterialInsetsToValue(.Square3)
public static var titleLabelInsetsRef: MaterialInsetsType = (top: 0, left: 0, bottom: 0, right: 0)
public static var detailLabelInsetsRef: MaterialInsetsType = (top: 16, left: 8, bottom: 16, right: 8)
public static var titleLabelInsetsRef: MaterialInsetsType = (top: 0, left: 8, bottom: 0, right: 8)
public static var detailLabelInsetsRef: MaterialInsetsType = (top: 0, left: 8, bottom: 16, right: 8)
public static var leftButtonsInsetsRef: MaterialInsetsType = (top: 8, left: 8, bottom: -8, right: 0)
public static var rightButtonsInsetsRef: MaterialInsetsType = (top: 8, left: 0, bottom: -8, 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