Change background of an Accessory View in a UITableViewCell

1.7k Views Asked by At

According to Apple docs UITableViewCell consists of two sections: enter image description here

I set a custom image for Accessory View:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("settingCell") as! SettingsTableViewCell
    cell.setCellColor(self.items[indexPath.row])
    let img = UIImage(named: "icon-right-arrow")!
    let imgView:UIImageView = UIImageView()
    imgView.contentMode = UIViewContentMode.ScaleAspectFill
    imgView.frame.size.width = img.size.width
    imgView.frame.size.height = img.size.height
    imgView.image = img
    imgView.image = imgView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
    imgView.tintColor = UIColor.orangeColor()
    cell.accessoryView = imgView

    return cell
}

Function which get triggered when a cell is selected:

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
    let selectedCell = tableView.cellForRowAtIndexPath(indexPath) as! SettingsTableViewCell
    selectedCell.setSelectedColor()
    let img = UIImage(named: "icon-right-arrow")!
    let imgView:UIImageView = UIImageView()
    imgView.contentMode = UIViewContentMode.Center
    imgView.frame.size.width = selectedCell.accessoryView!.frame.width
    imgView.frame.size.height = selectedCell.accessoryView!.frame.height
    imgView.backgroundColor = UIColor.orangeColor()
    imgView.image = img
    imgView.image = imgView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
    imgView.tintColor = UIColor.whiteColor()
    selectedCell.accessoryView = imgView

    selectedCell.contentView.backgroundColor = UIColor.orangeColor()

}

And for deselected cell:

func tableView(tableView: UITableView, didDeselectRowAtIndexPath indexPath: NSIndexPath) {
    let selectedCell = tableView.cellForRowAtIndexPath(indexPath) as! SettingsTableViewCell
    selectedCell.setDeSelectedColor()
    let img = UIImage(named: "icon-right-arrow")!
    let imgView:UIImageView = UIImageView()
    imgView.contentMode = UIViewContentMode.Center
    imgView.frame.size.width = selectedCell.accessoryView!.frame.width
    imgView.frame.size.height = selectedCell.accessoryView!.frame.height
    imgView.backgroundColor = UIColor.clearColor()
    imgView.image = img
    imgView.image = imgView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
    imgView.tintColor = UIColor.orangeColor()
    selectedCell.accessoryView = imgView

}

But the result is not what I want, Accessory View still has a gray background but I want it be orange:

enter image description here

1

There are 1 best solutions below

2
On BEST ANSWER

you have to set deselected cell selectionStyle to None with UITableViewCellSelectionStyle.None

func tableView(tableView: UITableView, didDeselectRowAtIndexPath indexPath: NSIndexPath) {
    let selectedCell = tableView.cellForRowAtIndexPath(indexPath) as! SettingsTableViewCell
    selectedCell.selectionStyle = UITableViewCellSelectionStyle.None
    selectedCell.setDeSelectedColor()
    let img = UIImage(named: "icon-right-arrow")!
    let imgView:UIImageView = UIImageView()
    imgView.contentMode = UIViewContentMode.Center
    imgView.frame.size.width = selectedCell.accessoryView!.frame.width
    imgView.frame.size.height = selectedCell.accessoryView!.frame.height
    imgView.backgroundColor = UIColor.clearColor()
    imgView.image = img
    imgView.image = imgView.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
    imgView.tintColor = UIColor.orangeColor()
    selectedCell.accessoryView = imgView

}