Ios 带有背景图像、圆角和阴影的UIButton

我正在尝试创建一个带有圆角、背景图像和阴影的UIButton。在添加阴影之前，一切正常

但在添加阴影值后，阴影不会显示。显然是由于

clipstobunds

属性值设置为

true

。如果我去掉它，它看起来是这样的

因为我还需要角半径，所以我不能将

clipstobunds

be

false

这是我的密码

class CustomButton: UIButton {
    
    var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            clipsToBounds = true
        }
    }
    
    var shadowRadius: CGFloat {
        get {
            return layer.shadowRadius
        }
        set {
            layer.shadowRadius = newValue
        }
    }
    
    var shadowOpacity: Float {
        get {
            return layer.shadowOpacity
        }
        set {
            layer.shadowOpacity = newValue
        }
    }
    
    var shadowOffset: CGSize {
        get {
            return layer.shadowOffset
        }
        set {
            layer.shadowOffset = newValue
        }
    }
    
    var shadowColor: UIColor? {
        get {
            if let color = layer.shadowColor {
                return UIColor(cgColor: color)
            }
            return nil
        }
        set {
            if let color = newValue {
                layer.shadowColor = color.cgColor
            } else {
                layer.shadowColor = nil
            }
        }
    }
    
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        
    }
    
}


private lazy var button: CustomButton = {
    let button = CustomButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setBackgroundImage(UIImage(named: "Rectangle"), for: .normal)
    button.setTitleColor(.white, for: .normal)
    button.setTitle("Sign Up", for: .normal)
    button.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: .semibold)
    button.cornerRadius = 20
    button.shadowColor = .systemGreen
    button.shadowRadius = 10
    button.shadowOpacity = 1
    button.shadowOffset = CGSize(width: 0, height: 0)
    return button
}()

是否有一种既有阴影又有圆角半径的解决方法

---

您可以添加view.layer.masksToBounds=false

这将禁用子层的剪辑

---

阴影和图像需要使用两个单独的视图。我找不到使用同一按钮层设置图像、阴影和角半径的任何解决方案

使按钮的角半径（clipsToBounds=true）变圆，并在其上设置图像

---

在按钮下方以适当的阴影半径和偏移量拍摄阴影视图。

您可以通过添加不同图层的阴影和背景图像来完成此操作

首先，如果您不需要属性，请删除所有属性并修改

CustomButton

实现，如下所示（根据需要修改）：

并按如下方式初始化按钮：

private lazy var button: CustomButton = {
    let button = CustomButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitleColor(.white, for: .normal)
    button.setTitle("Sign Up", for: .normal)
    button.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: .semibold)
    return button
}()

---

谢谢。这太棒了。但问题是，如果我删除属性，我最终会在button类本身内部硬编码这些值。我希望它能更像一个通用的解决方案。因此，我可以在初始化按钮时设置阴影/背景图像值。更新：我通过公开属性修改了代码。仍然很有效。然而，我注意到阴影有一个小问题。如果我减小阴影半径，阴影的角半径就不一样了。知道为什么吗？这个问题也存在于原始代码中。我也尝试将

cornerRadius

值添加到

shadowLayer

中，但这并没有改变任何事情。您是否为这两个值指定了相同的半径？我做了一个小的更新。（顺便说一句，我无法访问第一个链接）。您可以根据需要编辑/扩展代码的任何部分，我只保留我所做的工作所需的部分。请立即检查。

corneradius

和

shadowRadius

是不同的，对吗？因为阴影半径处理阴影的模糊半径，所以我将其设置为2。这时我注意到阴影的方形边缘。拐角半径仍设置为20。没问题。是的，你是对的，我修改了阴影层。阴影路径。

private lazy var button: CustomButton = {
    let button = CustomButton()
    button.translatesAutoresizingMaskIntoConstraints = false
    button.setTitleColor(.white, for: .normal)
    button.setTitle("Sign Up", for: .normal)
    button.titleLabel?.font = UIFont.systemFont(ofSize: 15, weight: .semibold)
    return button
}()