/ UIKit

UICollectionView cells with circular images plus rotation support

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


TL;DR: Download the example repository from github.


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.

class Cell: UICollectionViewCell {
    
    @IBOutlet weak var imageView: UIImageView!

    override var bounds: CGRect {
        didSet {
            self.layoutIfNeeded()
        }
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()

        self.imageView.layer.masksToBounds = true
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        
        self.setCircularImageView()
    }

    func setCircularImageView() {
        self.imageView.layer.cornerRadius = CGFloat(roundf(Float(self.imageView.frame.size.width / 2.0)))
    }
}

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.

class ViewController: UICollectionViewController {

    override func collectionView(_ collectionView: UICollectionView,
                                 numberOfItemsInSection section: Int) -> Int {
        return 30
    }
    
    override func collectionView(_ collectionView: UICollectionView,
                                 cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! Cell
        
        cell.imageView.image = UIImage(named: "Example.jpg")
        cell.imageView.backgroundColor = .lightGray
   
        return cell
    }

    override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
        super.traitCollectionDidChange(previousTraitCollection)
        
        guard
            let previousTraitCollection = previousTraitCollection,
            self.traitCollection.verticalSizeClass != previousTraitCollection.verticalSizeClass ||
            self.traitCollection.horizontalSizeClass != previousTraitCollection.horizontalSizeClass
        else {
            return
        }

        self.collectionView?.collectionViewLayout.invalidateLayout()
        self.collectionView?.reloadData()
    }
    
    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        super.viewWillTransition(to: size, with: coordinator)
        
        self.collectionView?.collectionViewLayout.invalidateLayout()
        
        coordinator.animate(alongsideTransition: { context in
            
        }, completion: { context in
            self.collectionView?.collectionViewLayout.invalidateLayout()
            
            self.collectionView?.visibleCells.forEach { cell in
                guard let cell = cell as? Cell else {
                    return
                }
                cell.setCircularImageView()
            }
        })
    }
}

extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {

        return CGSize(width: collectionView.frame.size.width/3.0 - 8,
                      height: collectionView.frame.size.width/3.0 - 8)
    }
}

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.

self.collectionView?.register(Cell.self, forCellWithReuseIdentifier: "Cell")
class Cell: UICollectionViewCell {

    weak var imageView: UIImageView!
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        
        self.translatesAutoresizingMaskIntoConstraints = false

        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        self.addSubview(imageView)
        self.imageView = imageView
        
        self.imageView.topAnchor.constraint(equalTo: self.topAnchor)
        self.imageView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
        self.imageView.leadingAnchor.constraint(equalTo: self.leadingAnchor)
        self.imageView.trailingAnchor.constraint(equalTo: self.trailingAnchor)
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        self.imageView.layer.masksToBounds = true
        self.imageView.layer.cornerRadius = CGFloat(roundf(Float(self.imageView.frame.size.width/2.0)))
    }
}

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. 🙄