Swift – angular落半径和阴影的问题

我试图创build一个圆angular和阴影的button。 无论我如何切换，该button将无法正确显示。 我试过masksToBounds = false和masksToBounds = true ，但是无论是angular落半径的作品和阴影不或阴影的作品和angular落半径不剪辑button的angular落。

 import UIKit import QuartzCore @IBDesignable class Button : UIButton { @IBInspectable var masksToBounds: Bool = false {didSet{updateLayerProperties()}} @IBInspectable var cornerRadius : CGFloat = 0 {didSet{updateLayerProperties()}} @IBInspectable var borderWidth : CGFloat = 0 {didSet{updateLayerProperties()}} @IBInspectable var borderColor : UIColor = UIColor.clearColor() {didSet{updateLayerProperties()}} @IBInspectable var shadowColor : UIColor = UIColor.clearColor() {didSet{updateLayerProperties()}} @IBInspectable var shadowOpacity: CGFloat = 0 {didSet{updateLayerProperties()}} @IBInspectable var shadowRadius : CGFloat = 0 {didSet{updateLayerProperties()}} @IBInspectable var shadowOffset : CGSize = CGSizeMake(0, 0) {didSet{updateLayerProperties()}} override func drawRect(rect: CGRect) { updateLayerProperties() } func updateLayerProperties() { self.layer.masksToBounds = masksToBounds self.layer.cornerRadius = cornerRadius self.layer.borderWidth = borderWidth self.layer.borderColor = borderColor.CGColor self.layer.shadowColor = shadowColor.CGColor self.layer.shadowOpacity = CFloat(shadowOpacity) self.layer.shadowRadius = shadowRadius self.layer.shadowOffset = shadowOffset } } 

Answer 1

下面的Swift 3代码展示了如何设置UIButton的子类，允许创build带有圆angular和阴影的实例：

 import UIKit class CustomButton: UIButton { var shadowLayer: CAShapeLayer! override func layoutSubviews() { super.layoutSubviews() if shadowLayer == nil { shadowLayer = CAShapeLayer() shadowLayer.path = UIBezierPath(roundedRect: bounds, cornerRadius: 12).cgPath shadowLayer.fillColor = UIColor.white.cgColor shadowLayer.shadowColor = UIColor.darkGray.cgColor shadowLayer.shadowPath = shadowLayer.path shadowLayer.shadowOffset = CGSize(width: 2.0, height: 2.0) shadowLayer.shadowOpacity = 0.8 shadowLayer.shadowRadius = 2 layer.insertSublayer(shadowLayer, at: 0) //layer.insertSublayer(shadowLayer, below: nil) // also works } } } 

---

根据您的需要，您可以在Storyboard中添加一个UIButton ，并将其类设置为CustomButton或者可以以编程方式创buildCustomButton的实例。 下面的UIViewController实现演示如何以编程方式创build和使用CustomButton实例：

 import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let button = CustomButton(type: .system) button.setTitle("Button", for: .normal) view.addSubview(button) // Auto layout code using anchors (iOS9+) // set witdh and height constraints if necessary button.translatesAutoresizingMaskIntoConstraints = false let horizontalConstraint = button.centerXAnchor.constraint(equalTo: view.centerXAnchor) let verticalConstraint = button.centerYAnchor.constraint(equalTo: view.centerYAnchor) let widthConstraint = button.widthAnchor.constraint(equalToConstant: 100) let heightConstraint = button.heightAnchor.constraint(equalToConstant: 100) NSLayoutConstraint.activate([horizontalConstraint, verticalConstraint, widthConstraint, heightConstraint]) } } 

---

前面的代码在iPhone模拟器中产生下面的图像：

Answer 2

要扩展Imanou的post，可以以编程方式在自定义button类中添加阴影图层

 @IBDesignable class CustomButton: UIButton { var shadowAdded: Bool = false @IBInspectable var cornerRadius: CGFloat = 0 { didSet { layer.cornerRadius = cornerRadius layer.masksToBounds = cornerRadius > 0 } } override func drawRect(rect: CGRect) { super.drawRect(rect) if shadowAdded { return } shadowAdded = true let shadowLayer = UIView(frame: self.frame) shadowLayer.backgroundColor = UIColor.clearColor() shadowLayer.layer.shadowColor = UIColor.darkGrayColor().CGColor shadowLayer.layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: self.cornerRadius).CGPath shadowLayer.layer.shadowOffset = CGSize(width: 1.0, height: 1.0) shadowLayer.layer.shadowOpacity = 0.5 shadowLayer.layer.shadowRadius = 1 shadowLayer.layer.masksToBounds = true shadowLayer.clipsToBounds = false self.superview?.addSubview(shadowLayer) self.superview?.bringSubviewToFront(self) } } 

Answer 3

另一种获得更多可用和一致button的方法。

Swift 2

 func getImageWithColor(color: UIColor, size: CGSize, cornerRadius:CGFloat) -> UIImage { let rect = CGRectMake(0, 0, size.width, size.height) UIGraphicsBeginImageContextWithOptions(size, false, 1) UIBezierPath( roundedRect: rect, cornerRadius: cornerRadius ).addClip() color.setFill() UIRectFill(rect) let image: UIImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image } let button = UIButton(type: .Custom) button.frame = CGRectMake(20, 20, 200, 50) button.setTitle("My Button", forState: UIControlState.Normal) button.setTitleColor(UIColor.blackColor(), forState: UIControlState.Normal) self.addSubview(button) let image = getImageWithColor(UIColor.whiteColor(), size: button.frame.size, cornerRadius: 5) button.setBackgroundImage(image, forState: UIControlState.Normal) button.layer.shadowRadius = 5 button.layer.shadowColor = UIColor.blackColor().CGColor button.layer.shadowOpacity = 0.5 button.layer.shadowOffset = CGSizeMake(0, 1) button.layer.masksToBounds = false 

Swift 3

 func getImageWithColor(_ color: UIColor, size: CGSize, cornerRadius:CGFloat) -> UIImage? { let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height) UIGraphicsBeginImageContextWithOptions(size, false, 0) color.setFill() UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).addClip() color.setFill() UIRectFill(rect) let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() return image } let button = UIButton(type: .custom) button.frame = CGRect(x:20, y:20, width:200, height:50) button.setTitle("My Button", for: .normal) button.setTitleColor(UIColor.black, for: .normal) self.addSubview(button) if let image = getImageWithColor(UIColor.white, size: button.frame.size, cornerRadius: 5) { button.setBackgroundImage(image, for: .normal) } button.layer.shadowRadius = 5 button.layer.shadowColor = UIColor.black.cgColor button.layer.shadowOpacity = 0.5 button.layer.shadowOffset = CGSize(width:0, height:1) button.layer.masksToBounds = false 

Answer 4

如果有人需要在Swift 3.0中添加阴影圆angularbutton，这是一个很好的方法。

 func addShadowForRoundedButton(view: UIView, button: UIButton, shadowColor: UIColor, shadowOffset: CGSize, opacity: Float = 1) { let shadowView = UIView() shadowView.backgroundColor = shadowColor shadowView.layer.opacity = opacity shadowView.layer.cornerRadius = button.bounds.size.width / 2 shadowView.frame = CGRect(origin: CGPoint(x: button.frame.origin.x + shadowOffset.width, y: button.frame.origin.y + shadowOffset.height), size: CGSize(width: button.bouds.width, height: button.bounds.height)) self.view.addSubview(shadowView) view.bringSubview(toFront: button) } 

在func viewDidLayoutSubviews()使用这个方法如下：

 override func viewDidLayoutSubviews() { addShadowForRoundedButton(view: self.view, button: button, shadowColor: .black, shadowOffset: CGSize(width: 2, height: 2), opacity: 0.5) } 

这种方法的效果是：

Answer 5

为了改善PiterPan的答案，并在Swift 3中用圆形button显示一个真实的阴影（不只是没有模糊的背景）

 override func viewDidLoad() { super.viewDidLoad() myButton.layer.masksToBounds = false myButton.layer.cornerRadius = myButton.frame.height/2 myButton.clipsToBounds = true } override func viewDidLayoutSubviews() { addShadowForRoundedButton(view: self.view, button: myButton, opacity: 0.5) } func addShadowForRoundedButton(view: UIView, button: UIButton, opacity: Float = 1) { let shadowView = UIView() shadowView.backgroundColor = UIColor.black shadowView.layer.opacity = opacity shadowView.layer.shadowRadius = 5 shadowView.layer.shadowOpacity = 0.35 shadowView.layer.shadowOffset = CGSize(width: 0, height: 0) shadowView.layer.cornerRadius = button.bounds.size.width / 2 shadowView.frame = CGRect(origin: CGPoint(x: button.frame.origin.x, y: button.frame.origin.y), size: CGSize(width: button.bounds.width, height: button.bounds.height)) self.view.addSubview(shadowView) view.bringSubview(toFront: button) }