Custom UISearchBar appearance

Recently, when we try to customize the appearance of SearchBar in the process of the project, though he felt with the default appearance on the line, but the default style UI designer without the system, to be consistent with the app theme.

Custom UISearchBar appearance
, figure 1: design renderings

As you can see from the diagram above, the UISearchBar we want to do has rounded corners, border colors, cancel button colors, background transparency, and so on.

Began to think that you may have to write a custom UISearchBar control, and later studied, found that you can set the system UISearchBar properties to change, then record the experience to share with you.

First of all, let’s look at the default SearchBar style of the system, which is really different from our target style, and I’ll detail the style of our target later.

Custom UISearchBar appearance
diagram 2:UISearchBar default style

1. sets the background color

I’ll take the white background color for example. Here’s the code:

//1. set the background color / setting the background image in order to remove the black line on the self.customSearchBar.backgroundImage = [[UIImage alloc] init]; / / set the SearchBar color theme for the white self.customSearchBar.barTintColor = [UIColor whiteColor];
Custom UISearchBar appearance
, figure 3: set SearchBar, the background color is white

2. sets the border color and fillet

//2. set fillet and border color = [self.customSearchBar UITextField *searchField valueForKey:@ "searchField"]; if (searchField) {[searchField setBackgroundColor:[UIColor whiteColor]]; searchField.layer.cornerRadius = 14.0f; searchField.layer.borderColor = [UIColor colorWithRed:247/255.0 green:75/255.0 blue:31/255.0 alpha:1].CGColor; searchField.layer.borderWidth = 1; searchField.layer.masksToBounds = YES;}

There is a special place is to obtain private variables
UISearchBar searchField by KVC this code (type UITextField), set the SearchBar border color and corner actually becomes the setting of searchField border color and rounded corners, you can try to set SearchBar.layer.borderColor and cornerRadius directly, will find that this is a problem.

Custom UISearchBar appearance
, figure 4: sets the border color and fillet

Well, it’s getting closer and closer to expectations!

3. settings button (cancel button) text and text color

//3. set the button text and color [self.customSearchBar fm_setCancelButtonTitle:@ Cancel]; self.customSearchBar.tintColor = [UIColor colorWithRed:86/255.0 green:179/255.0 blue:11/255.0 alpha:1]; / / [searchField setTintColor:[UIColor blackColor]] color correction cursor; / / fm_setCancelButtonTitle is the UISearchBar I wrote a classification method - (void) fm_setCancelButtonTitle: (NSString * title) {if (IS_IOS9) {[[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:title];}else {[[UIBarButtonItem appearanceWhenContainedIn:[UISearchBar class], nil] setTitle:title];}}
Custom UISearchBar appearance
, figure 5: setting buttons, text, and colors

Of particular note is that the tintColor setting searchBar changes the cursor color of the input box and can be modified by setting the searchField of the tintColor.

4. sets the text, colors, and fonts for the input box

//4. input text color and font [self.customSearchBar fm_setTextColor:[UIColor blackColor]]; [self.customSearchBar fm_setTextFont:[UIFont systemFontOfSize:14]]; / / the following two methods is UISearchBar classification code - (void) fm_setTextColor: (UIColor * textColor) {if (IS_IOS9) {[UITextField appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]].textColor = textColor;}else {[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil] setTextColor:textColor];}} - (void (fm_setCancelButtonTitle:) NSString * title (IS_IOS9)) {if {[[UIBarButtonItem appearanceWhenContainedInInstancesOfClasses:@[[UISearchBar class]]] setTitle:title]}else {[[UIBarButtonItem appe; AranceWhenContainedIn:[UISearchBar, class], nil], setTitle:title];}
Custom UISearchBar appearance,
, Figure 6: final contrast effect diagram

5. how to set search icons

In the comments below, Jane asked me how to change the default search icon. I checked UISearchBar at API and found ways to change it.

//5. Icon [self.customSearchBar setImage:[UIImage imageNamed:@ set the search "Search_Icon forSearchBarIcon:UISearchBarIconSearch state:UIControlStateNormal]"];

In order to have a clear contrast with the system default Icon, I specifically found a green search Icon, the effect shown below:

Custom UISearchBar appearance
settings search Icon.png

Tips: can also set up other Icon (such as clear button icons), but also use the above method, specific to set what, you can go to see UISearchBarIcon this enumeration.

2016-10-20 added

6., similar to WeChat search box

Custom UISearchBar appearance
, figure 8: ask.Png

, here’s a friend of Jane asked how to implement a WeChat search box, so I’ll talk about my ideas in detail.

First of all, to tell you that UISearchBar is a combination of multiple controls into a more complex control. Look at UISearchBar using Reveal to make up as follows:

Custom UISearchBar appearance,
, graph, 9:UISearchBar, composition diagram,.Png

As you can see from the above figure, the structure of UISearch, I summed up a mind map, more clear and intuitive:

Custom UISearchBar appearance,
diagram, 10:UISearchBar, mind map,.Png

The main part of UISearchBar is UISearchBarTextField, and UISearchBarTextField contains several subView, where the UIButton refers to the clear button (which appears when typing text).

Well, the above said a pile, I mainly want to express: since UISearchBar is composed of so many child control, I’ll add a button and why?

The final solution is this: add a UIButton in the UISearchBarTextField, I will call it the voiceButton voiceButton, and then set the automatic layout and click event handler (click the button, display recording interface…), finally to monitor changes of the text, the input text, no hidden text, voiceButton, voiceButton.

All the code is as follows:

//6. to achieve a similar WeChat search box UIButton *voiceButton = [UIButton buttonWithType:UIButtonTypeCustom]; [voiceButton setImage:[UIImage imageNamed:@ Voice_button_icon forState:UIControlStateNormal] [voiceButton addTarget:self]; action:@selector (tapVoiceButton:) forControlEvents:UIControlEventTouchUpInside]; [searchField addSubview:voiceButton]; self.voiceButton = voiceButton; //Autolayout = voiceButton.translatesAutoresizingMaskIntoConstraints NO; NSDictionary *views = NSDictionaryOfVariableBindings (voiceButton); / / set the level of [searchField addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@ [voiceButton "direction constraint (21)]-|" options:NSLayoutFormatAlignAllRight NSLayoutFormatAlignAllL | EFT metrics:nil views:views]] [searchField addConstraints:[NSLayoutConstraint; / / set the height constraint constraintsWithVisualFormat:@ "V:[voiceButton (21)]" options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:views]]; / / set the vertical direction in the middle of the addConstraint:[NSLayoutConstraint constraintWithItem:voiceButton attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:searchField [searchField binding attribute:NSLayoutAttributeCenterY multiplier:1 constant:0]]; / / touch button event - (IBAction) tapVoiceButton: (ID sender) {NSLog (@ "Tap voiceButton");} / / monitoring text changes - (void) searchBar: (UISearchBar * searchBar) textDidChange: (NSString * searchText) {self.voiceButton.hidden = se ArchText.length > 0;}

Well, came to an end, the final renderings are as follows:

Custom UISearchBar appearance

Finally, the implementation of the search style under QQ is introduced

Custom UISearchBar appearance
, Figure 7: similar to the QQ search box style

Very simply, in storyboard, set searchBar’s Bar Style to Minimal, or use code settings:

Similar to the QQ search box set / / self.minimalSearchBar.searchBarStyle = UISearchBarStyleMinimal;

The full code is here.