Set CALayer Gradient Background - objective-c

I am trying to add a gradient to a CALayer I have created. I can set the background colour of the CALayer with the following:
self.colorLayer = [CALayer layer];
[self.colorLayer setBackgroundColor:color.CGColor];
[self.colorView setWantsLayer:YES];
[self.colorView setLayer:self.colorLayer];
I've looked around with no success (surprisingly I thought this would have been answered many times).
I have made a gradient with:
NSGradient *gradient =
[[NSGradient alloc] initWithStartingColor:[NSColor orangeColor]
endingColor:[NSColor lightGrayColor]];
But can't add it to my CALayer or add an angle.

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.colors = [NSArray arrayWithObjects:(id)[[NSColor whiteColor] CGColor], (id)[[NSColor greenColor] CGColor], nil];
gradient.frame = self.colorView.bounds;
[self.colorView setLayer:gradient];
[self.colorView setWantsLayer:YES];

You don't need to add a gradient to a CALayer, because you can use a CAGradientLayer instead.

Swift 4 version of this answer
let gradient = CAGradientLayer()
gradient.colors = [NSColor.hlpMarineBlue, NSColor.hlpDarkishBlue, NSColor.hlpOceanBlue]
gradient.frame = self.backgroundView.bounds;
self.colorView.layer = gradient
self.colorView.wantsLayer = true

//To Use:
guard let firstColot: NSColor = NSColor(hexString: HexColorCode.code.leftMenuFirstColor.rawValue) else {return}
guard let secondColor: NSColor = NSColor(hexString: HexColorCode.code.leftMenuSecondColor.rawValue) else {return}
leftMenuBgView.gradient(fillView: leftMenuBgView,
withGradientFromColors: [firstColot, secondColor])
extension NSView {
func gradient(fillView view: NSView, withGradientFromColors colors: Array<NSColor>) {
self.wantsLayer = true
let gradientLayer = CAGradientLayer()
gradientLayer.frame = view.bounds
let color1 = colors[0].cgColor
let color2 = colors[1].cgColor
gradientLayer.colors = [color1, color2]
gradientLayer.locations = [0.0, 1.0]
self.layer?.insertSublayer(gradientLayer, at: 0)
}
}

Related

Making a gradient arc?

i wanna make an arc with the use of CAGradientLayer in such a way:-
20% of the arc have same single color then other 80% of arc has a gradient of two colors.
I already tried by hand on locations
startPoint endPoint property of CAGradientLayer but couldn't get the success and already go through from tutorials but somehow couldn't understand the concept properly.please solve my problem with clear description of it.
// for beizier path
- (UIBezierPath *)samplePath
{
UIBezierPath *path = [UIBezierPath bezierPath];
path = [UIBezierPath bezierPath];
[path addArcWithCenter:CGPointMake(200, 200) radius:30.0f startAngle:(3*M_PI)/4 endAngle:M_PI/4 clockwise:YES];
path.lineWidth = 30;
[[UIColor redColor] setStroke];
// [[UIColor colorWithRed:arc4random() green:arc4random() blue:arc4random() alpha:1.0] setFill];
[path stroke];
return path;
}
- (void)startAnimation
{
CAShapeLayer *shapeLayer;
if (self.pathLayer == nil)
{
shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [[self samplePath] CGPath];
shapeLayer.strokeColor = [[UIColor redColor] CGColor];
shapeLayer.fillColor = nil;
shapeLayer.lineWidth = 30;
self.pathLayer = shapeLayer;
}
[self animationBasic];
[self gradientLayer:shapeLayer];
}
-(void)animationBasic
{
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
pathAnimation.duration = 3.0;
pathAnimation.fromValue = #(0.0f);
pathAnimation.toValue = #(1.0f);
[self.pathLayer addAnimation:pathAnimation forKey:#"strokeEnd"];
}
-(void)gradientLayer:(CAShapeLayer *)shapelayer
{
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.frame;
gradientLayer.colors = #[(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor redColor].CGColor ];
gradientLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.5f],
[NSNumber numberWithFloat:1.0f],
nil];
// gradientLayer.startPoint = CGPointMake(0,1);
// gradientLayer.endPoint = CGPointMake(1,1);
[self.layer addSublayer:gradientLayer];
gradientLayer.mask = shapelayer;
}
The locations property of a CAGradientLayer instance should be populated with the starting points (I know, the word stops makes it sound the opposite) of each color as specified in the colors property, from 0 to 1. These stops are rendered vertically from top to bottom.
So, this should work:
gradientLayer.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:0.5f],
nil];
Now, at the same time, if you want to make the gradient horizontal (or any other direction), you can make use of the startPoint and endPoint properties.
gradientLayer.startPoint = CGPointMake(0.0, 0.5); //Default is (0.5, 0,0)
gradientLayer.endPoint = CGPointMake(1.0, 0.5); //Default is (0.5, 1.0)
//The gradientLayer will be rendered horizontally.
The startingPoint and endingPoint properties determine the direction and layout of the gradient in the layer. These are defined in the unit coordinate system, where each point is defined as a set of unit coordinates and the top left corner being the origin. So, (0,0) corresponds to the origin, (1,1) corresponds to the bottom right corner. You can check this excellent answer for a better explanation.
So to summarize, the gradient is rendered in the direction and region as specified by the startPoint and endPoint properties, with the colors rendered in the ratio specified in the locations property.
At the end, you can only understand this fully by tinkering with the properties and using various combinations to see what effect is rendered.

Objective c 2D gradient

I need to make at 2D gradient. I have the first part of it make a gradient vertical direction from a color to a clear color:
+ (void)addFadeout:(UIView *) view withColor:(UIColor *)color {
UIColor * halfClearColor = [color colorWithAlphaComponent:0];
CALayer *layer = view.layer;
layer.masksToBounds = YES;
CAGradientLayer *shineLayer = [CAGradientLayer layer];
shineLayer.frame = layer.bounds;
shineLayer.colors = #[
(id)color.CGColor,
(id)halfClearColor.CGColor];
shineLayer.locations = #[
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f]];
[view.layer insertSublayer:shineLayer atIndex:0];
}
But I also need to be able to add multiple colors in the horizontal direction where they either fade together and is shown separately(still with the vertical gradient). I know I could just add them besides each other but that is not what I am looking for.. How would you do it?
It might be something like this but I can't seem to connect the parts:
http://cupsofcocoa.com/tag/gradient/
https://developer.apple.com/library/mac/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_shadings/dq_shadings.html
Edit 1:
This is what I got now:
It might be unclear what I wanted. I also want a gradient along the x-axis between multiple colors. So what I got combined with something like this: (to replace the red color)
Solution:
+ (void)addFadeout:(UIView *) view withColors:(NSArray *)colors { //CGColors
UIColor * someColor = [UIColor colorWithCGColor:((__bridge CGColorRef)[colors lastObject])];//only alpha channel used with more than one color
UIColor * halfClearColor = [someColor colorWithAlphaComponent:0];
CALayer *layer = view.layer;
layer.masksToBounds = YES;
CAGradientLayer *transparencyLayer = [CAGradientLayer layer];
transparencyLayer.frame = layer.bounds;
transparencyLayer.colors = #[
(id)someColor.CGColor,
(id)halfClearColor.CGColor];
transparencyLayer.locations = #[
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f]];
if(colors.count > 1){
CAGradientLayer * multiColoredLayer = [self getMultiColoredLayerWithColors:colors inLayer:layer];
multiColoredLayer.mask = transparencyLayer;
[view.layer insertSublayer:multiColoredLayer atIndex:0];
}
else{
[view.layer insertSublayer:transparencyLayer atIndex:0];
}
}
+ (CAGradientLayer *)getMultiColoredLayerWithColors:(NSArray *)colors inLayer:(CALayer *)layer{ //CGColors
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = layer.bounds;
gradientLayer.colors = colors;
gradientLayer.startPoint = CGPointMake(0, 0.5);
gradientLayer.endPoint = CGPointMake(1.0, 0.5);
return gradientLayer;
}
You need to use 2 of 'something' as gradients can only be drawn in a single direction at a time. You could do it with 2 CAGradientLayers, one behind the other (or one as a sublayer of the other). Or, you could do it with 2 CGGradients, both drawn into the same context.
From your comment, you want to alpha mask. The best way to apply the 'top' layer with transparency is by setting it as the mask of the 'bottom' layer:
CAGradientLayer *colorLayer = ...;
CAGradientLayer *transparencyLayer = ...;
colorLayer.mask = transparencyLayer;
In this case, any colour in the transparencyLayer is ignored and only the alpha values are used.

Animating CAShapeLayer's strokeColor with CABasicAnimation

I've been unsuccessful at animating a flashing stroke on a CAShapeLayer using the answer from this previous thread, and after many searches I can find no other examples of animating the stroke using CABasicAnimation.
What I want to do is have the stroke of my CAShapeLayer pulse between two colors. Using CABasicAnimation for opacity works fine, but the [CABasicAnimation animationWithKeyPath:#"strokeColor"] eludes me, and I'd appreciate any advice on how to successfully implement.
CABasicAnimation *strokeAnim = [CABasicAnimation animationWithKeyPath:#"strokeColor"];
strokeAnim.fromValue = (id) [UIColor blackColor].CGColor;
strokeAnim.toValue = (id) [UIColor purpleColor].CGColor;
strokeAnim.duration = 1.0;
strokeAnim.repeatCount = 0.0;
strokeAnim.autoreverses = NO;
[shapeLayer addAnimation:strokeAnim forKey:#"animateStrokeColor"];
// CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:#"opacity"];
// opacityAnimation.fromValue = [NSNumber numberWithFloat:0.0];
// opacityAnimation.toValue = [NSNumber numberWithFloat:1.0];
// opacityAnimation.duration = 1.0;
// opacityAnimation.repeatCount = 0.0;
// opacityAnimation.autoreverses = NO;
// [shapeLayer addAnimation:opacityAnimation forKey:#"animateOpacity"];
Uncommenting the opacity animation results in an expected opacity fade. The stroke animation produces no effect. An implicit strokeColor change animates as expected, but I would like documented confirmation that strokeColor can be explicitly animated using CABasicAnimation.
Update: The specific problem was that shapeLayer.path was NULL. Correcting that fixed the problem.
The code below works great for me. What is the lineWidth of your shapeLayer stroke path? Could that be the issue?
- (void)viewDidLoad
{
[super viewDidLoad];
UIBezierPath * circle = [UIBezierPath bezierPathWithOvalInRect:self.view.bounds];
CAShapeLayer * shapeLayer = [CAShapeLayer layer];
shapeLayer.path = circle.CGPath;
shapeLayer.strokeColor =[UIColor blueColor].CGColor;
[shapeLayer setLineWidth:15.0];
[self.view.layer addSublayer:shapeLayer];
CABasicAnimation *strokeAnim = [CABasicAnimation animationWithKeyPath:#"strokeColor"];
strokeAnim.fromValue = (id) [UIColor redColor].CGColor;
strokeAnim.toValue = (id) [UIColor greenColor].CGColor;
strokeAnim.duration = 3.0;
strokeAnim.repeatCount = 0;
strokeAnim.autoreverses = YES;
[shapeLayer addAnimation:strokeAnim forKey:#"animateStrokeColor"];
}
Let me know if it works for you...

CAGradientLayer behind self.layer appearing above

I'm trying to make a custom UIButton class, except, when drawing the background of the button, and adding it as a sublayer using insertSubLayer behind: method, it still appears infront of the UIButton Textlabel.
My code is posted below, Any help would be greatly appreciated.
CALayer *layer = self.layer;
layer.cornerRadius = 3.0f;
layer.masksToBounds = YES;
layer.borderWidth = 1.0f;
layer.borderColor = [UIColor colorWithWhite:0.5f alpha:0.5f].CGColor;
self.titleLabel.textColor = [UIColor greenColor];
//layer.backgroundColor = [UIColor greenColor].CGColor;
bgColor = [CAGradientLayer layer];
bgColor.frame = self.layer.bounds;
self.backgroundColor = [UIColor colorWithWhite:1 alpha:1];
bgColor.colors = [NSArray arrayWithObjects:
(id)[UIColor colorWithWhite:0.97f alpha:1].CGColor,
(id)[UIColor colorWithWhite:0.87f alpha:1].CGColor,
nil];
bgColor.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1],
nil];
[self.layer addSublayer:bgColor];
[self.layer insertSublayer:bgColor below:layer];
self.layer and layer in your code point to the same object. You're asking the layer to insert a sublayer behind itself - this is not possible. Sublayers are contained within the parent layer. Try
[self.layer insertSublayer:bgColor atIndex:0];
Instead of
[self.layer addSublayer:bgColor];
[self.layer insertSublayer:bgColor below:layer];
This will add the gradient at the lowest possible point in the layer hierarchy of your button.

adding gradient to UIView in drawRect

I am trying to add a CAGradientLayer in my drawRect, the code is the following:
- (void)drawRect:(CGRect)rect {
CAGradientLayer *gradientOverlay = [CAGradientLayer layer];
CGColorRef grayColor = [UIColor colorWithRed:37/255.f green:37/255.f
blue:37/255.f alpha:1.0].CGColor;
CGColorRef blueColor = [UIColor colorWithRed:23.0/255.0 green:171.0/255.0
blue:219.0/255.0 alpha:1.0].CGColor;
gradientOverlay.colors = [NSArray arrayWithObjects:
(id) grayColor,
(id) grayColor,
(id) blueColor,
nil];
gradientOverlay.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0],
[NSNumber numberWithFloat:0.4],
[NSNumber numberWithFloat:1],
nil];
CGPoint startPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMidY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMaxX(rect), CGRectGetMidY(rect));
gradientOverlay.startPoint = startPoint;
gradientOverlay.frame = self.bounds;
gradientOverlay.endPoint = endPoint;
self.layer.mask = gradientOverlay;
}
Any idea why this is not working?
How about trying this instead of overriding drawRect?
+ (void) applyGradient:(NSArray *)cgColors toView:(UIView *)view {
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = cgColors;
for(CALayer *layer in view.layer.sublayers) {
if([layer isKindOfClass:[CAGradientLayer class]]) return;
}
[view.layer insertSublayer:gradient atIndex:0];
}
Add your CAGradientLayer as a sublayer of your self.layer.
Note: If you're doing it in the drawRect: method make sure you're not adding a new CAGradientLayer every time drawRect: is called.
UPDATE (regarding the comment):
Here's the code for what you're asking:
//Create a layer that holds your background image and add it as sublayer of your self.layer
CALayer *layer = [CALayer layer];
layer.frame = self.layer.frame;
layer.contents = (id)[UIImage imageNamed:#"background.png"].CGImage;
[self.layer addSublayer:layer];
//Create your CAGradientLayer
CAGradientLayer *gradientOverlay = [CAGradientLayer layer];
CGColorRef grayColor = [UIColor colorWithRed:37/255.f green:37/255.f
blue:37/255.f alpha:1.0].CGColor;
CGColorRef blueColor = [UIColor colorWithRed:23.0/255.0 green:171.0/255.0
blue:219.0/255.0 alpha:1.0].CGColor;
gradientOverlay.colors = [NSArray arrayWithObjects:
(id) grayColor,
(id) grayColor,
(id) blueColor,
nil];
gradientOverlay.locations = [NSArray arrayWithObjects:
[NSNumber numberWithFloat:0],
[NSNumber numberWithFloat:0.4],
[NSNumber numberWithFloat:1],
nil];
CGPoint startPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMidY(rect));
CGPoint endPoint = CGPointMake(CGRectGetMaxX(rect), CGRectGetMidY(rect));
gradientOverlay.startPoint = startPoint;
gradientOverlay.frame = self.layer.frame;
gradientOverlay.endPoint = endPoint;
//set its opacity from 0 ~ 1
gradientOverlay.opacity = 0.6f;
//add it as sublayer of self.layer (it will be over the layer with the background image
[self.layer addSublayer:gradientOverlay];
Note: You don't have to do this in drawRect: method. Create your layer hierarchy in the init method for example, if you need to change the geometry of some views/layers override the layoutSubviews method.
Generally, you should only override drawRect: when you will be drawing your view using CoreGraphics.
A better place to put your code would be in init if you're creating this view in code, or awakeFromNib if you're placing this view in a .xib