带有圆角的底部内部阴影

Question

我正在尝试重现以下设计，并为底部的内部阴影而苦苦挣扎。

我没有找到满足要求的解决方案：

• 仅底部
• 包含圆形视图

理想情况下，可以与UIButton一起使用的解决方案。

Answer 1

虽然这是可行的，但它有点棘手，需要您使用CGPath：https://developer.apple.com/documentation/quartzcore/calayer/1410771-shadowpath

绘制阴影

可能更简单的方法是使用可调整大小的图像：https://developer.apple.com/documentation/uikit/uiimage/1624102-resizableimage

您将在下面制作类似此模拟的较小图像，然后只需调整其大小以增加框架，如下所示：

let resized = mockImage.resizableImage(withCapInsets: UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 56), resizingMode: .stretch)

Answer 2

我为您创建了一个按钮扩展名，以添加底部阴影。请检查一下。您只需要在按钮刷新时调用“ bottomShadow（）”函数

例如

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    self.button?.bottomShadow()
}


/*Button Extension*/

 extension UIButton {
    func bottomShadow() {
        let shadowHeight: CGFloat = 5.0
        let shadowframe = CGRect.init(x: 0, y: self.bounds.height - shadowHeight, width: self.bounds.width, height: shadowHeight)
        let path = UIBezierPath(roundedRect: shadowframe, byRoundingCorners: [.topLeft , .topRight], cornerRadii: CGSize(width: self.layer.cornerRadius, height: self.layer.cornerRadius))
        let mask = CAShapeLayer()
        mask.fillColor = UIColor.lightGray.cgColor
        mask.path = path.cgPath
        self.layer.addSublayer(mask)
    }
}