Setting corner radius on a cell kills UICollectionView's performance

Question

I have a UICollectionView that has only a few cells (about 20). Performance for this collection works great. However, as soon as I try to round the corners of the UICollectionViewCells that are being rendered by this view, my performance takes a significant hit. In my cell's init method, this is the only line I add to cause this:

[self.layer setCornerRadius:15];

Since this is in the init method and I am reusing the cells properly, I don't see why this should be causing me issue.

I have tried adjusting the rasterization and opacity of the sell using multiple combinations of the following, with still no effect:

[self.layer setMasksToBounds:YES];
[self.layer setCornerRadius:15];
[self.layer setRasterizationScale:[[UIScreen mainScreen] scale]];
self.layer.shouldRasterize = YES;
self.layer.opaque = YES;

Is their some setting or trick to improve the performance of a UICollectionView that has cells with rounded corners?

Answer 1

As @Till noted in comments, a prerendered image should solve your performance problem. You can put all the corner rounding, shadowing, and whatever other special effects into that instead of needing CA to render them on the fly.

Prerendered images don't lock you into a static content size, either: look into the UIImage resizable image stuff. (That's still way faster than CA rendering every frame.)

Answer 2

I have found that this is caused entirely because of the call to dequeuereusablecellwithidentifier. Each time this is called, the cell with rounded corners needs to be re-rendered. If the collection view did not remove them from the view when the item scrolled off the screen, then the performance would not be affected (as long as their wasn't too many items in the collection that is). Seems like a double edged sword - both ways have their limits.

Answer 3

There is a code for UIView subclass, which is provide you a view with opaque rounded borders and transparent hole in the middle. You should create needed view as usual and after that you can add view with hole over your view. Visualisation is here.

It works if you use one-colored background for UICollectionView or UITableView, you can add following subview for each cell:

@interface TPRoundedFrameView : UIView

@property (assign, nonatomic) CGFloat cornerRadius;
@property (strong, nonatomic) UIColor * borderColor;

@end

@implementation TPRoundedFrameView

- (instancetype)init {
    if ((self = [super init])) {
        self.opaque = NO;
        self.backgroundColor = [UIColor clearColor];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    UIBezierPath * path = [UIBezierPath bezierPathWithRect:rect];
    UIBezierPath * innerPath = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:self.cornerRadius];
    [path appendPath:[innerPath bezierPathByReversingPath]];
    [self.borderColor set];
    [path fill];
}

@end

Example for target cell class:

- (void)awakeFromNib {
    [super awakeFromNib];
    // creating holed view with rounded corners
    self.myRoundedView.backgroundColor = [UIColor whiteColor];
    TPRoundedFrameView * roundedFrame = [TPRoundedFrameView new];
    roundedFrame.cornerRadius = 5.f;
    roundedFrame.borderColor = [UIColor groupTableViewBackgroundColor];

    // add borders to your view with appropriate constraints
    [self.myRoundedView addSubview:roundedFrame];

    roundedFrame.translatesAutoresizingMaskIntoConstraints = NO;
    NSDictionary * views = NSDictionaryOfVariableBindings(roundedFrame);
    NSArray * horizontal = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[roundedFrame]-0-|" options:0 metrics:nil views:views];
    NSArray * vertical = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[roundedFrame]-0-|" options:0 metrics:nil views:views];
    [self.myRoundedView addConstraints:horizontal];
    [self.myRoundedView addConstraints:vertical];
}

Result: Table with rounded views as cells

Answer 4

I fixed all of my performance borderRadius issues by applying this radius on the contentView instead of the cell itself.

self.contentView.layer.borderWidth = 1.0f;
self.contentView.layer.cornerRadius = 5.0f;
self.contentView.layer.borderColor = [UIColor colorWithRed:202/255. green:202/255. blue:202/255. alpha:1.0].CGColor;