将UISearchBar取消按钮更改为图标

Question

I want to change the UISearchBar 's Cancel button to one that only has an image, and no text. Here's where I got to so far from original behaviour

to this

A step in the right direction, but the problem is the button is too wide. When I debug the view, I can see that it has button label insets of 11 points on left and right. Does anyone know how to make the button fit the content size? The image is square.

Here's my code for customising the button:

UIBarButtonItem *barButtonAppearanceInSearchBar;

if (IOS9) {
    barButtonAppearanceInSearchBar = [UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]];
} else {
    barButtonAppearanceInSearchBar = [UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil];
}

barButtonAppearanceInSearchBar.image = [UIImage imageNamed:@"Close"];
barButtonAppearanceInSearchBar.title = nil;

Another weird issue is that when I dismiss the search bar and activate it again, the button image turns dark (it's still there, I can see it when debugging the views), so it looks like this

Any idea how to keep the icon white? I tried this method below, but without results:

- (void)willPresentSearchController:(UISearchController *)searchController {

    searchController.searchBar.tintColor = [UIColor whiteColor];
}

Answer 1

Use image rendering and tint color.

barButtonAppearanceInSearchBar.image = [[UIImage imageNamed:@"Close"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
barButtonAppearanceInSearchBar.tintColor = [UIColor whiteColor];
barButtonAppearanceInSearchBar.title = nil;

Answer 2

Here's the Swift 4.1 Version of @jamesBlake 's answer:

 func setUpSearchBar() {

    let barButtonAppearanceInSearchBar: UIBarButtonItem?
    barButtonAppearanceInSearchBar = UIBarButtonItem.appearance(whenContainedInInstancesOf: [UISearchBar.self])
    barButtonAppearanceInSearchBar?.image = UIImage(named: "Home.png")?.withRenderingMode(.alwaysTemplate)
    barButtonAppearanceInSearchBar?.tintColor = UIColor.white
    barButtonAppearanceInSearchBar?.title = nil
}