Implementing Radio Button-Like Behavior in iOS Applications

One of the things I have always found a bit frustrating about iOS development is the lack of selection controls like radio buttons and drop-down lists. These controls are ubiquitous on other platforms, and most users are comfortable with their use and behavior.

Fortunately, it is possible to approximate the behavior of these controls using UITableView. Apple recommends using checkmarks to represent selection state; however, this is not something you get for free – it must be implemented by the application for each table view or table view section that requires it.

Because it is such a common metaphor, MarkupKit's LMTableView class now provides support for implementing radio button-like behavior automatically. Setting the selection mode of any section in an LMTableView to “singleCheckmark” ensures that only a single row will be checked at any given time. MarkupKit adds a boolean checked property to the UITableViewCell class to allow an application to get or set a cell's selection state.

For example, the following markup creates a table view that allows a user to choose one value from a list of size options. The “Large” option is checked by default:

<LMTableView style="groupedTableView">
    <?sectionSelectionMode singleCheckmark?>

    <UITableViewCell textLabel.text="Small"/>
    <UITableViewCell textLabel.text="Medium"/>
    <UITableViewCell textLabel.text="Large" checked="true"/>
    <UITableViewCell textLabel.text="Extra-Large"/>
</LMTableView>

This markup produces output similar to the following:

The following Swift code produces the same result, albeit a bit more verbosely:

var tableView = LMTableView(frame: CGRect(x: 0, y: 0, width: 0, height: 0), style: UITableViewStyle.Grouped)

tableView.setSelectionMode(LMTableViewSelectionMode.SingleCheckmark, forSection: 0)

var smallCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: nil)
smallCell.textLabel!.text = "Small"

tableView.insertCell(smallCell, forRowAtIndexPath: NSIndexPath(forRow: 0, inSection: 0))

var mediumCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: nil)
mediumCell.textLabel!.text = "Medium"

tableView.insertCell(mediumCell, forRowAtIndexPath: NSIndexPath(forRow: 1, inSection: 0))

var largeCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: nil)
largeCell.textLabel!.text = "Large"

largeCell.checked = true

tableView.insertCell(largeCell, forRowAtIndexPath: NSIndexPath(forRow: 2, inSection: 0))

var extraLargeCell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: nil)
extraLargeCell.textLabel!.text = "Extra-Large"

tableView.insertCell(extraLargeCell, forRowAtIndexPath: NSIndexPath(forRow: 3, inSection: 0))

Setting a section's selection mode to “multipleCheckmarks” enables selection behavior similar to a collection of checkboxes on other platforms. For example, the following markup creates a list of pet choices from which the user may select zero or more values. “Cat” and “Turtle” are checked by default:

<LMTableView style="groupedTableView">
    <?sectionSelectionMode multipleCheckmarks?>

    <UITableViewCell textLabel.text="Dog"/>
    <UITableViewCell textLabel.text="Cat" checked="true"/>
    <UITableViewCell textLabel.text="Fish"/>
    <UITableViewCell textLabel.text="Rabbit"/>
    <UITableViewCell textLabel.text="Turtle" checked="true"/>
</LMTableView>

This markup produces output similar to the following:

MarkupKit also adds a value property to UITableViewCell that allows an application to associate an optional value with a cell, similar to the “value” attribute of an <option> in an HTML <select> element. For example, the following markup creates a table view that allows a user to select a color. The table view's controller responds to selection changes by applying the selected cell's value as the background color of another cell:

<LMTableView style="groupedTableView">
    <?sectionSelectionMode singleCheckmark?>

    <UITableViewCell textLabel.text="Red" value="#ff0000"/>
    <UITableViewCell textLabel.text="Yellow" value="#ffff00"/>
    <UITableViewCell textLabel.text="Green" value="#00ff00"/>
    <UITableViewCell textLabel.text="Blue" value="#0000ff"/>
    <UITableViewCell textLabel.text="Purple" value="#ff00ff"/>

    <?sectionBreak?>

    <UITableViewCell id="selectedColorCell" textLabel.text="Selected Color"/>
</LMTableView>

The relevant controller code is as follows:

override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    var cell = tableView.cellForRowAtIndexPath(indexPath)
    var value = cell?.value as! String

    selectedColorCell.backgroundColor = LMViewBuilder.colorValue(value)
}

The resulting output:

These new selection management features of LMTableView make it much easier to handle some common usage scenarios in iOS application design.