How can I change the color of a UITextField clearButton?

Question

I would like to change the color of the clearButton that appaers when you are writting on a UItextField. Any suggestion? I am not an advanced interface developer and I have no idea of how to do it.

Answer 1

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.

Answer 2

Swift 4

I used Giorgio's answer and this is what I went with :

let height = textField.bounds.height / 3
let width = height + 10
let rect = CGRect(x: 0, y: 0, width: width, height: height)

let myButton = UIButton(frame: rect)

myButton.setImage(UIImage(named: "clear button white"), for: .normal)

textField.rightView = myButton
textField.rightViewMode = .always

myButton.imageEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)

The normal one : enter image description here

This one : enter image description here

Answer 3

I will recommend use custom image and ignore to change native UITextField's clearButton because Apple may change subviews and your app will crash when apple update iOS version.

I wrote a category can add Image or custom button easily.

UITextField+ClearButton.h

#import <UIKit/UIKit.h>

@interface UITextField (ClearButton)

/**
 * @brief Initialize Custon clear button
 */
-(void)initialCustomClearButton;

-(void)setRightMarginDistance:(CGFloat )tempRightMargin;

// you can only use this methods
-(void)setClearButtonImage:(UIImage *)tempClearButtonImage;

-(void)setClearButton:(UIButton *)tempClearButton;

#pragma mark -
-(void)editTextField:(id)sender;

@end

UITextField+ClearButton.m

#import "UITextField+ClearButton.h"

#include <objc/runtime.h>

#pragma makr - Dynamic Property
////////////////////////////////
#define Dynamic_Property( ObjectType , property , setProperty )\
Dynamic_Property_Getter( ObjectType , property)\
Dynamic_Property_Setter( ObjectType , property , setProperty , OBJC_ASSOCIATION_RETAIN_NONATOMIC )
//////// Getter ////////
#define Dynamic_Property_Getter( ObjectType , property )\
-(ObjectType)property\
{\
    return objc_getAssociatedObject( self, @selector(property) );\
}
//////// Setter ////////
#define Dynamic_Property_Setter( ObjectType , property , setProperty , associationFlag) \
-(void)setProperty(ObjectType)property\
{\
    objc_setAssociatedObject(self, @selector(property), property, associationFlag);\
}
////////////////////////////////

static CGFloat const kXSGTextFieldClearButtonRightMargin = 6.0f;

@implementation UITextField (ClearButton)
Dynamic_Property(UIButton*,clearBtn,setClearBtn:)
Dynamic_Property(UIImage*, clearButtonImg, setClearButtonImg:)
Dynamic_Property(UIImageView*, clearButtonImageView, setClearButtonImageView:)
Dynamic_Property(NSNumber*, isShow, setIsShow:)
Dynamic_Property(NSNumber*, customClearButtonMode, setCustomClearButtonMode:)
Dynamic_Property(NSNumber*, rightMargin , setRightMargin:)

-(void)initialCustomClearButton{
    self.isShow = @NO;// 目前沒用到
    self.clearButtonImageView = nil;
    // 設定 Clear Button Mode
    self.customClearButtonMode = @(self.clearButtonMode);
    self.rightMargin = @(kXSGTextFieldClearButtonRightMargin);
    self.clearButtonMode = UITextFieldViewModeNever;
    [self resetClearButton];
    [self addTarget:self action:@selector(editTextField:) forControlEvents:(UIControlEventEditingChanged)];
}

-(void)setRightMarginDistance:(CGFloat )tempRightMargin{
    if( tempRightMargin < 0 ){
        NSLog(@"Can't set right margin negative number !!");
    }
    else{
        self.rightMargin = @(tempRightMargin);
        [self resetClearButton];
    }
}

-(void)setClearButtonImage:(UIImage *)tempClearButtonImage{
    if( tempClearButtonImage == nil ){
        NSLog(@"Can't set Clear Button Image to nil !!");
    }
    else{
        self.clearButtonImg = tempClearButtonImage;
        if( self.clearButtonImageView == nil ){
            self.clearButtonImageView = [[UIImageView alloc] initWithImage:self.clearButtonImg];

        }
        else{
            [self.clearButtonImageView setImage:self.clearButtonImg];
        }
        // 調整位置
        [self resetImagePosition];
        [self.clearBtn addSubview:self.clearButtonImageView];
        [self editTextField:self];
    }
}

-(void)setClearButton:(UIButton *)tempClearButton{
    if( self.clearBtn != nil ){
        [self.clearBtn removeTarget:self action:@selector(pressedClearBtn:) forControlEvents:(UIControlEventTouchUpInside)];
    }
    self.clearBtn = tempClearButton;
    [self.clearBtn addSubview:self.clearButtonImageView];

    // 設定 frame 調整位置
    [self resetClearButton];
    [self resetImagePosition];
}

#pragma mark - Private
-(BOOL)checkTextField{
    BOOL isOK = YES;
    if( self.text == nil || [self.text isEqualToString:@""] ){
        isOK = NO;
    }
    return isOK;
}

-(void)resetClearButton{
    if( self.clearBtn == nil ){
        self.clearBtn = [[UIButton alloc] initWithFrame:CGRectMake(self.frame.size.width - self.frame.size.height - [self.rightMargin floatValue],
                                                                   0,
                                                                   self.frame.size.height,
                                                                   self.frame.size.height)];
    }
    else{
        [self.clearBtn setFrame:CGRectMake(self.frame.size.width - self.clearBtn.frame.size.width - [self.rightMargin floatValue],
                                           0,
                                           self.clearBtn.frame.size.width,
                                           self.clearBtn.frame.size.height)];
        [self.clearBtn removeTarget:self action:@selector(pressedClearBtn:) forControlEvents:(UIControlEventTouchUpInside)];
    }
    [self.clearBtn addTarget:self action:@selector(pressedClearBtn:) forControlEvents:(UIControlEventTouchUpInside)];
    self.rightView = self.clearBtn;
    self.rightViewMode = UITextFieldViewModeAlways;
    [self editTextField:self];
}

-(void)resetImagePosition{
    // 調整位置
    [self.clearButtonImageView setFrame:CGRectMake((self.clearBtn.frame.size.width - self.clearButtonImg.size.width)*0.5,
                                                   (self.clearBtn.frame.size.height - self.clearButtonImg.size.height)*0.5,
                                                   self.clearButtonImg.size.width,
                                                   self.clearButtonImg.size.height)];
}

-(void)pressedClearBtn:(id)sender{
    self.text = @"";
    // 隱藏圖片、 disable button
    [self editTextField:self];
}

#pragma mark - 加入監聽
-(void)editTextField:(id)sender{
    if( sender == self ){
        if( [self checkTextField] ){
            // 顯示圖片、 enable button
            [self.clearBtn setEnabled:YES];
            [self.clearBtn setHidden:NO];
            [self.clearButtonImageView setHidden:NO];
            self.isShow = @YES;
        }
        else{
            // 隱藏圖片、 disable button
            [self.clearBtn setEnabled:NO];
            [self.clearBtn setHidden:YES];
            [self.clearButtonImageView setHidden:YES];
            self.isShow = @NO;
        }
    }
}

@end

How to use

UITextField *_textField = [[UITextField alloc] initWithFrame:CGRectMake(0, 0, 320 , 40)];

[_textField initialCustomClearButton];
// [UIImage imageNamed:@"clear"] is an image of your clear button.
[_textField setClearButtonImage:[UIImage imageNamed:@"clear"]];

and Done!

PS: detail is here: UITextField+ClearButton.h and UITextField+ClearButton.m