Learn how to make rounded corners for UIImageView items wrapped inside collection view cells, with rotation support.


TL;DR: Download the example repository from gitlab.


Achieving the goal is relatively easy, but if you don't know what's going on in the background it's might gona be harder than you would think first. So let's create a new project add a storyboard with a UICollectionViewController, and drag a UIImageView inside the cell, resize it, add some constraints, set the cell identifier.

Screen-Shot-2018-01-24-at-8.52.49

It should look something like the image above. Nothing special just a simple UI for our example application. Now search for some random image, add it to the project and let's do some real coding. 🤓

First I'll show you the little trick inside of the cell subclass.

Can you see it? Yes. You should override the bounds property.

As the next step we should write the controller class, with the basic data source for the collection view, and the support for the rotation methods.

If you are familiar with collection views, you might ask why am I doing this tutorial?

It's so simple. It just works, right? No, actually without the overridden bounds property the example would look something like this on the left side.

Funny, huh? The image on the right side is the actual result with the overridden bounds, that's the expected behaviour. 😉 Scrolling and rotation is going to be really strange if you don't override bounds and you don't reset the cornerRadius property for the visible views. You might ask: but why?

Layers, springs & struts and some explanation

Apple still has "Springs & Struts" based code inside of UIKit. This means that frame and bound calculations are happening in the underlying system and the constraint system is trying to work hard as well to figure out the proper measures.

"Springs & Struts" must die. While there is an init(frame) method, or a required init(coder) these layout things will suck as hell. I really like Interface Builder, but until we can not get a fine tool to create great user interfaces IB is going to be just another layer of possible bugs.

This issue won't even be there if you create the cell from code only using autolayout constraints or layout anchors! It's because IB creates the cell based on the frame you gave in while you designed your prototype. But if you forget init(frame) and you just create a new UIImageView() instance and let auto layout do the hard work, the layout system will solve everything else. Check this.

Obviously you have to write more code, register your cell class manually inside the controller class and you also have to override the layoutSubviews method inside the cell, but it'll work as it is expected. 🙄