30

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 view on the right to show more details.

My question: is there a way to put the checkmark in the left side of a UITableViewCell without building a custom UITableViewCell ?

Nicu Surdu
  • 8,172
  • 9
  • 68
  • 108

6 Answers6

127

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:

enter image description here

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

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

enter image description here

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";
Community
  • 1
  • 1
Eddie G.
  • 2,344
  • 2
  • 17
  • 7
  • 2
    By the way, in Swift, you need to use braces for Unicode characters: "\u{2713}" – Frederic Adda Jul 24 '15 at 12:11
  • What about the selection change and I have datasource? Do I need to read datasource everytime for selection to append and DEappend checkmark ? I can't use detailtextlabel because that one I'm using to show another info.. – Asadullah Ali Aug 08 '15 at 03:43
  • This is a great solution. The \u{2713} character seems to be an exact match to the checkmark used in the Settings app. In particular, I put this in a UILabel and used font UIFont.boldSystemFont(ofSize: 22) and as far as I can tell they are identical! – Christian Gossain Dec 12 '20 at 05:22
6

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".

JOM
  • 8,139
  • 6
  • 78
  • 111
1

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

Azam
  • 797
  • 2
  • 8
  • 23
-1

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.

D. Rothschild
  • 659
  • 9
  • 14
-2

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

vtechig
  • 177
  • 2
-3

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

Sylvain G.
  • 508
  • 2
  • 9