IOS给UIButton添加阴影

Posted 2023-03-10

【中文标题】IOS给UIButton添加阴影

【英文标题】：IOS add shadow to UIButton

【发布时间】：2018-03-04 18:43:28

【问题描述】：

我试图向按钮添加阴影，但阴影被添加到按钮的文本而不是整个按钮：

我需要使用代码来实现吗？还是尺码问题？我可以在情节提要上添加阴影大小，但如果它应该绕过按钮，我看不到在哪里设置

【问题讨论】：

编辑你的问题，展示你是如何添加阴影的。

我使用情节提要阴影设置。我没有添加任何代码。

【参考方案1】：

这是因为您的按钮背景是透明。 当您在具有透明背景的 UIView 上设置阴影时，阴影将应用于他的所有子视图（而不是围绕 UIView 本身）。在您的情况下，您有一个 UIButton，它具有 透明背景，因此阴影将应用于 其所有可见子视图，在这种情况下是只有它的 titleLabel。 换句话说，系统会捕获视图的不透明像素，将其着色为 shadowColor 并将该图像放置在具有 shadowOffset 的视图下方。

所以你有两个解决方案：

将按钮的背景颜色更改为其他颜色 直接指定shadowPath：button.layer.shadowPath = UIBezierPath(rect: button.layer.bounds).cgPath

【讨论】：

仅供参考，将按钮的背景颜色设置为不透明颜色并选择情节提要中的不透明绘图复选框并不能解决此问题 - 它仍然将阴影应用于文本而不是整个按钮，所以建议 1不是解决方案。

【参考方案2】：

我对故事板不太了解，但使用下面的图层属性可以设置阴影。您可以围绕按钮进行游戏。

我尝试以下代码并根据您的要求更改值并为您的按钮添加一些颜色

    //button is your button name
    button.backgroundColor = self.view.backgroundColor
    button.layer.shadowOpacity = 0.3
    button.layer.shadowRadius = 2.0
    button.layer.shadowColor = UIColor.yellow.cgColor
    button.layer.cornerRadius = 2

【讨论】：

谢谢，我试过了，我看到了阴影，但同样的问题，阴影在文本周围

【参考方案3】：

阴影被赋予整个按钮。问题是按钮本身有backgroundColor == .clear，这意味着它不会产生任何阴影（只有不透明的部分是它的标题，因此这只是产生阴影的部分）。

在您的情况下，将按钮的背景颜色设置为与其父视图相同的颜色，您应该会得到您想要的。

【参考方案4】：

这里有两种添加阴影的扩展方法

extension UIView 
func setRadiusWithShadow(_ radius: CGFloat? = nil)  // this method adds shadow to right and bottom side of button
    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


func setAllSideShadow(shadowShowSize: CGFloat = 1.0)  // this method adds shadow to allsides
    let shadowSize : CGFloat = shadowShowSize
    let shadowPath = UIBezierPath(rect: CGRect(x: -shadowSize / 2,
                                               y: -shadowSize / 2,
                                               width: self.frame.size.width + shadowSize,
                                               height: self.frame.size.height + shadowSize))
    self.layer.masksToBounds = false
    self.layer.shadowColor = UIColor.lightGray.withAlphaComponent(0.8).cgColor
    self.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
    self.layer.shadowOpacity = 0.5
    self.layer.shadowPath = shadowPath.cgPath

 self.view.layoutIfNeeded() // need this method to layout your run time button frame before giving shadow

第一个按钮带有所有侧面阴影

self.recordMeasurementWrapperView.setAllSideShadow(shadowShowSize: 3.0)

第二个按钮只有底部和右侧有阴影

self.retakeMeasurementWrapperView.setRadiusWithShadow(2.0)