Creating an ItemCell
- Once ItemCell is defined, open its attributes inspector and change the Style to Custom and Identifier to ItemCell.
- Then open the inspector, enter ItemCell in the class field.
- Change the prototype cell to be 65pts tall
- Add 3 labels to the prototype and configure them so that two are above each other on the left and one is on the right aligned with the top left label
- Select the top-left label and open the pin menu. Select the top and left struct and then click add 2 constraints.
- Control + drag from the bottom-left label to the top-left label and select Leading.
- With bottom-left selected, open the pin menu and select the bottom-struct and add 1 constraint.
- Select the right label and control + drag from this label to the superview on its right side. Select both trailing space to container margin and center vertically in container.
- Select bottom-left label and open its size inspector. Find the Vertical Content Hugging Priority and lower it to 250. Lower the Vertical Content Compression Resistance Priority 749.
- If frames are misplaced update frames in the resolve auto layout issue menu.
In Item Cell 3 outlets were added. An updateLabels function was added so that the cells respond to user input such as changes in text size as show in the clip below. In viewDidLoad, set the height of the table view cells dynamically so that each cell is adjusted to the contraints.
Dynamic Type – allows for automatic resizing of cells