UIButton 陰影和燈光效果 (Swift 4)

Question

我想添加像這兩個按鈕一樣的照明效果，底部有陰影，頂部有照明邊緣，好像上面有燈一樣。

我一直在試驗：

button.layer.shadowColor = UIColor.black.cgColor
button.layer.shadowColor.layer.shadowOffset = CGSize(width: 2, height: 2)
button.layer.shadowColor.layer.shadowRadius = 2
button.layer.shadowColor.layer.shadowOpacity = 8
button.layer.shadowColor.layer.masksToBounds = false

並在底部獲得漂亮的陰影，但我如何點亮頂部邊緣？

Answer 1

我能夠得到一個與你的第一幅畫非常相似的按鈕，就像一個實驗：

按鈕背景完全使用涉及 UIGraphicsImageRenderer 中的 UIBezierPath 和 CGContext 的基本繪圖命令構建。 因此，如果這是一種可接受的方法，您可以對我正在做的事情進行調整。

let r = UIGraphicsImageRenderer(size: CGSize(width:100, height:100))
let im = r.image {
    ctx in let con = ctx.cgContext
    do {
        let p = UIBezierPath(roundedRect: CGRect.init(x: 0, y: 0, width: 100, height: 50), cornerRadius: 10)
        UIColor(white: 0.9, alpha: 1.0).setFill()
        p.fill()
    }
    do {
        let p = UIBezierPath(roundedRect: CGRect.init(x: 0, y: 50, width: 100, height: 50), cornerRadius: 10)
        UIColor(white: 0.1, alpha: 1.0).setFill()
        p.fill()
    }
    do {
        let p = UIBezierPath(roundedRect: CGRect.init(x: 0, y: 2, width: 100, height: 95), cornerRadius: 10)
        p.addClip()
    }
    let locs : [CGFloat] = [ 0.0, 0.2, 0.8, 1.0 ]
    let colors : [CGFloat] = [
        0.54, 0.54, 0.54, 1.0,
        0.5, 0.5, 0.5, 1.0,
        0.5, 0.5, 0.5, 1.0,
        0.44, 0.44, 0.44, 1.0,
    ]
    let sp = CGColorSpaceCreateDeviceRGB()
    let grad = CGGradient(
        colorSpace:sp, colorComponents: colors, locations: locs, count: 4)!
    con.drawLinearGradient(grad,
                           start: CGPoint(x:0,y:0), end: CGPoint(x:0,y:100), options:[])
}
let b = UIButton(type: .custom)
b.setTitle("9", for: .normal)
b.setBackgroundImage(im, for: .normal)
b.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
b.titleLabel?.font = UIFont.systemFont(ofSize: 40, weight: .bold)
self.view.addSubview(b)
b.layer.borderWidth = 1
b.layer.borderColor = UIColor.black.cgColor
b.layer.cornerRadius = 10