Swift - How to change the color of an accessoryType (disclosureIndicator)?

Viewed 11489

I have question about the accessoryType of cells. I am using a cell with an disclosureIndicator as accessoryType and I want to change it's color but I can't. Does anyone know if this is a bug or if Apple forces me to use the grey color? Actually I can change the colors of other accessoryType.

My code looks like this:

let cell = tableView.dequeueReusableCell(withIdentifier: "identifier", for: indexPath) as! customCell
cell.tintColor = UIColor.red
cell.accessoryType = .disclosureIndicator

And my arrow is still grey. But if I use a checkmark accessoryType it becomes red.

Is there any way to fix this or do I have to use a colored image?

7 Answers

Use SF Symbol

let image = UIImage(systemName: "chevron.right")
let accessory  = UIImageView(frame:CGRect(x:0, y:0, width:(image?.size.width)!, height:(image?.size.height)!))
accessory.image = image

// set the color here
accessory.tintColor = UIColor.white
cell.accessoryView = accessory

Updated for Swift 4.2 with images attached:

    cell.accessoryType = .disclosureIndicator
    cell.tintColor = .black
    let image = UIImage(named:"disclosureArrow")?.withRenderingMode(.alwaysTemplate)
    if let width = image?.size.width, let height = image?.size.height {
        let disclosureImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
        disclosureImageView.image = image
        cell.accessoryView = disclosureImageView
    }

Images you can use:

1x2x3x

What it could look like:

example

Swift 5. Extension style ;)

extension UITableViewCell {
    func setupDisclosureIndicator() {
        accessoryType = .disclosureIndicator
        let imgView = UIImageView(frame: CGRect(x: 0, y: 0, width: 7, height: 12))
        imgView.contentMode = .scaleAspectFit
        imgView.image = UIImage(named: "your_icon_name")
        accessoryView = imgView
    }
}

Swift 5 & iOS 15 & Xcode 13

Here is an extension which uses SF Symbols, so you have a chevron like the default disclosure indicator one:

extension UITableViewCell {
    func addCustomDisclosureIndicator(with color: UIColor) {
        let button = UIButton(frame: CGRect(x: 0, y: 0, width: 10, height: 15))
        let symbolConfig = UIImage.SymbolConfiguration(pointSize: 15, weight: .regular, scale: .large)
        let symbolImage = UIImage(systemName: "chevron.right",
                                  withConfiguration: symbolConfig)
        button.setImage(symbolImage?.withTintColor(.white, renderingMode: .alwaysOriginal), for: .normal)
        button.tintColor = color
        self.accessoryView = button
    }
}

You can use it like this:

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    cell.addCustomDisclosureIndicator(with: .white) // Here your own color
    return cell
}

Swift 5 & iOS 11-15

A combination of some answers

extension UITableViewCell {
    func addCustomDisclosureIndicator(with color: UIColor) {
        accessoryType = .disclosureIndicator
        let disclosureImage = UIImage(named: "arrow_right")?.withRenderingMode(.alwaysTemplate)
        let imageWidth = (disclosureImage?.size.width) ?? 7
        let imageHeight = (disclosureImage?.size.height) ?? 12
        let accessoryImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: imageWidth, height: imageHeight))
        accessoryImageView.contentMode = .scaleAspectFit
        accessoryImageView.image = disclosureImage
        accessoryImageView.tintColor = color
        accessoryView = accessoryImageView
    }
}
Related