Swift - UI 按钮阴影渐变

Posted 2023-02-23

【中文标题】Swift - UI 按钮阴影渐变

【英文标题】：Swift - UI Button Shadow Gradient

【发布时间】：2017-07-22 09:39:09

【问题描述】：

我正在尝试在 Swift 中重新创建这样的按钮：

我已经能够使用此处的帮助从 Sketch 准确地创建按钮内部的渐变： Answered Question

现在我正在尝试重新创建按钮后面的发光效果。我正在考虑在它后面创建一个子视图并使用高斯模糊滤镜来绘制它。现在我被困在如何实现这一点，并没有找到一个好的解决方案。正常的 CALayer 阴影不适用于渐变，我迷路了。任何帮助表示赞赏

【参考方案1】：

你可以这样做

初始化你的渐变层

let gradientLayer = CAGradientLayer.init()

gradientLayer.colors = [UIColor.red.cgColor,
                        UIColor.yellow.cgColor,
                        UIColor.green.cgColor,
                        UIColor.blue.cgColor]

gradientLayer.transform = CATransform3DMakeRotation(CGFloat.pi / 2, 0, 0, 1)

从按钮的框架中设置首选大小，例如 40

gradientLayer.frame = CGRect.init(
x: button.frame.minX - 40,
y: button.frame.minY - 40, 
width: button.frame.width + 80, 
height: button.frame.height + 80)
gradientLayer.masksToBounds = true

初始化阴影层

let shadowLayer = CALayer.init()
shadowLayer.frame = gradientLayer.bounds
shadowLayer.shadowColor = UIColor.black.cgColor
shadowLayer.shadowOpacity = 0.08
shadowLayer.shadowRadius = 20
shadowLayer.shadowPath = CGPath.init(rect: shadowLayer.bounds, transform: nil)

将阴影层设置为渐变层的遮罩

gradientLayer.mask = shadowLayer

在按钮的superView中插入渐变层

backgroungView.layer.insertSublayer(gradientLayer, below: button.layer)

【讨论】：

非常感谢！这帮助我完全理解它！

是的，它可以工作，但唯一的问题是当按下按钮时，阴影层会变暗，并且随着用户不断按下阴影层最终会变成与渐变层相同

不应该是这样的 你把这个层放在哪里了？图层不应在按钮内

我把这个层放在一个函数中，它是 UIButton 的扩展。该扩展具有创建渐变然后在其后面创建阴影层的功能。扩展中的这个函数在按钮的“layoutSubviews()”函数中被调用。

您的问题是每次按下按钮时都会创建一个新图层，因为您从 layoutSubviews 调用代码