Custom cells for UIPickerView with AutoLayout

For a project I needed to add a UIPickerView with custom cells using AutoLayout.  UIKit allows this via the UIPickerViewDelegate method pickerView(_:viewForRow:forComponent:reusingView).

The cell just needed an UIImageView and UILabel, so I thought it would be pretty straightforward to do, but there are some caveats you need to know. Big thanks to Tom Adriaenssen for pointing them out and not ruining my Sunday afternoon 🙂

The problem

This is what the problem looked like

UIPickedView with custom cells
UIPickedView with custom cells

I’ve added the following constraints:

  1. UILabel: center in superview (horizontal, vertical)
  2. UIImageView: Pin the Trailing edge to the Leading edge of the UILabel with an offset of -20
  3. UIImageView: center in superview (vertically)
  4. As the custom cell gets embedded into the UIPickerView I also pinned all 4 edges of my custom view to the superview with no insets
  5. I set thesetTranslatesAutoresizingMaskIntoConstraints method to false on my custom cell

The code looked like this

The solution

So doing the following resulted in the BAD! version of the image above. What did I do wrong?

First of all, you should _not_ set setTranslatesAutoresizingMaskIntoConstraints to false when you are using AutoLayout within a view which you don’t place (the UIPickerView will take care of this).

Second, don’t pin the edges of the custom cell to the superview! The UIPickerView will figure out the height.

And the most important part I forgot, you should call setNeedsUpdateConstraints() at the end of the init method!

You can check out the project on GitHub to see a working version.