Can I change colour/image UISearchBar clear button?

Question

I want to change clear button color to white. I have tried many ways but no luck.:( I also refer the following link. But it does not work for me.

Please find below code which I have tried. I am working on latest ios 11. appreciate any help.

class SearchBar: UISearchBar {

    override init(frame: CGRect) {
        super.init(frame: frame)

        sharedInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        sharedInit()
    }

    override func awakeFromNib() {
        super.awakeFromNib()
        sharedInit()
    }

    private func sharedInit() {
        self.placeholder = "Search"
        self.setTextColor(color: .white)
        self.setTextFieldColor(color: UIColor.hexString("549C64"))
        self.setPlaceholderTextColor(color: .white)
        self.setSearchImageColor(color: .white)
        self.setTextFieldClearButtonColor(color: .white)

        if let textfield = self.value(forKey: "searchField") as? UITextField {
            if let backgroundview = textfield.subviews.first {
                backgroundview.layer.cornerRadius = 18.0;
                backgroundview.clipsToBounds = true;
            }
            //textfield.frame = CGRect(x: self.frame.origin.x, y: self.frame.origin.y, width: self.frame.size.width, height: 10.0)
        }


        //NO LUCK FOR HEIGHT
        for subView in self.subviews  {
            for subsubView in subView.subviews  {
                if let textField = subsubView as? UITextField {
                    for subsubView in textField.subviews  {
                        if let btn = subsubView as? UIButton {
                            print(btn)
                        }
                    }

                }else  if let btn = subsubView as? UIButton {
                    print(btn)
                }
            }
            if let btn = subView as? UIButton {
                print(btn)
            }
        }

    }
}

extension UISearchBar {

    private func getViewElement<T>(type: T.Type) -> T? {
        let svs = subviews.flatMap { $0.subviews }
        guard let element = (svs.filter { $0 is T }).first as? T else { return nil }
        return element
    }

    func getSearchBarTextField() -> UITextField? {
        return getViewElement(type: UITextField.self)
    }

    func getSearchBarButton() -> UIButton? {
        return getViewElement(type: UIButton.self)
    }

    func setTextColor(color: UIColor) {
        if let textField = getSearchBarTextField() {
            textField.textColor = color
        }
    }

    func setTextFieldColor(color: UIColor) {
        if let textField = getViewElement(type: UITextField.self) {
            switch searchBarStyle {
            case .minimal:
                textField.layer.backgroundColor = color.cgColor
                textField.layer.cornerRadius = 18.0
                if let backgroundview = textField.subviews.first {
                    backgroundview.layer.cornerRadius = 18.0;
                    backgroundview.clipsToBounds = true;
                }
            case .prominent, .default:
                textField.backgroundColor = color
            }
        }
    }

    func setPlaceholderTextColor(color: UIColor) {
        if let textField = getSearchBarTextField() {
            textField.attributedPlaceholder = NSAttributedString(string: self.placeholder != nil ? self.placeholder! : "", attributes: [NSAttributedStringKey.foregroundColor: color])
        }
    }

    func setTextFieldClearButtonColor(color: UIColor) {
        if let textField = getSearchBarTextField() {
            let button = textField.value(forKey: "_clearButton") as! UIButton
            if let image = button.imageView?.image {
                button.setImage(image.transform(withNewColor: color), for: .normal)
            }else{
                //button.setImage(#imageLiteral(resourceName: "icon-hotel"), for: .normal)
            }
        }
        if let btn = getSearchBarButton() {
            let button = btn.value(forKey: "_clearButton") as! UIButton
            if let image = button.imageView?.image {
                button.setImage(image.transform(withNewColor: color), for: .normal)
            }else{
                //button.setImage(#imageLiteral(resourceName: "icon-hotel"), for: .normal)
            }
        }

    }

    func setSearchImageColor(color: UIColor) {
        if let imageView = getSearchBarTextField()?.leftView as? UIImageView {
            imageView.image = imageView.image?.transform(withNewColor: color)
        }
    }
}

extension UIImage {

    func transform(withNewColor color: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(size, false, scale)

        let context = UIGraphicsGetCurrentContext()!
        context.translateBy(x: 0, y: size.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.setBlendMode(.normal)

        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        context.clip(to: rect, mask: cgImage!)

        color.setFill()
        context.fill(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return newImage
    }
}

Answer 1

You can use your custom icon and it works in iOS 11,

code snippet:

searchBar.setImage(UIImage(named: "ic_clear"), for: .clear, state: .normal)

Answer 2

I have found the answer please find below code for the same

func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {

        if let searchTextField = searchBar.value(forKey: "searchField") as? UITextField , let clearButton = searchTextField.value(forKey: "_clearButton")as? UIButton {

            if let img3 = clearButton.image(for: .highlighted) {
                clearButton.isHidden = false
                let tintedClearImage = img3.imageWithColor(color1: UIColor.white)
                clearButton.setImage(tintedClearImage, for: .normal)
                clearButton.setImage(tintedClearImage, for: .highlighted)
            }else{
               clearButton.isHidden = true
            }               
        }            
    }

Add following extension for Image color change in your project.

extension UIImage {
    func imageWithColor(color1: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        color1.setFill()

        let context = UIGraphicsGetCurrentContext()
        context?.translateBy(x: 0, y: self.size.height)
        context?.scaleBy(x: 1.0, y: -1.0)
        context?.setBlendMode(CGBlendMode.normal)

        let rect = CGRect(origin: .zero, size: CGSize(width: self.size.width, height: self.size.height))
        context?.clip(to: rect, mask: self.cgImage!)
        context?.fill(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage!
    }
}