CODEWITHSUNDEEP
iosswiftgradientcagradientlayer
BHendricks
BHendricks

Reputation: 4493

CAGradientLayer with 4 Colors in 4 Different Corners

Is it possible to create a gradient in iOS (I'm using Swift, but an example in Objective-C could also be helpful) that has 4 different colors, but where the colors each emanate from a different corner?

I've created a gradient that can go either topleft->bottomright or bottomleft->topright in terms of where I can place colors, but that's only for 2 colors. Here is the code I have attempted for that: 

let gradientColors: Array <AnyObject> = [bottomColor1.CGColor, topColor2.CGColor]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.startPoint = CGPointMake(0.0, 1.0);
gradientLayer.endPoint = CGPointMake(1.0, 0.0);

this successfully creates a 2 color gradient from one corner to another with bottomColor1 and topColor2 being UIColors. How, though, would I create a similar gradient with 2 additional colors in the two other corners?

Upvotes: 3

Views: 3052

Answers (2)

Iain Smith
Iain Smith

Reputation: 9703

Think this answer solves this issue, also seems to get rid of the "dark effect". Its is not using a CAGradientLayer but rather a custom UIView.

Upvotes: 0

BHendricks
BHendricks

Reputation: 4493

Thanks for @Martin R's suggestions, here is some code that creates a blend that seems to work pretty well. Since there are so many colors it gets pretty dark in the middle, but in the end gets the desired effect:

let gradientColors: Array <AnyObject> = [topColor1.CGColor, UIColor.clearColor().CGColor]
let gradientLocations: Array <AnyObject> = [0.0, 1.0]
let gradientLayer: CAGradientLayer = CAGradientLayer()
gradientLayer.colors = gradientColors
gradientLayer.locations = gradientLocations
gradientLayer.startPoint = CGPointMake(0.0, 0.0);
gradientLayer.endPoint = CGPointMake(1.0, 1.0);

let gradientColors2: Array <AnyObject> = [bottomColor1.CGColor, UIColor.clearColor().CGColor]
let gradientLayer2: CAGradientLayer = CAGradientLayer()
gradientLayer2.colors = gradientColors2
gradientLayer2.locations = gradientLocations
gradientLayer2.startPoint = CGPointMake(0.0, 1.0);
gradientLayer2.endPoint = CGPointMake(1.0, 0.0);


let gradientColors3: Array <AnyObject> = [UIColor.clearColor().CGColor, topColor2.CGColor]
let gradientLayer3: CAGradientLayer = CAGradientLayer()
gradientLayer3.colors = gradientColors3
gradientLayer3.locations = gradientLocations
gradientLayer3.startPoint = CGPointMake(0.0, 0.0);
gradientLayer3.endPoint = CGPointMake(1.0, 1.0);

let gradientColors4: Array <AnyObject> = [UIColor.clearColor().CGColor, bottomColor2.CGColor]
let gradientLayer4: CAGradientLayer = CAGradientLayer()
gradientLayer4.colors = gradientColors4
gradientLayer4.locations = gradientLocations
gradientLayer4.startPoint = CGPointMake(0.0, 1.0);
gradientLayer4.endPoint = CGPointMake(1.0, 0.0);

By Martin's suggestion, I create 4 gradients, each going from the desired corner's color to a UIColor.clearColor(), and I set the startPoint/endPoint accordingly to go from either bottom-left to top-right or top-left to bottom-right.

After this code, I simply add all of these gradient layers into my blendView, all with the same frame:

let background1 : CAGradientLayer = gradientLayer;
background1.frame = blendViewFrame;
let background2 : CAGradientLayer = gradientLayer2;
background2.frame = blendViewFrame;
let background3 : CAGradientLayer = gradientLayer3;
background3.frame = blendViewFrame;
let background4 : CAGradientLayer = gradientLayer4;
background4.frame = blendViewFrame;
blendView.layer.insertSublayer(background1, atIndex: 0)
blendView.layer.insertSublayer(background2, atIndex: 1)
blendView.layer.insertSublayer(background3, atIndex: 2)
blendView.layer.insertSublayer(background4, atIndex: 3)

So to finalize, it is possible to draw a 4 corner gradient with 4 different colors...the middle gets pretty dark, but above is how to do it.

Upvotes: 4

Related Questions