CAShapeLayer rounding corners impacts performance

Question

I have a UICollectionView (iPad) that has jarry scrolling.Each cell has a white rectangle UIView (with all rounded corners) that has another UIImageView in front of it with only top two corners rounded. See this link below for how this cell looks - i.stack.imgur.com/Ptlig.png

Here's the code for the UICollectionViewCell

    UIView * bgView = [[UIView alloc] initWithFrame:CGRectMake(5, 5, (self.contentView.frame.size.width - 10), (self.contentView.frame.size.width - 10)*IMAGE_RATIO + 43.5)];
    bgView.backgroundColor = [UIColor clearColor];
    bgView.layer.cornerRadius = 10;
    bgView.layer.borderWidth = 0.5f;
    bgView.layer.borderColor = [UIColor colorWithRed: 179/255.0 green:181/255.0 blue:184/255.0 alpha:1.0].CGColor;
    bgView.layer.backgroundColor = [UIColor whiteColor].CGColor;
    bgView.layer.shouldRasterize = YES;
    bgView.layer.rasterizationScale = [UIScreen mainScreen].scale;
    [self.contentView addSubview:bgView];

    self.parablePost = [[UIImageView alloc] initWithFrame:CGRectMake(5, 5, (self.contentView.frame.size.width - 10), (self.contentView.frame.size.width-10)*IMAGE_RATIO)];
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.parablePost.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(10.0, 10.0)];
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = self.parablePost.bounds;
    maskLayer.path = maskPath.CGPath;
    self.parablePost.layer.mask = maskLayer;
    [self.contentView addSubview:self.parablePost];

When this line "self.parablePost.layer.mask = maskLayer" is commented, scrolling is smooth. So the CAShapeLayer is causing performance issues. I tried rasterize and hand drawing instead of using UIBezierPath but it does not improve the experience.

Is there a faster way to round two corners of UIImageView?

EDIT:

I finally added static images to simulate rounded corners on the top two corners of the UIImageView that gave me the same look without the scroll jitter. Surprised that CAShapeLayer is a performance drain.

masks are expensive--they are CPU rendered. try to think of another way to get the look you want. — nielsbot
Maybe a better idea is to use normal corner rounding but then hide the bottom rounded corners behind the white info portion of your cell. — nielsbot
Can't you just turn on rounded corners for your entire cell and not worry about your sublayers having rounded corners? — nielsbot
@nielsbot that would need cliptobounds on bgView to curve the UIImageView which is also slow. — ADP
I thought using round corners is a special fast path? You could profile the performance to make sure... — nielsbot

nielsbot nielsbot · Accepted Answer · 2014-12-06T07:31:59

masks are expensive... (they might even be rendered in software). try to think of another way to get the look you want. for example, pre-render things to an image...

CAShapeLayer rounding corners impacts performance

1 Answers