Init

Cards/Card.swift

@@ -0,0 +1,107 @@
+//
+//  Card.swift
+//  Cards
+//
+//  Created by Paolo on 09/10/17.
+//  Copyright © 2017 Apple. All rights reserved.
+//
+
+import UIKit
+
+protocol CardDelegate {
+
+    func cardDidTapButton(button: UIButton)
+    func cardDidTapInside(card: Card)
+}
+
+@IBDesignable class Card: UIView {
+
+    // SB Vars
+    @IBInspectable var shadowBlur: CGFloat = 14
+    @IBInspectable var shadowOpacity: Float = 0.6
+    @IBInspectable var shadowColor: UIColor = UIColor.gray
+    @IBInspectable var bgImage: UIImage?
+    @IBInspectable var bgColor: UIColor = UIColor.darkGray
+    @IBInspectable var textColor: UIColor = UIColor.white
+    @IBInspectable var insets: CGFloat = 6
+    @IBInspectable var cardRadius: CGFloat = 20
+    @IBInspectable var maxTitleFontSize: CGFloat = 26
+
+
+    //Priv Vars
+    var backgroundIV = UIImageView()
+
+    // View Life Cycle
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+    }
+    required init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+        self.backgroundColor = UIColor.clear
+
+        self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.cardTapped)))
+
+        addSubview(backgroundIV)
+    }
+
+
+    override func draw(_ rect: CGRect) {
+
+        // Helpers func
+        func X(_ percentage: CGFloat ) -> CGFloat { return percentage*rect.width/100 }
+        func Y(_ percentage: CGFloat ) -> CGFloat { return percentage*rect.height/100 }
+        func X(_ percentage: CGFloat, from: UIView ) -> CGFloat { return percentage*rect.width/100 + from.frame.maxX }
+        func Y(_ percentage: CGFloat, from: UIView ) -> CGFloat { return percentage*rect.height/100 + from.frame.maxY }
+        func RevX(_ percentage: CGFloat, width: CGFloat ) -> CGFloat { return (rect.width - percentage*rect.width/100) - width }
+        func RevY(_ percentage: CGFloat, height: CGFloat) -> CGFloat { return (rect.height - percentage*rect.height/100) - height }
+
+        self.layer.shadowOpacity = shadowOpacity
+        self.layer.shadowColor = shadowColor.cgColor
+        self.layer.shadowOffset = CGSize.zero
+        self.layer.shadowRadius = shadowBlur
+        self.layer.cornerRadius = cardRadius
+        self.layer.backgroundColor = bgColor.cgColor
+
+        //Draw
+        backgroundIV.frame = rect
+        backgroundIV.image = bgImage
+        backgroundIV.layer.cornerRadius = self.layer.cornerRadius
+        backgroundIV.clipsToBounds = true
+        backgroundIV.contentMode = .scaleAspectFill
+    }
+
+
+    //Actions
+    @objc func cardTapped(){
+        print("card tapped")
+        UIView.animate(withDuration: 0.2, animations: {
+            self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
+        }) { (true) in
+            UIView.animate(withDuration: 0.1, animations: {
+                self.transform = CGAffineTransform.identity
+            })
+        }
+    }
+
+
+}
+
+
+// Label Helpers
+extension UILabel {
+
+    func setLineHeight(_ lineHeight: CGFloat) {
+        let paragraphStyle = NSMutableParagraphStyle()
+        paragraphStyle.lineSpacing = 1.0
+        paragraphStyle.lineHeightMultiple = lineHeight
+        paragraphStyle.alignment = self.textAlignment
+
+        let attrString = NSMutableAttributedString(string: self.text!)
+        attrString.addAttribute(NSAttributedStringKey.font, value: self.font, range: NSMakeRange(0, attrString.length))
+        attrString.addAttribute(NSAttributedStringKey.paragraphStyle, value:paragraphStyle, range:NSMakeRange(0, attrString.length))
+
+        self.allowsDefaultTighteningForTruncation = true
+
+        self.attributedText = attrString
+    }
+}

Cards/CardArticle.swift

@@ -0,0 +1,99 @@
+//
+//  CardArticle.swift
+//  Cards
+//
+//  Created by Paolo on 08/10/17.
+//  Copyright © 2017 Apple. All rights reserved.
+//
+
+import UIKit
+
+@IBDesignable class CardArticle: Card {
+
+    // SB Vars
+    @IBInspectable var title: String = "The Art of the Impossible"
+    @IBInspectable var subtitle: String = "Inside the extraordinary world of Monument Valley 2"
+    @IBInspectable var category: String = "world premiere"
+    @IBInspectable var blurEffect: UIBlurEffectStyle = UIBlurEffectStyle.extraLight
+
+    // Delegate
+    var delegate: CardDelegate?
+
+    //Priv Vars
+    var titleLbl = UILabel ()
+    var subtitleLbl = UILabel()
+    var categoryLbl = UILabel()
+
+    // View Life Cycle
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+    }
+    required init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+
+        backgroundIV.addSubview(titleLbl)
+        backgroundIV.addSubview(subtitleLbl)
+        backgroundIV.addSubview(categoryLbl)
+
+    }
+
+
+    override func draw(_ rect: CGRect) {
+
+        // Helpers func
+        func X(_ percentage: CGFloat ) -> CGFloat { return percentage*rect.width/100 }
+        func Y(_ percentage: CGFloat ) -> CGFloat { return percentage*rect.height/100 }
+        func X(_ percentage: CGFloat, from: UIView ) -> CGFloat { return percentage*rect.width/100 + from.frame.maxX }
+        func Y(_ percentage: CGFloat, from: UIView ) -> CGFloat { return percentage*rect.height/100 + from.frame.maxY }
+        func RevX(_ percentage: CGFloat, width: CGFloat ) -> CGFloat { return (rect.width - percentage*rect.width/100) - width }
+        func RevY(_ percentage: CGFloat, height: CGFloat) -> CGFloat { return (rect.height - percentage*rect.height/100) - height }
+
+
+        //Draw
+        super.draw(rect)
+
+        categoryLbl.frame = CGRect(x: X(insets), y: X(insets), width: X(100-(insets*2)), height: Y(5))
+        categoryLbl.text = category.uppercased()
+        categoryLbl.textColor = textColor.withAlphaComponent(0.9)
+        categoryLbl.font = UIFont.systemFont(ofSize: 100, weight: .bold)
+        categoryLbl.shadowColor = UIColor.black
+        categoryLbl.shadowOffset = CGSize.zero
+        categoryLbl.adjustsFontSizeToFitWidth = true
+        categoryLbl.minimumScaleFactor = 0.1
+        categoryLbl.lineBreakMode = .byTruncatingTail
+        categoryLbl.numberOfLines = 0
+
+        titleLbl.frame = CGRect(x: X(insets), y: Y(1, from: categoryLbl), width: X(80), height: Y(17))
+        titleLbl.textColor = textColor
+        titleLbl.text = title
+        titleLbl.font = UIFont.systemFont(ofSize: self.maxTitleFontSize, weight: .bold)
+        titleLbl.adjustsFontSizeToFitWidth = true
+        titleLbl.minimumScaleFactor = 0.1
+        titleLbl.lineBreakMode = .byClipping
+        titleLbl.numberOfLines = 2
+        titleLbl.baselineAdjustment = .none
+        titleLbl.sizeToFit()
+
+        subtitleLbl.frame = CGRect(x: X(insets), y: RevY(insets*(frame.width/frame.height), height: Y(7)), width: X(100-(insets*2)), height: Y(10))
+        subtitleLbl.text = subtitle
+        subtitleLbl.textColor = textColor
+        subtitleLbl.font = UIFont.systemFont(ofSize: 100, weight: .medium)
+        subtitleLbl.shadowColor = UIColor.black
+        subtitleLbl.shadowOffset = CGSize.zero
+        subtitleLbl.adjustsFontSizeToFitWidth = true
+        subtitleLbl.minimumScaleFactor = 0.1
+        subtitleLbl.lineBreakMode = .byTruncatingTail
+        subtitleLbl.numberOfLines = 0
+        subtitleLbl.textAlignment = .left
+
+    }
+
+    override func cardTapped() {
+        super.cardTapped()
+        delegate?.cardDidTapInside(card: self)
+    }
+
+}
+
+
+

Cards/CardGroup.swift

@@ -0,0 +1,91 @@
+//
+//  CardGroup.swift
+//  Cards
+//
+//  Created by Paolo on 08/10/17.
+//  Copyright © 2017 Apple. All rights reserved.
+//
+
+import UIKit
+
+@IBDesignable class CardGroup: Card {
+
+    // SB Vars
+    @IBInspectable var title: String = "from the editors"
+    @IBInspectable var subtitle: String = "Welcome to XI Cards !"
+    @IBInspectable var blurEffect: UIBlurEffectStyle = UIBlurEffectStyle.extraLight
+
+    //Priv Vars
+    var titleLbl = UILabel ()
+    var subtitleLbl = UILabel()
+    var blurV = UIVisualEffectView()
+    var vibrancyV = UIVisualEffectView()
+
+
+    // View Life Cycle
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        super.init(coder: aDecoder)
+
+        vibrancyV = UIVisualEffectView(effect: UIVibrancyEffect(blurEffect: UIBlurEffect(style: blurEffect)))
+
+
+        backgroundIV.addSubview(blurV)
+        blurV.contentView.addSubview(subtitleLbl)
+        blurV.contentView.addSubview(vibrancyV)
+        vibrancyV.contentView.addSubview(titleLbl)
+
+    }
+
+
+    override func draw(_ rect: CGRect) {
+
+        // Helpers func
+        func X(_ percentage: CGFloat ) -> CGFloat { return percentage*rect.width/100 }
+        func Y(_ percentage: CGFloat ) -> CGFloat { return percentage*rect.height/100 }
+        func X(_ percentage: CGFloat, from: UIView ) -> CGFloat { return percentage*rect.width/100 + from.frame.maxX }
+        func Y(_ percentage: CGFloat, from: UIView ) -> CGFloat { return percentage*rect.height/100 + from.frame.maxY }
+        func RevX(_ percentage: CGFloat, width: CGFloat ) -> CGFloat { return (rect.width - percentage*rect.width/100) - width }
+        func RevY(_ percentage: CGFloat, height: CGFloat) -> CGFloat { return (rect.height - percentage*rect.height/100) - height }
+
+        //Draw
+        super.draw(rect)
+
+
+
+
+        titleLbl.frame = CGRect(x: X(insets), y: X(insets), width: X(100-(insets*2)), height: Y(5))
+        titleLbl.text = title.uppercased()
+        titleLbl.textColor = textColor
+        titleLbl.font = UIFont.systemFont(ofSize: 40, weight: .semibold)
+        titleLbl.shadowColor = UIColor.black
+        titleLbl.shadowOffset = CGSize.zero
+        titleLbl.adjustsFontSizeToFitWidth = true
+        titleLbl.minimumScaleFactor = 0.1
+        titleLbl.lineBreakMode = .byTruncatingTail
+        titleLbl.numberOfLines = 0
+
+
+        subtitleLbl.frame = CGRect(x: X(insets), y: Y(2, from: titleLbl), width: X(100-(insets*2)), height: Y(15))
+        subtitleLbl.textColor = textColor
+        subtitleLbl.text = subtitle
+        subtitleLbl.font = UIFont.systemFont(ofSize: self.maxTitleFontSize, weight: .bold)
+        subtitleLbl.adjustsFontSizeToFitWidth = true
+        subtitleLbl.minimumScaleFactor = 0.1
+        subtitleLbl.lineBreakMode = .byTruncatingTail
+        subtitleLbl.numberOfLines = 2
+        subtitleLbl.sizeToFit()
+        //subtitleLbl.backgroundColor = UIColor.blue
+
+        blurV.frame = CGRect(x: 0, y: 0, width: rect.width, height: Y(insets*2) + titleLbl.frame.size.height + subtitleLbl.frame.height)
+        let blur = UIBlurEffect(style: blurEffect)
+        blurV.effect = blur
+
+        vibrancyV.frame = blurV.frame
+    }
+}
+
+