iOS let UISearchBar search icon and placeholder display to the left

System UISearchBar rendering:

Demand renderings:

Two options:

  • Find the magnifying glass icon on the UISearchBar, modify the Frame, and judge whether to change the color of the placeholder in case of any text content
  • After the Text of UISearchBar has a value, the magnifying glass will automatically move to the left. Let UISearchBar set a default Text. After clicking UISearchBar to start editing, if there is no value, set the Text to @ "" and modify the color of placeholderLabel according to the status

Implementation code:

@interface ViewController () <UISearchBarDelegate>

/** xib Search box */
@property (weak, nonatomic) IBOutlet UISearchBar *searchBar;
/** Search image (magnifier) */
@property (nonatomic, weak) UIImageView *imgV;
@implementation ViewController

- (void)viewDidAppear:(BOOL)animated
    [super viewDidAppear:animated];
    // Find magnifier image ImageView
    for (UIImageView *imgV in _searchBar.subviews.firstObject.subviews.lastObject.subviews) {
        if ([imgV isMemberOfClass:[UIImageView class]]) {
            imgV.frame = CGRectMake(8, 7.5, 13, 13);
            _imgV = imgV;
            [_imgV addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
    // Set up searchBar text color
    [self updateSeachBar];
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context
    // Modify magnifier Frame Front, Remove observer
    [_imgV removeObserver:self forKeyPath:@"frame"];
    // modify Frame
    _imgV.frame = CGRectMake(8, 7.5, 13, 13);
    // Add observer again
    [_imgV addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
#pragma mark -UISearchBarDelegate Agent method
- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar
    if ([searchBar.text isEqualToString:searchBar.placeholder]) {
        // No text time, display placeholder
        searchBar.text = @"";
    // Get to UISearchBar in UITextField
    UITextField *searchField = [searchBar valueForKey:@"_searchField"];
    // Start editing to modify textColor colour
    searchField.textColor = [UIColor blackColor];
    searchField.clearButtonMode = UITextFieldViewModeWhileEditing;
- (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar
    [self updateSeachBar];
#pragma mark -Set according to text content searchBar Color and clearButtonMode
- (void)updateSeachBar
    if ([_searchBar.text isEqualToString:@""]) {// When the text content is empty
        UITextField *searchField = [_searchBar valueForKey:@"_searchField"];
        // modify textColor by placeholderColor
        searchField.textColor = [searchField valueForKeyPath:@"_placeholderLabel.textColor"];
        searchField.text = searchField.placeholder;
        // Remove right side clearButton
        searchField.clearButtonMode = UITextFieldViewModeNever;
- (void)dealloc
    // Remove observer
    [_searchBar removeObserver:self forKeyPath:@"frame"];


Tags: iOS

Posted on Wed, 18 Mar 2020 11:19:45 -0400 by pp4sale