Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
578 views
in Technique[技术] by (71.8m points)

swift - iOS 11 UISearchBar in UINavigationBar

I want to place a search bar in the new navigation bar with the new iOS 11 large titles. However, the color of the search bar is automatically applied by iOS and I can't change it.

if #available(iOS 11.0, *) {
    let sc = UISearchController(searchResultsController: nil)
    navigationItem.searchController = sc
    navigationItem.hidesSearchBarWhenScrolling = false
}

The search bar get's a deep blue background, but I just want to change it to white.

enter image description here

Setting the background color results in this:

navigationItem.searchController?.searchBar.backgroundColor = UIColor.white

enter image description here

I have tried also setScopeBarButtonBackgroundImage and setBackgroundImage on the search bar but everything looks totally weird.

Also when I trigger the search by tapping on the search bar, it switches to a mode with the cancel button on the right side. ("Abbrechen" in German)

enter image description here

And the "Abbrechen" text color also can't be changed. (need it also white)

Any help is appreciated.

Edit: As requested, here the code for the navigation bar styling:

self.navigationBar.tintColor = UIColor.myWhite
self.navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor : UIColor.myWhite, NSAttributedStringKey.font: UIFont.myNavigationBarTitle()]
self.navigationBar.barTintColor = UIColor.myTint

if #available(iOS 11.0, *) {
    self.navigationBar.prefersLargeTitles = true
    self.navigationBar.largeTitleTextAttributes = [NSAttributedStringKey.foregroundColor : UIColor.myWhite, NSAttributedStringKey.font: UIFont.myNavigationBarLargeTitle()]
}

Current outcome: I have used Krunals idea to set the color of the search bar background but then the rounded corners are lost. After re-setting the rounded corners the animation of the search bar seems to be broken.

enter image description here

So still no satisfactory solution. Seems that the search bar when embedded into the navigation bar in iOS 11 is not possible to customize. Meanwhile it would be enough for me to just change the color of the placeholder text, but even this seems not to be possible. (I have tried multiple approaches from StackOverflow - doesn't work)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Now it's what you want...

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 = 10;
                    backgroundview.clipsToBounds = true;

                }
            }

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

}

Result:

enter image description here

enter image description here


With Rounded corner:
Animation with rounded corner is also working fine.

enter image description here


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...