Swift - 单击时将阴影应用于圆形按钮

Question

我正在创建如下圆形按钮：

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()
            let button = GradientButton.createCircularButton(20, yPos: 20, width: 30, height: 30, circleValue:20)

        button.addTarget(self, action: #selector(ViewController.didCircleBtnTouched(_:)), forControlEvents: UIControlEvents.TouchUpInside)
        self.view.addSubview(button)
  }
 }


enum ColorType {
    case red, green, orange
}

class GradientButton: UIButton {
    var colorType: ColorType?   


public class func createCircularButton(xPos: CGFloat, yPos: CGFloat, width: CGFloat, height: CGFloat, circleValue: Int) -> GradientButton {
    let button = GradientButton()

    button.titleLabel!.font =  UIFont(name:"HelveticaNeue", size: 12)
    let buttonFrame = CGRect(x: xPos, y: yPos, width: width, height: height)

    button.frame = buttonFrame

    button.backgroundColor = UIColor.clearColor()
    button.backgroundColor = UIColor.whiteColor()


    button.layer.borderWidth = 1
    button.layer.cornerRadius = 15.0
    //this helps making it circular not rectangle
    button.clipsToBounds = true


    let red = UIColor(red:134/255, green:16/255, blue:1/255, alpha:1.0)//red
    let green = UIColor(red:0/255, green:136/255, blue:43/255, alpha:1.0)//green
    let orange = UIColor(red:243/255, green:144/255, blue:25/255, alpha:1.0)//orange

    if(circleValue <= 3){
        button.colorType = .green
        button.layer.borderColor = UIColor.greenColor().CGColor
        button.setTitleColor(green, forState: .Normal)
    } else if(circleValue > 3 && circleValue <= 7){
        button.colorType = .orange
        button.layer.borderColor = UIColor.orangeColor().CGColor
        button.setTitleColor(orange, forState: .Normal)
    } else if(circleValue > 7){
        button.colorType = .red
        button.layer.borderColor = UIColor.redColor().CGColor
        button.setTitleColor(red, forState: .Normal)

    }       
    button.setTitle("\(circleValue)", forState: .Normal)
    return button
}
}

点击按钮后，我将应用渐变如下：

 func didCircleBtnTouched(sender:GradientButton!){
             ApplyGradientToButton(sender)
 }



func ApplyGradientToButton(sender: GradientButton!){
    var color1 = UIColor()
    var color2 = UIColor()

   if(sender.colorType == .red){
        color1 = UIColor(red:134/255, green:16/255, blue:1/255, alpha:1.0)
        color2 = UIColor(red:200/255, green:37/255, blue:6/255, alpha:1.0)
    }
    else if(sender.colorType == .green) {
        color1 = UIColor(red:0/255, green:136/255, blue:43/255, alpha:1.0)
        color2 = UIColor(red:112/255, green:191/255, blue:65/255, alpha:1.0)
    }
    else if(sender.colorType == .orange) {
        color1 = UIColor(red:200/255, green:110/255, blue:1/255, alpha:1.0)
        color2 = UIColor(red:239/255, green:149/255, blue:26/255, alpha:1.0)

    }

    sender.setTitleColor(UIColor.whiteColor(), forState: .Normal)

    var layer = sender.layer

    layer.shadowColor = UIColor.blackColor().CGColor
    layer.shadowOffset = CGSize(width: 0.0, height: 5.0)
    layer.shadowOpacity = 1.0
    layer.shadowRadius = 10.0


    sender.applyGradient([color2, color1], locations: [0.0, 0.90])
}

我需要在按钮单击时在圆形按钮周围显示阴影。但是阴影没有显示出来。 我认为 button.clipsToBounds = true 是负责任的，因为当我不使用此属性时会出现阴影。不幸的是，通过删除此属性，我的圆形按钮在单击后变为矩形，这是不可取的。

有什么方法可以在不改变按钮形状的情况下显示阴影？ 请指教？

当前输出：

预期输出：

Answer 1

你不能剪切/遮罩到边界并添加阴影，因为它也会被剪切或遮罩。

解决方案是在单独的图层上添加阴影，并将图像添加为子图层。

这在此处的许多帖子中都有描述：

https://stackoverflow.com/a/25591916/312312

Swift - Problems with corner radius and drop shadow

还有更多

Answer 2

只需将此代码放入 viewController.swift 文件中即可。（或任何其他文件）

extension UIView {
    func setRadiusWithShadow(_ radius: CGFloat? = nil) {
        self.layer.cornerRadius = radius ?? self.frame.width / 2
        self.layer.shadowColor = UIColor.darkGray.cgColor
        self.layer.shadowOffset = CGSize(width: 1.5, height: 1.5)
        self.layer.shadowRadius = 1.0
        self.layer.shadowOpacity = 0.7
        self.layer.masksToBounds = false
    }

}

然后应用到您的按钮..

btnEdit.setRadiusWithShadow()

是的...看看输出...一切都完成了...

注意：您可以根据需要更改 CGSize(width: 1.5, height: 1.5) 值...