iOS 11 customize uiSearchbar

Question

Created Dec ’17

Replies 3

Boosts 0

Views 8.3k

Participants 2

I am working on an app which displays search bar. Problem is that navigation view is black and I am trying to custom that bar a bit. This is my code:

if (@available(iOS 11.0, *)) {
    self.viewController.navigationItem.searchController = self.searchController;
    self.viewController.navigationItem.hidesSearchBarWhenScrolling = false;
    self.searchController.searchBar.tintColor = [UIColor blackColor];
    self.viewController.navigationItem.searchController.
        searchBar.backgroundColor = [UIColor lightGrayColor];
    // placeholder text
    [[UITextField appearanceWhenContainedInInstancesOfClasses:@[[self.searchController.searchBar class]]] setAttributedPlaceholder:
                [[NSAttributedString alloc] initWithString:@"Search"
                                        attributes:@{NSForegroundColorAttributeName: [UIColor grayColor]}]];
    // search text
    [[UITextField appearanceWhenContainedInInstancesOfClasses:@[[self.searchController.searchBar class]]] setDefaultTextAttributes:
                  @{NSForegroundColorAttributeName: [UIColor blackColor]}];

    // search bar background color
    UITextField *textField = [self.searchController.searchBar valueForKey:@"searchField"];
    UIView *backgroundView = textField.subviews.firstObject;
    backgroundView.backgroundColor = UIColor.whiteColor;
    backgroundView.layer.cornerRadius = 10;
    backgroundView.clipsToBounds = YES;
    [UISearchBar.self]).attributedPlaceholder = NSAttributedString(string: "placeholder", attributes: [NSAttributedStringKey.foregroundColor: UIColor.white])
} else {
    self.tableView.tableHeaderView = self.searchController.searchBar;
}

So I am trying to have search bar with gray color background white and text in black(placeholder and search text). My problem is that when I set placeholder text to use attributed string I don't see anymore neither the magnifying glass nor the empty button. How could I get them back ?

Also I see the search bar not centered.

How could I center it? I am coding this for iOS 11 device

I have tried

barTintColor

and it does not work

Thnaks and regards

Boost

Answer 1

TheCD OP

Dec ’17

I would advise against trying to manipulate the undocumented view hierarchy of UISearchBar. Instead, change the search bar style to minimal and/or change the background image:

self.searchController.searchBar.searchBarStyle = UISearchBarStyleMinimal;

[self.searchController.searchBar setBackgroundImage:[UIImage imageNamed:"Image.png"]
forBarPosition:UIBarPositionAny barMetrics: UIBarMetricsDefault];

0

Answer 2

azetti OP

Jan ’18

I have tried to create an UImage and then set it but I see no effect.

[self.searchController.searchBar setSearchBarStyle:UISearchBarStyleMinimal];
CGSize size = CGSizeMake(20.0, 20.0);
UIGraphicsBeginImageContextWithOptions(size, YES, 0);
[[UIColor whiteColor] setFill];
UIRectFill(CGRectMake(0, 0, size.width, size.height));
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self.searchController.searchBar setBackgroundImage:image forBarPosition:UIBarPositionAny barMetrics:
      UIBarMetricsDefault];

In any case with your example I cannot change font color, or search field cbackground color. Isn't it possible to do that?

0

Answer 3

TheCD OP

Jan ’18

Normally, you can use the search bar's barStyle to automatically change the font color and background color. However, it looks like the navigation item's appearance overrides the appearance of the search bar. So, there's only one more option I can think of: use a black style search bar. Make sure the navigation bar's barStyle is set to UIBarStyleBlack.

0