Gradient - change angle (question)

[nitrodamsel]

First of all I want to thank you for this wonderful library that makes IOS development easier.

I would like to ask if Chameleon currently supports altering the angle of a linearGradient UIColor?

Thank you very much!

[vicc]

Glad you find it useful @rjcristy! To answer your question, at the moment there isn't any straightforward way to do this. If you'd like I can add it as a feature for the 2.0 release.

If you really need this asap, there is a way. Let's begin by looking at how a linear gradient's direction works. Take the following snippet of code for example:

//Set background color for our square view
square.backgroundColor = [UIColor colorWithGradientStyle:UIGradientStyleLeftToRight withFrame:square.frame andColors:@[FlatYellow, FlatRed]];

This will create a gradient that begins on the left side as FlatYellow and ends on the right as FlatRed.

If you right-click on "colorWithGradientStyle..." and select "Jump to Definition", you'll see that it'll take you to the method's internal implementation. Scroll down and you'll see the switch statement that contains the UIGradientStyleLeftToRight logic. Focus on the highlighted lines below. This is where the magic happens!

Since Chameleon's gradientColor is essentially created using a CAGradientLayer, it uses setStartPoint: and setEndPoint: to specify the direction.

The values for our leftToRight style are as follows:

[backgroundGradientLayer setStartPoint:CGPointMake(0.0, 0.5)];
[backgroundGradientLayer setEndPoint:CGPointMake(1.0, 0.5)];

To make it clearer how direction works take a look below:

As you can see it's pretty simple to make sense of the grid. Let's try an example. Say you wanted the FlatYellow color to begin at the lower left corner and the FlatRed color to end at the top right. All you need to do is update the values based on the coordinate grid above, in order to reflect the new startPoint and endPoint.

Now update the values to reflect your new points:

[backgroundGradientLayer setStartPoint:CGPointMake(0.0, 1.0)];
[backgroundGradientLayer setEndPoint:CGPointMake(1.0, 0.0)];

The lines above should get you the following:

You should be able to toy around with this to get the angle you want. I recommend adding a new case to the switch statement to reflect your new custom direction, unless you don't need the leftToRight direction, in which case you can just overwrite its values.

Hope this helps get you started on implementing the look you want. I know it's not the best approach, but I'll definitely explore the idea of make this easier in Chameleon 2.0 if you'd like. Maybe allow users to specify an angle as you mentioned, and handle all the math in the background. What do you think?

[nitrodamsel]

Thank you for your very generous answer! Hope it can help others users too of this library.

[vicc]

No worries. Good luck!

[gabovanlugo]

Thanks for this ViccAlexander. Awesome Answer!

[VictorK]

Very helpful!

On Mon, Jan 25, 2016 at 9:47 PM Gabo Lugo notifications@github.com wrote:

Thanks for this ViccAlexander. Awesome Answer!

—
Reply to this email directly or view it on GitHub
#32 (comment)
.

[bayarmanlai]

Change angle still haven't applied yet in 2.1