12
Subclassing UITableViewCell

A UITableView displays a list of UITableViewCell objects. For many applications, the basic cell with its textLabel, detailTextLabel, and imageView is sufficient. However, when you need a cell with more detail or a different layout, you subclass UITableViewCell.

In this chapter, you will create a subclass of UITableViewCell named ItemCell that will display Item instances more effectively. Each of these cells will show an Item’s name, its value in dollars, and its serial number (Figure 12.1).

Figure 12.1  Homepwner with subclassed table view cells

Screenshot shows the final, intended output of the Homepwner app, after creating a subclass of UITableViewCell for adding serial Number.

You customize the appearance of UITableViewCell subclasses by adding subviews to its contentView. Adding subviews to the contentView instead of directly to the cell itself is important because the cell will resize its contentView at certain times. For example, when a table view enters editing mode, the contentView resizes itself to make room for the editing controls (Figure 12.2). If you added subviews directly to the UITableViewCell, the editing controls would obscure the subviews. The cell cannot adjust its size when entering edit mode (it must remain the width of the table view), but the contentView can and does.

Figure 12.2  Table view cell layout in standard and editing mode

Figure represents the layout of a single row of the Table view in standard mode and Edit mode.

Creating ItemCell

Create a new Swift file named ItemCell. In ItemCell.swift, define ItemCell as a UITableViewCell subclass. 

import Foundation
import UIKit

class ItemCell: UITableViewCell {

}

The easiest way to configure a UITableViewCell subclass is through a storyboard. In Chapter 10, you saw that storyboards for table view controllers have a Prototype Cells section. This is where you will lay out the content for the ItemCell.

Open Main.storyboard and select the UITableViewCell in the document outline. Open its attributes inspector, change the Style to Custom, and change the Identifier to ItemCell.

Now open its identity inspector (the Identity inspector icon is shown. tab). In the Class field, enter ItemCell (Figure 12.3).

Figure 12.3  Changing the cell class

Screenshot of the Custom Class section of Identity inspector. It has two data fields: Class set to ItemCell and Module set to Current - Homepwner.

Change the height of the prototype cell to be about 65 points tall. You can change it either on the canvas or by selecting the table view cell and changing the Row Height from its size inspector.

An ItemCell will display three text elements, so drag three UILabel objects onto the cell. Configure them as shown in Figure 12.4. Make the text of the bottom label a slightly smaller font in a light shade of gray. Make sure that the labels do not overlap at all.

Figure 12.4  ItemCell’s layout

Screenshot shows the layout of the labels in a row. Three labels, with respect to the item name, serial number, and value are placed at top left, bottom left, and middle right respectively. The labels are surrounded by placeholders.

Add constraints to these three labels as follows.

  1. Select the top-left label and open the Auto Layout Add New Constraints menu. Select the top and left strut and then click Add 2 Constraints.

  2. You want the bottom-left label to always be aligned with the top-left label. Control-drag from the bottom-left label to the top-left label and select Leading.

  3. With the bottom-left label still selected, open the Add New Constraints menu, select the bottom strut, and then click Add 1 Constraint.

  4. Select the right label and Control-drag from this label to its superview on its right side. Select both Trailing Space to Container Margin and Center Vertically in Container.

  5. Select the 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 to 749. You will learn what these Auto Layout properties do in Chapter 13.

  6. Your frames might be misplaced, so select the three labels and click the Update Frames button.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset