CODEWITHSUNDEEP
iphoneobjective-ciosuitableview
Nicu Surdu
Nicu Surdu

Reputation: 8301

Put checkmark in the left side of UITableViewCell

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 ?

Upvotes: 30

Views: 29131

Answers (6)

Azam
Azam

Reputation: 797

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

Upvotes: 1

D. Rothschild
D. Rothschild

Reputation: 719

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.

Upvotes: -1

Eddie G.
Eddie G.

Reputation: 2344

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

Upvotes: 127

Sylvain G.
Sylvain G.

Reputation: 508

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

Upvotes: -3

JOM
JOM

Reputation: 8207

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

Upvotes: 6

vtechig
vtechig

Reputation: 177

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

Upvotes: -2

Related Questions