How to Change the Tint Color of the Clear Button on a Uitextfield

How to change the tint color of the clear button on a UITextField

Here you go!

A TintTextField.

Using no custom image, or added buttons etc.

class TintTextField: UITextField {

     var tintedClearImage: UIImage?

     required init(coder aDecoder: NSCoder) {
       super.init(coder: aDecoder)
       self.setupTintColor()
     }

     override init(frame: CGRect) {
       super.init(frame: frame)
       self.setupTintColor()
     }

     func setupTintColor() {
       self.borderStyle = UITextField.BorderStyle.roundedRect
       self.layer.cornerRadius = 8.0
       self.layer.masksToBounds = true
       self.layer.borderColor = self.tintColor.cgColor
       self.layer.borderWidth = 1.5
       self.backgroundColor = .clear
       self.textColor = self.tintColor
     }

    override func layoutSubviews() {
        super.layoutSubviews()
        self.tintClearImage()
    }

    private func tintClearImage() {
        for view in subviews {
            if view is UIButton {
                let button = view as! UIButton
                if let image = button.image(for: .highlighted) {
                    if self.tintedClearImage == nil {
                        tintedClearImage = self.tintImage(image: image, color: self.tintColor)
                    }
                    button.setImage(self.tintedClearImage, for: .normal)
                    button.setImage(self.tintedClearImage, for: .highlighted)
                }
            }
        }
    }

    private func tintImage(image: UIImage, color: UIColor) -> UIImage {
        let size = image.size

        UIGraphicsBeginImageContextWithOptions(size, false, image.scale)
        let context = UIGraphicsGetCurrentContext()
        image.draw(at: .zero, blendMode: CGBlendMode.normal, alpha: 1.0)

        context?.setFillColor(color.cgColor)
        context?.setBlendMode(CGBlendMode.sourceIn)
        context?.setAlpha(1.0)

        let rect = CGRect(x: CGPoint.zero.x, y: CGPoint.zero.y, width: image.size.width, height: image.size.height)
        UIGraphicsGetCurrentContext()?.fill(rect)
        let tintedImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return tintedImage ?? UIImage()
    }
 }

UITextField clear button color Swift

import UIKit

class CustomTextField: UITextField {

    override func layoutSubviews() {
        super.layoutSubviews()

        for view in subviews {
            if let button = view as? UIButton {
                button.setImage(button.image(for: .normal)?.withRenderingMode(.alwaysTemplate), for: .normal)
                button.tintColor = .white
            }
        }
    }
}

How can I change the color of a UITextField clearButton?

You should create your own UIButton (with image, you'll need a png of you desiderated button), instance it and put this button in the rightView of your UITextField.

CGFloat myWidth = 26.0f;
CGFloat myHeight = 30.0f;
UIButton *myButton = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, myWidth, myHeight)];
[myButton setImage:[UIImage imageNamed:@"myButtonImage"] forState:UIControlStateNormal];
[myButton setImage:[UIImage imageNamed:@"myButtonImage"] forState:UIControlStateHighlighted];

[myButton addTarget:self action:@selector(doClear:) forControlEvents:UIControlEventTouchUpInside];

myTextField.rightView = myButton;
myTextField.rightViewMode = UITextFieldViewModeUnlessEditing;

You could need to refine alignments using (these are example values):

myButton.imageEdgeInsets = UIEdgeInsetsMake(0, -10, 0, 0);

Then, you will need to implement method -(void) doClear(id)sender; that will clear your textfield.

UITextField clearButtonMode color

You'll need to create your own clear button image in this case. I would suggest taking a screenshot of the clear button and editing in photoshop.

You can take that image and create a UIButton with the image dimensions. From there you can set it as the UITextField's rightView. Like so:

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:[UIImage imageNamed:@"clear_button.png"] forState:UIControlStateNormal];
[button setFrame:CGRectMake(0.0f, 0.0f, 15.0f, 15.0f)]; // Required for iOS7
theTextField.rightView = button;
theTextField.rightViewMode = UITextFieldViewModeWhileEditing;

I typed that without syntax checking and what not so you'll want to check it out before running it. You'll also want to replace clear_button.png with whatever your image name is.

You'll also need to write your own method to clear the text field.

Customize UITextField Clear Button Color to White Color

From all your answers, I come to this conclusion,

UIButton *btnClear = [self.txtEmail valueForKey:@"_clearButton"];
UIImage *imageNormal = [btnClear imageForState:UIControlStateNormal];
UIGraphicsBeginImageContextWithOptions(imageNormal.size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();

CGRect rect = (CGRect){ CGPointZero, imageNormal.size };
CGContextSetBlendMode(context, kCGBlendModeNormal);
[imageNormal drawInRect:rect];

CGContextSetBlendMode(context, kCGBlendModeSourceIn);
[[UIColor whiteColor] setFill];
CGContextFillRect(context, rect);

UIImage *imageTinted  = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[btnClear setImage:imageTinted forState:UIControlStateNormal];

Changing the color of the icons in a UItextField inside a UISearchBar

Here is the solution:

// Text field in search bar.
let textField = searchController.searchBar.value(forKey: "searchField") as! UITextField

let glassIconView = textField.leftView as! UIImageView
glassIconView.image = glassIconView.image?.withRenderingMode(.alwaysTemplate)
glassIconView.tintColor = UIColor.white

let clearButton = textField.valueForKey("clearButton") as! UIButton
clearButton.setImage(clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate), for: .normal)
clearButton.tintColor = UIColor.white

Can I change colour/image UISearchBar clear button?

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!
    }
}

---

Related Topics