How to resize a CAGradientLayer after rotation?

Question

I'm adding a CAGradientLayer to a view. When the view is auto-resized (such as after a rotation) the gradient layer is not resized. Can the gradient be set to auto-resize the same as the view? Note also that I am using auto-layout constraints in the view.

Here's what I'm doing:

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(0.0, 0.0, frame.size.width, frame.size.height);
    gradientLayer.colors = [NSArray arrayWithObjects:
                       (id)[[UIColor colorWithRed:255.0/255.0f green:255.0/255.0f blue:255.0/255.0f alpha:1.0f] CGColor],
                       (id)[[UIColor colorWithRed:233.0/255.0f green:233.0/255.0f blue:233.0/255.0f alpha:1.0f] CGColor], nil];

    [self.layer insertSublayer:gradientLayer atIndex:0];

possible duplicate of [CALayer autoresizingMask not for iOS SDK?](http://stackoverflow.com/questions/8600826/calayer-autoresizingmask-not-for-ios-sdk) — CodaFi, Mar 22 '13 at 23:33
@CodaFi Slightly different question. Also, although there is an accepted answer for that question it's seemingly useless for this case. — memmons, Mar 22 '13 at 23:53
You're right, that answer is worthless. Override `-layoutSubviews` and assign your frames in there. — CodaFi, Mar 22 '13 at 23:54

score 34 · Accepted Answer · edited May 23 '17 at 12:02

34

Here are two different ways to fix your problem.

Make gradientLayer an instance variable instead of a local variable. Then, override layoutSubviews in your view class to set the frame of the gradient layer:
```
- (void)layoutSubviews {
    [super layoutSubviews];
    _gradientLayer.frame = self.bounds;
}
```
Create a subclass of UIView named GradientView, and override its +layerClass method to return [CAGradientLayer class]. Use this view to draw your gradient instead of using a layer directly. Then set the gradient view's autoresizingMask (or add constraints to it if you are using auto layout). See this answer for an example.

Creating the GradientView class will also make the resizing behave correctly during rotation, so I recommend that solution.

edited May 23 '17 at 12:02

Community

1
1

answered Nov 18 '13 at 22:27

rob mayoff

375,296
67
796
848

♡ the linked answer. Great explanation of the problem (with animated gif!) and solution. Well done. – memmons Nov 19 '13 at 19:23
The included link made the explanation super simple! Thanks Rob! – Zack Weiner Mar 01 '15 at 05:07

score 2 · Answer 2 · answered Mar 22 '13 at 23:34

2

I resize the layer's bounds manually by overriding the setFrame: method of the view:

-(void)setFrame:(CGRect)frame
{
    [super setFrame:frame];
    _gradientLayer.bounds = CGRectMake(0, 0, CGRectGetWidth(frame), CGRectGetHeight(frame));
}

answered Mar 22 '13 at 23:34

Felix

35,354
13
96
143

`setFrame:` unfortunately is not called during events like rotation, so this won't work. – memmons Mar 23 '13 at 02:03

How to resize a CAGradientLayer after rotation?

2 Answers2

Linked