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 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 value property to the UITableViewCell class to allow an application to associate an optional value with a cell, similar to the "value" attribute of an <option> tag in an HTML <select> element. It also adds a boolean checked property to UITableViewCell so the application can easily manage the 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" value="S"/>
    <UITableViewCell textLabel.text="Medium" value="M"/>
    <UITableViewCell textLabel.text="Large" value="L" checked="true"/>
    <UITableViewCell textLabel.text="Extra-Large" value="XL"/>

This markup produces output similar to the following:

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

let tableView = LMTableView.grouped()

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

// Small
let smallCell = UITableViewCell()
smallCell.textLabel!.text = "Small"
smallCell.value = "S"

tableView.insert(smallCell, forRowAt: IndexPath(row: 0, section: 0))

// Medium
let mediumCell = UITableViewCell()
mediumCell.textLabel!.text = "Medium"
mediumCell.value = "M"

tableView.insert(mediumCell, forRowAt: IndexPath(row: 1, section: 0))

// Large
let largeCell = UITableViewCell()
largeCell.textLabel!.text = "Large"
largeCell.value = "L"

largeCell.checked = true

tableView.insert(largeCell, forRowAt: IndexPath(row: 2, section: 0))

// Extra-large
let extraLargeCell = UITableViewCell()
extraLargeCell.textLabel!.text = "Extra-Large"
extraLargeCell.value = "XL"

tableView.insert(extraLargeCell, forRowAt: IndexPath(row: 3, section: 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"/>

This markup produces output similar to the following:

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

The complete source code for these examples can be found here:


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s