development: reworking internals for Cards

Examples/Programmatic/Card/Card/ViewController.swift

@@ -68,6 +68,7 @@ class ViewController: UIViewController {
         dateFormatter.dateStyle = .medium
         dateFormatter.timeStyle = .none
     }
+    
     private func prepareDateLabel() {
         dateLabel = UILabel()
         dateLabel.font = RobotoFont.regular(with: 12)

Examples/Programmatic/ImageCard/ImageCard/ViewController.swift

@@ -32,95 +32,76 @@ import UIKit
 import Material
 
 class ViewController: UIViewController {
-    private var card: ImageCard!
-    
-    /// Conent area.
-    private var imageView: UIImageView!
-    private var contentView: UILabel!
-    
-    /// Bottom Bar views.
-    private var bottomBar: Bar!
-    private var favoriteButton: FlatButton!
-    private var shareButton: FlatButton!
-    private var starButton: FlatButton!
-    
-    /// Toolbar views.
-    private var toolbar: Toolbar!
-    private var moreButton: IconButton!
+    /// View.
+    internal var imageCard: ImageCard!
     
     override func viewDidLoad() {
         super.viewDidLoad()
         view.backgroundColor = Color.grey.lighten5
         
-        prepareImageView()
-        prepareFavoriteButton()
-        prepareShareButton()
-        prepareStarButton()
-        prepareMoreButton()
-        prepareToolbar()
-        prepareContentView()
-        prepareBottomBar()
+        // Prepare view.
         prepareImageCard()
     }
+}
 
-    private func prepareImageView() {
-        imageView = UIImageView()
-        imageView.image = UIImage(named: "frontier.jpg")?.resize(toWidth: view.width)
-        imageView.contentMode = .scaleAspectFill
-    }
+/// ImageCard.
+extension ViewController {
+    internal func prepareImageCard() {
+        imageCard = ImageCard()
+        view.layout(imageCard).horizontally(left: 20, right: 20).center()
         
-    private func prepareFavoriteButton() {
-        favoriteButton = FlatButton(image: Icon.favorite, tintColor: Color.blueGrey.base)
+        prepareToolbar()
+        prepareImageView()
+        prepareContentView()
+        prepareBottomBar()
     }
     
-    private func prepareShareButton() {
-        shareButton = FlatButton(image: Icon.cm.share, tintColor: Color.blueGrey.base)
-    }
+    private func prepareToolbar() {
+        imageCard.toolbar = Toolbar()
+        imageCard.toolbar?.backgroundColor = .clear
+        imageCard.toolbarEdgeInsetsPreset = .square3
         
-    private func prepareStarButton() {
-        starButton = FlatButton(image: Icon.cm.star, tintColor: Color.blueGrey.base)
-    }
+        // Use the property subscript to access the model data.
+        imageCard.toolbar?.title = "Graph"
+        imageCard.toolbar?.titleLabel.textColor = .white
         
-    private func prepareMoreButton() {
-        moreButton = IconButton(image: Icon.cm.moreHorizontal, tintColor: .white)
+        imageCard.toolbar?.detail = "Build Data-Driven Software"
+        imageCard.toolbar?.detailLabel.textColor = .white
     }
     
-    private func prepareToolbar() {
-        toolbar = Toolbar()
-        toolbar.backgroundColor = nil
-        
-        toolbar.title = "CosmicMind"
-        toolbar.titleLabel.textColor = .white
-        
-        toolbar.detail = "Build Beautiful Software"
-        toolbar.detailLabel.textColor = .white
+    private func prepareImageView() {
+        imageCard.imageView = UIImageView()
+        imageCard.imageView?.image = UIImage(named: "frontier.jpg")?.resize(toWidth: view.width)
     }
     
     private func prepareContentView() {
-        contentView = UILabel()
-        contentView.numberOfLines = 0
-        contentView.text = "Build beautiful applications that are intelligently driven using Material, Graph, and Algorithm."
-        contentView.font = RobotoFont.regular(with: 14)
-    }
+        let label = UILabel()
+        label.numberOfLines = 0
+        label.text = "Graph is a semantic database that is used to create data-driven applications."
+        label.font = RobotoFont.regular(with: 14)
         
-    private func prepareBottomBar() {
-        bottomBar = Bar(centerViews: [favoriteButton, shareButton, starButton])
+        imageCard.contentView = label
+        imageCard.contentViewEdgeInsetsPreset = .square3
     }
     
-    private func prepareImageCard() {
-        card = ImageCard()
-        
-        card.imageView = imageView
-        
-        card.toolbar = toolbar
-        card.toolbarEdgeInsetsPreset = .square3
-        
-        card.contentView = contentView
-        card.contentViewEdgeInsetsPreset = .square3
-        
-        card.bottomBar = bottomBar
-        
-        view.layout(card).horizontally(left: 20, right: 20).center()
+    private func prepareBottomBar() {
+        let shareButton = IconButton(image: Icon.cm.share, tintColor: Color.blueGrey.base)
+        let favoriteButton = IconButton(image: Icon.favorite, tintColor: Color.red.base)
+        
+        let label = UILabel()
+        label.text = "CosmicMind"
+        label.textAlignment = .center
+        label.textColor = Color.blueGrey.base
+        label.font = RobotoFont.regular(with: 12)
+        
+        imageCard.bottomBar = Bar()
+        imageCard.bottomBarEdgeInsetsPreset = .wideRectangle2
+        imageCard.bottomBarEdgeInsets.top = 0
+        imageCard.bottomBar?.contentViewAlignment = .center
+        
+        imageCard.bottomBar?.leftViews = [favoriteButton]
+        imageCard.bottomBar?.centerViews = [label]
+        imageCard.bottomBar?.rightViews = [shareButton]
     }
 }
 

Examples/Programmatic/Layer/Layer/ViewController.swift

@@ -49,7 +49,7 @@ class ViewController: UIViewController {
         layer = Layer(frame: CGRect(x: (w - d) / 2, y: (h - d) / 2, width: d, height: d))
         layer.depthPreset = .depth3
         layer.shapePreset = .circle
-        layer.bgColor = .white
+        layer.backgroundColor = Color.white.cgColor
         layer.image = UIImage(named: "CosmicMind")
         
         view.layer.addSublayer(layer)

Examples/Programmatic/TabBar/TabBar/ViewController.swift

@@ -55,6 +55,30 @@ class ViewController: UIViewController {
         let btn3 = FlatButton(title: "Video", titleColor: Color.blueGrey.base)
         btn3.pulseAnimation = .none
         buttons.append(btn3)
+        
+        let btn4 = FlatButton(title: "Video", titleColor: Color.blueGrey.base)
+        btn4.pulseAnimation = .none
+        buttons.append(btn4)
+        
+        let btn5 = FlatButton(title: "Video 1", titleColor: Color.blueGrey.base)
+        btn5.pulseAnimation = .none
+        buttons.append(btn5)
+//        
+//        let btn6 = FlatButton(title: "Video 2", titleColor: Color.blueGrey.base)
+//        btn6.pulseAnimation = .none
+//        buttons.append(btn6)
+//    
+//        let btn7 = FlatButton(title: "Video 3", titleColor: Color.blueGrey.base)
+//        btn7.pulseAnimation = .none
+//        buttons.append(btn7)
+//        
+//        let btn8 = FlatButton(title: "Video 4", titleColor: Color.blueGrey.base)
+//        btn8.pulseAnimation = .none
+//        buttons.append(btn8)
+//        
+//        let btn9 = FlatButton(title: "Video 5", titleColor: Color.blueGrey.base)
+//        btn9.pulseAnimation = .none
+//        buttons.append(btn9)
     }
     
     private func prepareTabBar() {

Sources/iOS/Bar.swift

@@ -125,15 +125,12 @@ open class Bar: View {
     }
     
     /// Center UIViews.
-    open var centerViews: [UIView] {
-        get {
-            return contentView.grid.views
-        }
-        set(value) {
-            for v in contentView.grid.views {
+    open var centerViews = [UIView]() {
+        didSet {
+            for v in oldValue {
                 v.removeFromSuperview()
             }
-            contentView.grid.views = value
+            layoutSubviews()
         }
     }
     
@@ -168,12 +165,13 @@ open class Bar: View {
      - Parameter centerViews: An Array of UIViews that go in the center.
      */
     public init(leftViews: [UIView]? = nil, rightViews: [UIView]? = nil, centerViews: [UIView]? = nil) {
+        super.init(frame: .zero)
         self.leftViews = leftViews ?? []
         self.rightViews = rightViews ?? []
-        super.init(frame: .zero)
         self.centerViews = centerViews ?? []
         frame.size = intrinsicContentSize
     }
+    
     open override func layoutSubviews() {
         super.layoutSubviews()
         guard willLayout else {
@@ -224,6 +222,7 @@ open class Bar: View {
         }
         
         contentView.grid.begin()
+        contentView.grid.views = centerViews
         
         if .center == contentViewAlignment {
             if lc < rc {

Sources/iOS/Button.swift

@@ -79,7 +79,7 @@ open class Button: UIButton {
 	@IBInspectable
     open override var backgroundColor: UIColor? {
 		didSet {
-			layer.bgColor = backgroundColor
+			layer.backgroundColor = backgroundColor?.cgColor
 		}
 	}
 	
@@ -192,6 +192,8 @@ open class Button: UIButton {
             }
             Animation.pulseContractAnimation(layer: s.layer, visualLayer: s.visualLayer, pulse: &s.pulse)
         }
+        
+        bringImageViewToFront()
     }
     
     /**
@@ -203,6 +205,8 @@ open class Button: UIButton {
     open override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
         super.touchesBegan(touches, with: event)
         Animation.pulseExpandAnimation(layer: layer, visualLayer: visualLayer, point: layer.convert(touches.first!.location(in: self), from: layer), width: width, height: height, pulse: &pulse)
+        
+        bringImageViewToFront()
     }
     
     /**
@@ -227,6 +231,14 @@ open class Button: UIButton {
         Animation.pulseContractAnimation(layer: layer, visualLayer: visualLayer, pulse: &pulse)
     }
 	
+    open func bringImageViewToFront() {
+        guard let v = imageView else {
+            return
+        }
+        
+        bringSubview(toFront: v)
+    }
+    
 	/**
      Prepares the view instance when intialized. When subclassing,
      it is recommended to override the prepare method

Sources/iOS/CapturePreview.swift

@@ -70,7 +70,7 @@ open class CapturePreview: View {
 
     /// Prepares the previewLayer.
 	private func preparePreviewLayer() {
-		layer.bgColor = .black
+		layer.backgroundColor = Color.black.cgColor
 		layer.masksToBounds = true
 		(layer as! AVCaptureVideoPreviewLayer).videoGravity = AVLayerVideoGravityResizeAspectFill
 	}

Sources/iOS/Card.swift

@@ -178,7 +178,7 @@ open class Card: PulseView {
     /// Reloads the layout.
     open func reload() {
         // Clear constraints so new ones do not conflict.
-        container.removeConstraints(constraints)
+        container.removeConstraints(container.constraints)
         for v in container.subviews {
             v.removeFromSuperview()
         }
@@ -193,9 +193,7 @@ open class Card: PulseView {
             
             format += "-(toolbarTop)-[toolbar]-(toolbarBottom)"
             views["toolbar"] = v
-            container.layout(v).horizontally(left: toolbarEdgeInsets.left, right: toolbarEdgeInsets.right).height(v.height)
-            v.grid.reload()
-            v.divider.reload()
+            container.layout(v).horizontally(left: toolbarEdgeInsets.left, right: toolbarEdgeInsets.right)
         }
         
         if let v = contentView {
@@ -211,6 +209,7 @@ open class Card: PulseView {
             
             views["contentView"] = v
             container.layout(v).horizontally(left: contentViewEdgeInsets.left, right: contentViewEdgeInsets.right)
+            
             v.grid.reload()
             v.divider.reload()
         }
@@ -230,9 +229,7 @@ open class Card: PulseView {
             }
             
             views["bottomBar"] = v
-            container.layout(v).horizontally(left: bottomBarEdgeInsets.left, right: bottomBarEdgeInsets.right).height(v.height)
-            v.grid.reload()
-            v.divider.reload()
+            container.layout(v).horizontally(left: bottomBarEdgeInsets.left, right: bottomBarEdgeInsets.right)
         }
         
         guard 0 < views.count else {

Sources/iOS/CollectionReusableView.swift

@@ -186,7 +186,7 @@ open class CollectionReusableView: UICollectionReusableView {
 	/// A property that accesses the backing layer's background
 	@IBInspectable open override var backgroundColor: UIColor? {
 		didSet {
-			layer.bgColor = backgroundColor
+			layer.backgroundColor = backgroundColor?.cgColor
 		}
 	}
 	

Sources/iOS/CollectionViewCell.swift

@@ -193,7 +193,7 @@ open class CollectionViewCell: UICollectionViewCell {
 	@IBInspectable
     open override var backgroundColor: UIColor? {
 		didSet {
-			layer.bgColor = backgroundColor
+			layer.backgroundColor = backgroundColor?.cgColor
 		}
 	}
 	

Sources/iOS/Font.swift

@@ -32,31 +32,31 @@ import UIKit
 
 public protocol FontType {}
 
-public struct Font: FontType {
+public struct Font {
 	/// Size of font.
 	public static let pointSize: CGFloat = 16
 	
 	/** 
      Retrieves the system font with a specified size.
-     - Parameter fontName: A String font name.
+     - Parameter ofSize size: A CGFloat.
      */
-    public static func systemFontWithSize(size: CGFloat) -> UIFont {
+    public static func systemFont(ofSize size: CGFloat) -> UIFont {
 		return UIFont.systemFont(ofSize: size)
 	}
 	
 	/**
      Retrieves the bold system font with a specified size..
-     - Parameter fontName: A String font name.
+     - Parameter ofSize size: A CGFloat.
      */
-    public static func boldSystemFontWithSize(size: CGFloat) -> UIFont {
+    public static func boldSystemFont(ofSize size: CGFloat) -> UIFont {
 		return UIFont.boldSystemFont(ofSize: size)
 	}
 	
 	/**
      Retrieves the italic system font with a specified size.
-     - Parameter fontName: A String font name.
+     - Parameter ofSize size: A CGFloat.
      */
-    public static func italicSystemFontWithSize(size: CGFloat) -> UIFont {
+    public static func italicSystemFont(ofSize size: CGFloat) -> UIFont {
 		return UIFont.italicSystemFont(ofSize: size)
 	}
     

Sources/iOS/ImageCard.swift

@@ -74,7 +74,7 @@ open class ImageCard: Card {
         }
         
         // Clear constraints so new ones do not conflict.
-        container.removeConstraints(constraints)
+        container.removeConstraints(container.constraints)
         for v in container.subviews {
             v.removeFromSuperview()
         }
@@ -89,18 +89,16 @@ open class ImageCard: Card {
         format += "-(imageViewTop)-[imageView]-(imageViewBottom)"
         views["imageView"] = iv
         container.layout(iv).horizontally(left: imageViewEdgeInsets.left, right: imageViewEdgeInsets.right)
+        
+        iv.grid.reload()
         iv.divider.reload()
         
         if let v = toolbar {
-            iv.layout(v).horizontally(left: toolbarEdgeInsets.left, right: toolbarEdgeInsets.right).height(v.height)
+            iv.layoutIfNeeded()
             
-            if .top == toolbarAlignment {
-                iv.layout(v).top(toolbarEdgeInsets.top)
-            } else {
-                iv.layout(v).bottom(toolbarEdgeInsets.bottom)
-            }
-            v.grid.reload()
-            v.divider.reload()
+            container.layout(v)
+                .horizontally(left: toolbarEdgeInsets.left, right: toolbarEdgeInsets.right)
+                .top(.top == toolbarAlignment ? toolbarEdgeInsets.top : iv.height - v.height - toolbarEdgeInsets.bottom)
         }
         
         if let v = contentView {
@@ -110,6 +108,7 @@ open class ImageCard: Card {
             format += "-[contentView]-(contentViewBottom)"
             views["contentView"] = v
             container.layout(v).horizontally(left: contentViewEdgeInsets.left, right: contentViewEdgeInsets.right)
+            
             v.grid.reload()
             v.divider.reload()
         }
@@ -126,9 +125,7 @@ open class ImageCard: Card {
             }
             
             views["bottomBar"] = v
-            container.layout(v).horizontally(left: bottomBarEdgeInsets.left, right: bottomBarEdgeInsets.right).height(v.height)
-            v.grid.reload()
-            v.divider.reload()
+            container.layout(v).horizontally(left: bottomBarEdgeInsets.left, right: bottomBarEdgeInsets.right)
         }
         
         guard 0 < views.count else {

Sources/iOS/Material+CALayer.swift

@@ -248,16 +248,6 @@ extension CALayer {
         }
     }
     
-    /// A UIColor reference to the `backgroundColor`.
-    open var bgColor: UIColor? {
-        get {
-            return nil == backgroundColor ? nil : UIColor(cgColor: backgroundColor!)
-        }
-        set(value) {
-            backgroundColor = bgColor?.cgColor
-        }
-    }
-    
     /**
      A method that accepts CAAnimation objects and executes them on the
      view's backing layer.

Sources/iOS/NavigationBar.swift

@@ -220,6 +220,8 @@ open class NavigationBar: UINavigationBar {
         }
         
         item.contentView.grid.begin()
+        item.contentView.grid.views = item.centerViews
+        
         if .center == item.contentViewAlignment {
             if lc < rc {
                 item.contentView.grid.columns = columns - 2 * rc

Sources/iOS/NavigationItem.swift

@@ -57,6 +57,9 @@ public class NavigationItem: NSObject {
 	/// Left items.
     public var leftViews = [UIView]() {
         didSet {
+            for v in oldValue {
+                v.removeFromSuperview()
+            }
             navigationBar?.layoutSubviews()
         }
     }
@@ -64,6 +67,9 @@ public class NavigationItem: NSObject {
 	/// Right items.
     public var rightViews = [UIView]() {
         didSet {
+            for v in oldValue {
+                v.removeFromSuperview()
+            }
             navigationBar?.layoutSubviews()
         }
     }
@@ -71,6 +77,9 @@ public class NavigationItem: NSObject {
     /// Center items.
     public var centerViews = [UIView]() {
         didSet {
+            for v in oldValue {
+                v.removeFromSuperview()
+            }
             navigationBar?.layoutSubviews()
         }
     }
@@ -205,13 +214,10 @@ extension UINavigationItem {
     /// Center UIViews.
     open var centerViews: [UIView] {
         get {
-            return navigationItem.contentView.grid.views
+            return navigationItem.centerViews
         }
         set(value) {
-            for v in navigationItem.contentView.grid.views {
-                v.removeFromSuperview()
-            }
-            navigationItem.contentView.grid.views = value
+            navigationItem.centerViews = value
         }
     }
 }

Sources/iOS/PresenterCard.swift

@@ -56,7 +56,7 @@ open class PresenterCard: Card {
     
     open override func reload() {
         // Clear constraints so new ones do not conflict.
-        container.removeConstraints(constraints)
+        container.removeConstraints(container.constraints)
         for v in container.subviews {
             v.removeFromSuperview()
         }
@@ -71,9 +71,7 @@ open class PresenterCard: Card {
             
             format += "-(toolbarTop)-[toolbar]-(toolbarBottom)"
             views["toolbar"] = v
-            container.layout(v).horizontally(left: toolbarEdgeInsets.left, right: toolbarEdgeInsets.right).height(v.height)
-            v.grid.reload()
-            v.divider.reload()
+            container.layout(v).horizontally(left: toolbarEdgeInsets.left, right: toolbarEdgeInsets.right)
         }
         
         if let v = presenterView {
@@ -89,6 +87,7 @@ open class PresenterCard: Card {
             
             views["presenterView"] = v
             container.layout(v).horizontally(left: presenterViewEdgeInsets.left, right: presenterViewEdgeInsets.right)
+            
             v.grid.reload()
             v.divider.reload()
         }
@@ -109,6 +108,7 @@ open class PresenterCard: Card {
             
             views["contentView"] = v
             container.layout(v).horizontally(left: contentViewEdgeInsets.left, right: contentViewEdgeInsets.right)
+            
             v.grid.reload()
             v.divider.reload()
         }
@@ -131,9 +131,7 @@ open class PresenterCard: Card {
             }
             
             views["bottomBar"] = v
-            container.layout(v).horizontally(left: bottomBarEdgeInsets.left, right: bottomBarEdgeInsets.right).height(v.height)
-            v.grid.reload()
-            v.divider.reload()
+            container.layout(v).horizontally(left: bottomBarEdgeInsets.left, right: bottomBarEdgeInsets.right)
         }
         
         guard 0 < views.count else {

Sources/iOS/PulseAnimation.swift

@@ -66,6 +66,8 @@ internal extension Animation {
         bLayer.addSublayer(pLayer)
         pulse.layers.insert(bLayer, at: 0)
         visualLayer.addSublayer(bLayer)
+        bLayer.zPosition = 0
+        pLayer.zPosition = 0
         
         visualLayer.masksToBounds = !(.centerRadialBeyondBounds == pulse.animation || .radialBeyondBounds == pulse.animation)
         
@@ -81,7 +83,7 @@ internal extension Animation {
             }
             
             pLayer.cornerRadius = n / 2
-            pLayer.bgColor = pulse.color.withAlphaComponent(pulse.opacity)
+            pLayer.backgroundColor = pulse.color.withAlphaComponent(pulse.opacity).cgColor
             pLayer.transform = CATransform3DMakeAffineTransform(CGAffineTransform(scaleX: 0, y: 0))
         })
         

Sources/iOS/RobotoFont.swift

@@ -68,10 +68,12 @@ public struct RobotoFont: FontType {
      */
     public static func thin(with size: CGFloat) -> UIFont {
         Font.loadFontIfNeeded(name: "Roboto-Thin")
+		
         if let f = UIFont(name: "Roboto-Thin", size: size) {
 			return f
 		}
-		return Font.systemFontWithSize(size: size)
+		
+        return Font.systemFont(ofSize: size)
 	}
 	
     /**
@@ -81,10 +83,12 @@ public struct RobotoFont: FontType {
      */
     public static func light(with size: CGFloat) -> UIFont {
         Font.loadFontIfNeeded(name: "Roboto-Light")
+		
         if let f = UIFont(name: "Roboto-Light", size: size) {
 			return f
 		}
-		return Font.systemFontWithSize(size: size)
+		
+        return Font.systemFont(ofSize: size)
 	}
 	
     /**
@@ -94,10 +98,12 @@ public struct RobotoFont: FontType {
      */
     public static func regular(with size: CGFloat) -> UIFont {
         Font.loadFontIfNeeded(name: "Roboto-Regular")
+		
         if let f = UIFont(name: "Roboto-Regular", size: size) {
 			return f
 		}
-		return Font.systemFontWithSize(size: size)
+		
+        return Font.systemFont(ofSize: size)
 	}
 	
     /**
@@ -107,10 +113,12 @@ public struct RobotoFont: FontType {
      */
     public static func medium(with size: CGFloat) -> UIFont {
 		Font.loadFontIfNeeded(name: "Roboto-Medium")
+		
         if let f = UIFont(name: "Roboto-Medium", size: size) {
 			return f
 		}
-		return Font.boldSystemFontWithSize(size: size)
+		
+        return Font.boldSystemFont(ofSize: size)
 	}
 	
     /**
@@ -120,9 +128,11 @@ public struct RobotoFont: FontType {
      */
     public static func bold(with size: CGFloat) -> UIFont {
         Font.loadFontIfNeeded(name: "Roboto-Bold")
+		
         if let f = UIFont(name: "Roboto-Bold", size: size) {
 			return f
 		}
-		return Font.boldSystemFontWithSize(size: size)
+		
+        return Font.boldSystemFont(ofSize: size)
 	}
 }

Sources/iOS/TableViewCell.swift

@@ -78,7 +78,7 @@ open class TableViewCell: UITableViewCell {
 	@IBInspectable
     open override var backgroundColor: UIColor? {
 		didSet {
-			layer.bgColor = backgroundColor
+			layer.backgroundColor = backgroundColor?.cgColor
 		}
 	}
 	

Sources/iOS/TextView.swift

@@ -38,7 +38,7 @@ public class TextView: UITextView {
 	/// A property that accesses the backing layer's background
 	@IBInspectable public override var backgroundColor: UIColor? {
 		didSet {
-			layer.bgColor = backgroundColor
+			layer.backgroundColor = backgroundColor?.cgColor
 		}
 	}
 	

Sources/iOS/View.swift

@@ -120,7 +120,7 @@ open class View: UIView {
 	@IBInspectable
     open override var backgroundColor: UIColor? {
 		didSet {
-			layer.bgColor = backgroundColor
+			layer.backgroundColor = backgroundColor?.cgColor
 		}
 	}