Put checkmark in the left side of UITableViewCell

Question

I want to make something similar to the WiFi settings page: when you tap the table cell, put a checkbox in the left side of the cell, and have a disclosure button accessory

Answer 1

In Swift you can press Command + Ctrl + Spacebar to show emoticons and special characters or you can copy this ✓ ✔️

Answer 2

Of course you can do that :) For example use UITableViewCellStyle

UITableViewCellStyleDefault,
// Simple cell with text label and optional image view
//(behavior of UITableViewCell in iPhoneOS 2.x)

...and put a custom "checkmark" image in that "optional image view".

Answer 3

The answer is YES! You don't have to create a custom cell for that or add image views. To simulate checkboxes you only have to prepend a unicode symbol for a checkbox state to the cell text.

The unicode symbols I'm using for checkboxes are \u2705 for checked and \u2B1C for unchecked (nearly the same as \U0001F533 on iOS 5). iOS renders several unicode symbols as icons.

Here are some other symbols:

@"\u2611", @"\u2B1C", @"\u2705", @"\u26AB", @"\u26AA", @"\u2714", @"\U0001F44D", @"\U0001F44E"

---

Imitating the Wi-Fi settings page (with UITableViewCellStyleValue1):

cell.textLabel.text = @"\u2001 Wi-Fi 1";
cell.detailTextLabel.text = @"\U0001F512 \u268A";

cell.textLabel.text = @"\u2001 Wi-Fi 2";
cell.detailTextLabel.text = @"\U0001F512 \u268C";

cell.textLabel.text = @"\u2713 Wi-Fi 3";
cell.detailTextLabel.text = @"\U0001F513 \u2630";

Answer 4

So here is a way to do it. Place a UIImageView on the left edge of the cell. Do not set an image so it's blank as a start.

Then, assuming you are doing a custom cell and a class for that UITableViewCell, do something like this:

import UIKit

class MyCustoTableViewCell: UITableViewCell {

    @IBOutlet weak var commandOption: UILabel!
    @IBOutlet weak var checkMarkImage: UIImageView!

    // Sets a left side checkmark on a cell when selected 
    override func setSelected(selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)
        self.checkMarkImage.image = selected ? UIImage(named: "BlueCheck") : .None
        self.commandOption.font = selected ? UIFont(name: "Avenir-Heavy", size: 22) : UIFont(name: "Avenir-Book", size: 22)

        // more check mark on the right side
        // self.accessoryType = selected ? .Checkmark : .None
    }
}

Note the bottom commented out is if you want the checkmark on the right. The super.setSelecdted method fires when a the user has tapped on the table cell. Be sure you have this implemented also:

    func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
        // do any changes needed here or leave blank if just adding check
     }
}

Finally, make sure you have @2x and @3x check mark PNGs assets in your Assets folder. Note those are called "BlueCheck" in this example but use what ever your check mark assets are called.

This approach makes sure that when a user selects a new row the check mark goes away on the current cell.

In this case I'm bolding the text that is to the right of the image view to further indicate it was the selected row.

Answer 5

No. You have to create a custom cell for that.

Answer 6

You should look at the UITableViewCell reference and Table View Guide. Use standard cell style with editingAccessoryType property set to UITableViewCellAccessoryCheckmark.