Wrong placement of search text field inside search bar on iOS 11

Question

I am using UISearchController as part of navigation bar using the new APIs introduced in iOS 11. I am using it in the following manner in my ViewController's viewDidLoad

- (void)viewDidLoad {  
    [super viewDidLoad];  
    [_table setDataSource:self];  
    [_table setDelegate:self];  
    searchController = [[UISearchController alloc] initWithSearchResultsController:nil];  
    [self.navigationItem setSearchController:searchController];  
    [self.navigationItem setHidesSearchBarWhenScrolling:NO];  
    [searchController.searchBar setBackgroundColor:[UIColor greenColor]];  
}

However, the search text field is rendered at the wrong position inside the search bar. Look at the following screenshot.

https://i.stack.imgur.com/rw7gR.jpg

I inspected the view hierarchy and found that UISearchBarTextField object (which is not accessible directly to devs) in the search bar has a frame.y value of 1 which is probably causing this issue. I have tested this on iOS 11 beta 10 and iOS 11 GM.

Is this a known issue? Is there any fix for this? Or is it something I am doing wrong on my end?

Any help will be appreciated (:

Hi, check my answer below please. Hope it helps! – Adam Studenic Sep 20 '17 at 07:38 — Adam Studenic, Sep 20 '17 at 07:38

score 12 · Answer 1 · answered Sep 20 '17 at 07:37

Here's code which shows how to change the background colour of textField in searchBar on iOS 11.

Before:

After:

Obj-C: in (void)viewDidLoad use this code:

 if (@available(iOS 11, *)) {
    UITextField *textField = [self.searchController.searchBar valueForKey:@"searchField"];
    UIView *backgroundView = textField.subviews.firstObject;
    backgroundView.backgroundColor = UIColor.whiteColor;
    backgroundView.layer.cornerRadius = 10;
    backgroundView.clipsToBounds = YES;
}

Swift: in viewDidLoad() use this code:

if #available(iOS 11.0, *) {
    if let textfield = scb.value(forKey: "searchField") as? UITextField {
        textfield.textColor = UIColor.blue

        if let backgroundview = textfield.subviews.first {
            backgroundview.backgroundColor = UIColor.white
            backgroundview.layer.cornerRadius = 10;
            backgroundview.clipsToBounds = true;
        }
    }
}

I have been looking for this answer for hours. +10000 – sanch Dec 20 '17 at 20:16 — sanch, Dec 20 '17 at 20:16

score 4 · Answer 2 · answered Sep 15 '17 at 14:18

You image (exact problem) is not accessible. So can see exact problem. But from your statement, I found your problem. I tried following for iOS 11 and its working fine.

My code has a solution to your problem but it is in Swift. You need to convert it into Objective-C. It won't be hard for you to do it.

 if #available(iOS 11.0, *) {
                let sc = UISearchController(searchResultsController: nil)
                sc.delegate = self
                let scb = sc.searchBar
                scb.tintColor = UIColor.white
                scb.barTintColor = UIColor.white


                if let textfield = scb.value(forKey: "searchField") as? UITextField {
                    textfield.textColor = UIColor.blue
                    if let backgroundview = textfield.subviews.first {

                        // Background color
                        backgroundview.backgroundColor = UIColor.white

                        // Rounded corner
                        backgroundview.layer.cornerRadius = 5;
                        backgroundview.clipsToBounds = true;

                    }
                }

                if let navigationbar = self.navigationController?.navigationBar {
                    navigationbar.barTintColor = UIColor.blue
                }
                navigationItem.searchController = sc
                navigationItem.hidesSearchBarWhenScrolling = false

    }

Output:

Wrong placement of search text field inside search bar on iOS 11

2 Answers2

Linked