UIButton with a gradient layer slow

Question

I am customizing the UIButton with GradientLayer. I see a performance issue as view loading slowly and looks like a Jerk effect. Also when changing the orientation its same. I am using this code for an iPad application. With normal UIButton its smooth loading / rotating.

I am using the sample code found in google (GradientButton class) and is working fine. The container UIViewController which is pushed onto navigationcontroller stack to display the screen.

Here is the code:

- (void)awakeFromNib {
    [self initLayers];
}


- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        [self initLayers];
    }
    return self;
}


- (void)initLayers {
    [self initBorder];
    [self addShineLayer];
    [self addHighlightLayer];

    self.clipsToBounds = YES;
}


- (void)initBorder {
    CALayer *layer = self.layer;
    layer.cornerRadius = 8.0f;
    layer.masksToBounds = YES;
    layer.borderWidth = 1.0f;
    layer.borderColor = [UIColor colorWithWhite:0.5f alpha:0.2f].CGColor;
}


- (void)addShineLayer {
    shineLayer = [CAGradientLayer layer];
    shineLayer.frame = self.layer.bounds;
    shineLayer.colors = [NSArray arrayWithObjects:
                         (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
                         (id)[UIColor colorWithWhite:1.0f alpha:0.2f].CGColor,
                         (id)[UIColor colorWithWhite:0.75f alpha:0.2f].CGColor,
                         (id)[UIColor colorWithWhite:0.4f alpha:0.2f].CGColor,
                         (id)[UIColor colorWithWhite:1.0f alpha:0.4f].CGColor,
                         nil];
    shineLayer.locations = [NSArray arrayWithObjects:
                            [NSNumber numberWithFloat:0.0f],
                            [NSNumber numberWithFloat:0.5f],
                            [NSNumber numberWithFloat:0.5f],
                            [NSNumber numberWithFloat:0.8f],
                            [NSNumber numberWithFloat:1.0f],
                            nil];
//    shineLayer.shouldRasterize = YES;
//    shineLayer.rasterizationScale = [UIScreen mainScreen].scale;
    [self.layer addSublayer:shineLayer];

}


#pragma mark -
#pragma mark Highlight button while touched


- (void)addHighlightLayer {
    highlightLayer = [CALayer layer];
    highlightLayer.backgroundColor = [UIColor colorWithRed:0.25f green:0.25f blue:0.25f alpha:0.75].CGColor;
    highlightLayer.frame = self.layer.bounds;
    highlightLayer.hidden = YES;
    [self.layer insertSublayer:highlightLayer below:shineLayer];
}


- (void)setHighlighted:(BOOL)highlight {
    highlightLayer.hidden = !highlight;
    [super setHighlighted:highlight];
}

Is the performance issue due to Gradient Layer ?? Please tell me how to rectify this issue.

Answer 1

Try commenting out the different property assignments in your code one at a time and see if you get any performance benefit. I worked on an app once that was getting about 12FPS in core animation when I used setCornerRadius on the layer compared to nearly full frame rate when I turned that off. The issue may be your gradient, however, you won't know for sure unless you just do some a/b comparisons turning off/on the various properties.

I'll tell you right now, though, that when I've used gradient layers on buttons in table view cells, I was able to speed up the table scrolling dramatically when I just used a background image for the button instead of a gradient layer. You can try to turn on shouldRasterize, however, make sure you do that at the top level of your layer tree and not on any sublayers (although the issues that I saw with setting that parameter on all layers may have been fixed in iOS6. I just haven't tested it).