iOS 13 Changes to UISearchBar tint's, can't achieve the same outcome

user_4276974 0
Viewed 2243

I've been experimenting all day and trying to figure out just how to get my UISearchBar to appear the same in iOS13 as it appears in iOS12/11

So the way the search bar is added is simply a new UISearchController.

            var searchController = new UISearchController(searchResultsController: null);
            searchController.SearchBar.Placeholder = "Search";
            searchController.SearchResultsUpdater = this;
            searchController.HidesNavigationBarDuringPresentation = false;
            searchController.DimsBackgroundDuringPresentation = false;

            NavigationItem.SearchController = searchController;
            NavigationItem.HidesSearchBarWhenScrolling = false;

The results on iOS 11/12:

iOS11/iOS12

The results on iOS 13:

iOS13

On iOS 13 I am using the new UINavigationBarAppearance code like this:

                var appearance = new UINavigationBarAppearance();
                appearance.ConfigureWithOpaqueBackground();
                appearance.BackgroundColor = ColorPalette.TintColor;
                appearance.TitleTextAttributes = new UIStringAttributes { ForegroundColor = UIColor.White };

                NavigationItem.StandardAppearance = appearance;

On iOS 11/12 I am using legacy way to achieve it:

                NavigationController.NavigationBar.BarStyle = UIBarStyle.Black;
                NavigationController.NavigationBar.TintColor = UIColor.White;
                NavigationController.NavigationBar.BarTintColor = ColorPalette.TintColor;
                NavigationController.NavigationBar.Translucent = false;

I've tried a number of things, but can't seem to get the UISearchBar to tint by itself how iOS11/12 achieves it.

I know that the new UISearchBar now has access to the UITextField and I can configure the background color's etc.

ios13 xamarin.ios uisearchbar uinavigationbar
5 Answers
searchBar.setSearchFieldBackgroundImage(UIImage(), for: .normal)

The code above has a side effect which removes corner radius of the text field.

Extension

extension UISearchBar {
  /// This solves iOS 13 issue which is a light gray overay covers the textField.
  /// - Parameter color: A color for searchField
  func setSearchFieldBackgroundColor(_ color: UIColor) {
    searchTextField.backgroundColor = color
    setSearchFieldBackgroundImage(UIImage(), for: .normal)
    // Make up the default cornerRadius changed by `setSearchFieldBackgroundImage(_:for:)`
    searchTextField.layer.cornerRadius = 10
    searchTextField.clipsToBounds = true
  }
}
user_32830390

There were several properties added in iOS 13, so you need to use them with the help of a conditional. For changing the background color, you have to use the BackgroundColor property of the SearchBar, like this

searchController.SearchBar.BackgroundColor = UIColor.Red;
user_111040680

Use a custom renderer and override the OnElementChanged method this way

protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
{
  base.OnElementChanged(e);
  if (Control != null)
  {
    if(UIDevice.CurrentDevice.CheckSystemVersion(13,0))
      Control.SearchTextField.BackgroundColor = Element.BackgroundColor.ToUIColor();
  }
}

later on, you don't have to do anything else and worked for me on ios 12 and ios 13+

user_24480530

On iOS 13, you have access to the internal UISearchTextField through the SearchTextField property, you can set it's background directly (in my case, I need the background to be white). Be sure to check the iOS version to avoid exceptions.

if(UIDevice.CurrentDevice.CheckSystemVersion(13,0))
{
    searchController.SearchBar.SearchTextField.BackgroundColor = UIColor.White;
}
user_111853430

You can achieve desired result by adding couple of lines.

searchBar.barTintColor = UIColor.red
searchBar.searchTextField.backgroundColor = UIColor.white

Before you try this code please link IB Outlets for searchBar

@IBOutlet weak var searchBar: UISearchBar!

user_145595460
Related