How to Apply card view cornerRadius & shadow like iOS appstore in swift 4
Create a new UIView subclass named "CardView" like below:
import Foundation
import UIKit
@IBDesignable
class CardView: UIView {
@IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
layer.shadowRadius = newValue
layer.masksToBounds = false
}
}
@IBInspectable var shadowOpacity: Float {
get {
return layer.shadowOpacity
}
set {
layer.shadowOpacity = newValue
layer.shadowColor = UIColor.darkGray.cgColor
}
}
@IBInspectable var shadowOffset: CGSize {
get {
return layer.shadowOffset
}
set {
layer.shadowOffset = newValue
layer.shadowColor = UIColor.black.cgColor
layer.masksToBounds = false
}
}
}
Then just set "CardView" as Custom Class for your view from XCode Interface Builder. It's simple and easily configurable!
Just add a subview to the cell and manipulate it's layer property. Tweak the values to your liking. The following code should give a similar result to how it looks in the App Store:
// The subview inside the collection view cell
myView.layer.cornerRadius = 20.0
myView.layer.shadowColor = UIColor.gray.cgColor
myView.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
myView.layer.shadowRadius = 12.0
myView.layer.shadowOpacity = 0.7