带有渐变和阴影的 UIView

Posted 2023-02-23

【中文标题】带有渐变和阴影的 UIView

【英文标题】：UIView with Gradient and shadow

【发布时间】：2019-02-06 03:35:32

【问题描述】：

尝试添加渐变，添加圆角并在UIView 上添加阴影。我可以让它工作，但渐变的位置不正确。 （应该全部换成红色）

let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor(red: 0.333, green: 0.376, blue: 0.498, alpha: 1.00).cgColor, UIColor(red: 0.200, green: 0.247, blue: 0.369, alpha: 1.00).cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.75)
gradientLayer.frame = self.viewBg.bounds
//self.viewBg.layer.insertSublayer(gradientLayer, at: 0) 


self.viewBg.layer.cornerRadius = 10
self.viewBg.layer.shadowColor = UIColor.black.cgColor
self.viewBg.layer.shadowOffset = CGSize(width: 7, height: 7)
self.viewBg.layer.shadowRadius = 10
self.viewBg.layer.shadowOpacity = 1

let inset: CGFloat = bounds.width * 0.05
self.viewBg.layer.shadowPath = UIBezierPath(roundedRect: bounds.insetBy(dx: inset, dy: 0.0), cornerRadius: 10).cgPath

没有注释的行：

在注释中有一行：

【问题讨论】：

可能是因为endPoint 设置不正确。要水平渐变，你需要按照他的方式设置： gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0) gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)

如果你的渐变没有出现在你期望的地方，很可能是因为viewBg.bounds 不是你期望的那样。例如。一个常见的问题来源是您通常希望在视图中重置图层的frame，在viewDidLayoutSubviews（如果这是在UIViewController 子类中）或layoutSubviews（如果这是在UIView 子类中） .或者viewBg 可能不是指您认为它的作用。根据提供的信息无法判断。

【参考方案1】：

试试这个可能对你有帮助

extension UIView 

func setGradientBackground() 
    let colorTop =  UIColor(red:0.87, green:0.25, blue:0.30, alpha:1.0)
    let colorBottom = UIColor(red:0.95, green:0.37, blue:0.34, alpha:0.6)

    let gradientLayer = CAGradientLayer()
    gradientLayer.colors = [colorTop.cgColor, colorBottom.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
    gradientLayer.frame = self.bounds
    gradientLayer.cornerRadius = 20
    self.layer.shadowOffset = CGSize(width: 0, height: 2)
    self.layer.shadowOpacity = 0.3
    self.layer.shadowRadius = 3.0
    self.layer.shadowColor = UIColor.black.cgColor
    self.layer.masksToBounds = false

    self.layer.insertSublayer(gradientLayer, at: 0)

    

使用

override func viewDidLayoutSubviews() 
    super.viewDidLayoutSubviews()

    DispatchQueue.main.async 
        self.btnLogin.setGradientBackground()
    

【讨论】：

非常重要的两点。 1/ 您必须在UIView.layoutSubviews 中执行此操作。控制器的viewDidLayoutSubviews 仅在controller.view 布局时被调用。不是在按钮布局时。 2/ 你需要检查界限是否真的改变了。否则这将对性能产生很大影响。顺便说一句，DispatchQueue.main.async 是不必要的。