Gustl007
Gustl007

Reputation: 245

Set a gradient Background to ImageView, rotation

I want to set a gradient Background to my ImageView. I found a solution for that here on Stack Overflow. But it doesn't really satisfy my needs.

I want the gradient to be from left to right. With my the code I found I am only able to fill it from top to bottom.

I create the gradient layer with this code:

+ (CAGradientLayer *)colorGradientWithColor:(UIColor *)color
{
    UIColor *colorOne = color;
    UIColor *colorTwo = [UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.0f];

    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];

    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
    NSNumber *stopTwo = [NSNumber numberWithFloat:0.9];

    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil];

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = colors;
    gradientLayer.locations = locations;

    return gradientLayer;
}

Then I add the layer to my UIImageView:

CAGradientLayer *gradientLayer = [BackgroundGradient colorGradientWithColor:difficultyColor];
gradientLayer.frame = myImageView.bounds;
[myImageView.layer insertSublayer:gradientLayer atIndex:0];

And here is the result:

enter image description here

And here my interface setup:

enter image description here

As you can see, there a two UIImageViews. I want to rotate the layer in the gradient view, so it goes from left to right and not how it is now.

With the following code fragment I am able to rotate the whole ImageView. This only kind of solves my problem, but I don't want that, because it kind of destroys my interface..

myImageView.transform = CGAffineTransformMakeRotation(M_PI*1.5f);

So basically I am searching for a solution to do the gradient from left to right instead from the top to the bottom.
Do you guys have any ideas? I am new to XCode and would appreciate every tip!

Upvotes: 1

Views: 1698

Answers (3)

MetalJr
MetalJr

Reputation: 302

Use startpoint and endpoint for the gradient layer:

BOOL horizontal = YES;
//(YES for left to right or NO for top to bottom)

gradientLayer.startPoint = horizontal ? CGPointMake(0, 0.5) : CGPointMake(0.5, 0);

gradientLayer.endPoint   = horizontal ? CGPointMake(1, 0.5) : CGPointMake(0.5, 1);

Upvotes: 0

Pratyusha Terli
Pratyusha Terli

Reputation: 2343

enter image description here This is the result I got from below code. I guess this is what you are trying to achieve

- (CAGradientLayer *)colorGradientWithColor:(UIColor *)color
{
    UIColor *colorOne = color;
    UIColor *colorTwo = [UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.0f];

    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];

    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
    NSNumber *stopTwo = [NSNumber numberWithFloat:0.9];

    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil];

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    [gradientLayer setStartPoint:CGPointMake(0.0, 0.5)];//add these lines
    [gradientLayer setEndPoint:CGPointMake(1.0, 0.5)];
    gradientLayer.colors = colors;
    gradientLayer.locations = locations;

    return gradientLayer;
}

Upvotes: 3

nicael
nicael

Reputation: 18995

Try to rotate your layer before adding it to imageview,using transform.

Upvotes: 0

Related Questions