Customize search bar

Question

I am designing a search bar. I need the search bar to look like one in the image. Tried few ways but no changes. Help much appreciated.

Answer 1

if let textfield = searchBar.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 = 14;
                    backgroundview.clipsToBounds = true;
                }
            }

Answer 2

You can use image to change UISearchBar appearance-

[[UISearchBar appearance] setBackgroundColor:[UIColor clearColor]];   
[[UISearchBar appearance] setBackgroundImage:[UIImage imageNamed:@"searchBG.png"]];
[[UISearchBar appearance] setSearchFieldBackgroundImage:[UIImage imageNamed:@"search.png"] forState:UIControlStateNormal];

Answer 3

You can use some custom solutions (it's better for customizing) For example SSSearchBar or try find some similar

Answer 4

self.searchBar is an IBOutlet. You can also create it dynamically.

self.searchBar.layer.borderWidth = 2.0;
self.searchBar.layer.borderColor = [UIColor brownColor].CGColor;
self.searchBar.layer.cornerRadius = 15.0;
self.searchBar.barTintColor = [UIColor colorWithRed:255/255.0 green:246/255.0 blue:241/255.0 alpha:1.0];
self.searchBar.backgroundColor = [UIColor clearColor];

UITextField *textField = [self.searchBar valueForKey:@"_searchField"];
textField.textColor = [UIColor brownColor];
textField.placeholder = @"Search";
textField.leftViewMode = UITextFieldViewModeNever; //hiding left view
textField.backgroundColor = [UIColor colorWithRed:255/255.0 green:246/255.0 blue:241/255.0 alpha:1.0];
textField.font = [UIFont systemFontOfSize:18.0];
[textField setValue:[UIColor brownColor] forKeyPath:@"_placeholderLabel.textColor"];

UIImageView *imgview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 20, 30)];
imgview.image = [UIImage imageNamed:@"searchIcon.png"]; //you need to set search icon for textfield's righ view

textField.rightView = imgview;
textField.rightViewMode = UITextFieldViewModeAlways;

Output :

Answer 5

This is my search bar

And I used the following code to make it, search bar style is default

let searchIcon = Asset.icSearch.image
searchBar.setImage(searchIcon, for: .search, state: .normal)

let clearIcon = Asset.icDelete.image
searchBar.setImage(clearIcon, for: .clear, state: .normal)

if let textField = searchBar.getTextField() {
    textField.font = UIFont.systemFont(ofSize: 16)
    textField.backgroundColor = .white
}

searchBar.backgroundImage = UIImage()
searchBar.layer.borderColor = Asset.highlight.color.cgColor
searchBar.layer.borderWidth = 1
searchBar.layer.cornerRadius = 5

In iOS 13, you can use "searchTextField" to get TextField, but you have to write a little code in iOS 12

extension UISearchBar {

    func getTextField() -> UITextField? {
        if #available(iOS 13.0, *) {
            return self.searchTextField
        } else {
            // Fallback on earlier versions
            let textField = subviews.first(where: { $0 is UITextField }) as? UITextField
            return textField
        }
    }
}