简体   繁体   English

如何为 iOS 中的图层设计渐变?

[英]How do you design a gradient for a layer in iOS?

I have to follow through my designer's gradient layer as shown below and I'm running into a wall trying to replicate her design (below).我必须遵循我的设计师的渐变层,如下图所示,我正在尝试复制她的设计(下图)。

设计师影子

I have the following code to try to replicate the same shadow but it is too solid compared to her gradient.我有下面的代码来尝试复制相同的阴影,但与她的渐变相比它太实了。 How do I reduce my layer to have a gradient look and feel?如何减少我的图层以获得渐变的外观和感觉?

backgroundView.layer.shadowColor = UIColor.Custom.darkBlue.cgColor
backgroundView.layer.shadowOpacity = 1.0
backgroundView.layer.shadowRadius = 10

更新截图

EDIT: I implemented what I needed using @Frankenstein's solution below.编辑:我使用下面的@Frankenstein 解决方案实现了我需要的东西。

backgroundView.backgroundColor = UIColor.Custom.darkBlue
let gradient: CAGradientLayer = CAGradientLayer()
gradient.colors = [UIColor.black.cgColor, UIColor.Custom.darkBlue.cgColor]
gradient.frame = CGRect(x: backgroundView.frame.origin.x, y: backgroundView.frame.origin.y - 39, width: view.bounds.width, height: 40)
view.layer.addSublayer(gradient)

With the expected result below.与下面的预期结果。 Thank you!谢谢! 在此处输入图像描述

You need to add a new CAGradientLayer and not set the shadow, here is an example:您需要添加一个新的CAGradientLayer并且不设置阴影,这是一个示例:

let gradient: CAGradientLayer = CAGradientLayer()

gradient.colors = [UIColor.black.cgColor, UIColor.Custom.darkBlue.cgColor]
gradient.locations = [0.0 , 1.0]
gradient.startPoint = CGPoint(x: 0.0, y: 1.0)
gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
gradient.frame = view.bounds
view.layer.addSublayer(gradient)

Here is how you can achieve that这是您如何实现这一目标的方法

  let gradient: CAGradientLayer = CAGradientLayer()

        gradient.colors = [UIColor.black.cgColor, UIColor.blue.cgColor]
        gradient.locations = [0.0 , 1.0]
        gradient.startPoint = CGPoint(x : 0.0, y : 0)
        gradient.endPoint = CGPoint(x :0.0, y: 0.15) // you need to play with 0.15 to adjust gradient vertically
        gradient.frame = view.bounds
        view.layer.addSublayer(gradient)

在此处输入图像描述

With 0.15 to 0.5 you get用 0.15 到 0.5 你得到

在此处输入图像描述

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM