I have created CAGradientLayer having three colors, i need to give each color different locations.
Example:
Red = 0 to 50 %
Yellow = 51 to 80 %
Green = 81 to 100 %
I have tried with giving startPoint and endPoint but it did not work.
If you put the following code into a Playground you will get the exact desired output:
let view = UIView(frame: CGRectMake(0,0,200,100))
let layer = CAGradientLayer()
layer.frame = view.frame
layer.colors = [UIColor.greenColor().CGColor, UIColor.yellowColor().CGColor, UIColor.redColor().CGColor]
layer.locations = [0.0, 0.8, 1.0]
view.layer.addSublayer(layer)
XCPShowView("ident", view: view)
Outputting:
You simply define the colors as an array of CGColors, and an array of the same size of NSNumbers each between 0.0 and 1.0.
Dont use startPoint and endPoint for that - they are for defining from where to where the gradient is shown in the layer - it does not have anything to do with the percents and the colors etc.
More recent Swift3 version of the code:
let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 100))
let layer = CAGradientLayer()
layer.frame = view.frame
layer.colors = [UIColor.green.cgColor, UIColor.yellow.cgColor, UIColor.red.cgColor]
layer.locations = [0.0, 0.8, 1.0]
view.layer.addSublayer(layer)
PlaygroundPage.current.liveView = view
Related
What's the best way to create a graph like this in iOS?
My first thought was to create a bezier path and then add a gradient layer with the different locations. But this can't work since the documentation specifies that:
The values must be monotonically increasing.
Which is not the case in my graph.
Any thoughts on good ways to achieve this?
Thanks
You can do this by using a CAGradientLayer as the background of your chart, and then a CAShapeLayer as a mask of the gradient layer. The mask layer will only show the layer beneath in areas that it is drawn on.
This playground code gives a general idea, using randomly generated data:
import UIKit
import PlaygroundSupport
let view = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
view.backgroundColor = .black
// Gradient for the chart colors
let gradient = CAGradientLayer()
gradient.colors = [
UIColor.red.cgColor,
UIColor.orange.cgColor,
UIColor.yellow.cgColor,
UIColor.green.cgColor
]
gradient.startPoint = CGPoint(x: 0.5, y: 0)
gradient.endPoint = CGPoint(x: 0.5, y: 1)
gradient.frame = view.bounds
view.layer.addSublayer(gradient)
// Random points
let graph = CAShapeLayer()
let path = CGMutablePath()
var y: CGFloat = 150
let points: [CGPoint] = stride(from: CGFloat.zero, to: 300, by: 2).map {
let change = CGFloat.random(in: -20...20)
var newY = y + change
newY = max(10, newY)
newY = min(newY, 300)
y = newY
return CGPoint(x: $0, y: y)
}
path.addLines(between: points)
graph.path = path
graph.fillColor = nil
graph.strokeColor = UIColor.black.cgColor
graph.lineWidth = 4
graph.lineJoin = .round
graph.frame = view.bounds
// Only show the gradient where the line is
gradient.mask = graph
PlaygroundPage.current.liveView = view
Results:
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.
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:
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
I have a UIView that I would like to apply a fade / gradient too. I'd like this to appear only on the edges, the effect I am trying to create is
The grey line at the top of the image. Grey in the middle and both edges are faded to white.
I have tried something like this
func render(content: FeedItem) {
print(content.item.externalId)
// rowSeperatorView.backgroundColor = UIColor.usingHex("f2f2f2")
iconContainerView.backgroundColor = UIColor.usingHex("3bac58")
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.frame = rowSeperatorView.bounds
gradientLayer.colors = [
UIColor.white.cgColor,
UIColor.usingHex("f2f2f2").cgColor,
UIColor.white.cgColor,
]
gradientLayer.locations = [0,0.5,1]
rowSeperatorView.layer.addSublayer(gradientLayer)
iconContainerView.layer.cornerRadius = 5
iconContainerView.clipsToBounds = true
iconContainerView.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner]
}
But cannot seem to achieve this result.
You are almost there, try adding a startPoint and endPoint and then play with the locations property.
let gradient = CAGradientLayer()
gradient.frame = rowSeperatorView.bounds
gradient.colors = [UIColor.white.cgColor, UIColor.usingHex("f2f2f2").cgColor, UIColor.white.cgColor]
gradient.locations = [0, 0.4, 0.6]
gradient.startPoint = CGPoint(x: 0.0, y: 0.0)
gradient.endPoint = CGPoint(x: 1.0, y: 0.0)
rowSeperatorView.layer.addSublayer(gradient)
Gradient effect is being applied but not exactly on the image
Below is my code:
let gradient = CAGradientLayer()
gradient.frame = CGRect(x: 0, y: 0, width: reportCell.reportImageView.bounds.size.width, height: reportCell.reportImageView.bounds.size.height)
gradient.colors = [UIColor.clear.cgColor,UIColor.black.cgColor]
gradient.locations = [0.0, 1.0]
reportCell.reportImageView.layer.addSublayer(gradient)
reportCell.reportImageView.image = UIImage(named: "\(indexPath.row).jpeg")
I want to make a UIView have an effect of transparent gradient from the middle to the left and right. Like in this example:
The word 籍 has the desired effect. This view is achieved by the class MarqueeLabel. I examined the source code, it is likely implemented by class CALayer.
In Swift 4: for top to bottom transparent gradient.
let gradient = CAGradientLayer()
gradient.startPoint = CGPoint(x: 0.5, y: 0.0)
gradient.endPoint = CGPoint(x: 0.5, y: 0.6)
let whiteColor = UIColor.white
gradient.colors = [whiteColor.withAlphaComponent(0.0).cgColor, whiteColor.withAlphaComponent(1.0).cgColor, whiteColor.withAlphaComponent(1.0).cgColor]
gradient.locations = [NSNumber(value: 0.0),NSNumber(value: 0.2),NSNumber(value: 1.0)]
gradient.frame = gradientView.bounds
gradientView.layer.mask = gradient
Screenshot
Swift code
let mask = CAGradientLayer()
mask.startPoint = CGPointMake(0.0, 0.5)
mask.endPoint = CGPointMake(1.0, 0.5)
let whiteColor = UIColor.whiteColor()
mask.colors = [whiteColor.colorWithAlphaComponent(0.0).CGColor,whiteColor.colorWithAlphaComponent(1.0),whiteColor.colorWithAlphaComponent(1.0).CGColor]
mask.locations = [NSNumber(double: 0.0),NSNumber(double: 0.2),NSNumber(double: 1.0)]
mask.frame = label.bounds
label.layer.mask = mask
You can use CAGradientLayer as following.
gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = baseView.bounds;
gradientLayer.startPoint = CGPointMake(0.5,0.0);
gradientLayer.endPoint = CGPointMake(0.5,1.0);
gradientLayer.locations = #[#(0.0), #(0.2), #(1.0)];
gradientLayer.colors = #[(id)[UIColor colorWithWhite:1.0 alpha:0.9].CGColor,
(id)[UIColor colorWithWhite:1.0 alpha:0.3].CGColor,
(id)[UIColor colorWithWhite:1.0 alpha:0.0].CGColor];
[baseView.layer addSublayer:gradientLayer];
CAGradientLayer supports several properties to make natural gradient, such as setting gradient direction by startPoint and endPoint, changing color curve by locations and colors.
You also make a transparent effect by using alpha channel of color.
Swift 3:
let mask = CAGradientLayer()
mask.startPoint = CGPoint(x: 0, y: 0.5)
mask.endPoint = CGPoint(x:1.0, y:0.5)
let whiteColor = UIColor.white
mask.colors = [whiteColor.withAlphaComponent(0.0).cgColor,whiteColor.withAlphaComponent(1.0),whiteColor.withAlphaComponent(1.0).cgColor]
mask.locations = [NSNumber(value: 0.0),NSNumber(value: 0.2),NSNumber(value: 1.0)]
mask.frame = view.bounds
view.layer.mask = mask
Use clear color instead of set the alpha value.
let gradientLayer = CAGradientLayer()
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
gradientLayer.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor]
gradientLayer.locations = [0, 0.2, 1]
gradientLayer.frame = gradientView.bounds
gradientView.layer.mask = gradientLayer