Add search bar under the navigation title

Question

Here is my code:

[self.navigationController.navigationBar setFrame:CGRectMake(0, 0, 500, 800)];
self.navigationItem.title = @"locations";
[self.navigationController.navigationBar setFrame:CGRectMake(0, 0, self.view.frame.size.width,110.0)];
UISearchBar *searchBar1 = [[UISearchBar alloc]initWithFrame:CGRectMake(10, 40, 240, 34)];
[self.navigationController.view addSubview:searchBar1];
elf.navigationItem.title = @"locations";
//self.navigationItem.titleView = searchController.searchBar;
self.navigationController.navigationBar.barTintColor = `Color grayColor];
self.definesPresentationContext = YES;

Possible duplicate of [how to add search bar under the navigation title](http://stackoverflow.com/questions/39994506/how-to-add-search-bar-under-the-navigation-title) — Shankar BS, Oct 12 '16 at 12:42

Shankar BS · Accepted Answer · 2016-10-13T08:09:14.153

if u want perfectly look like your images that u are posted in the previous question, then u can do like below,

[self.navigationController.navigationBar setTranslucent:NO];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar setBarStyle:UIBarStyleBlack];
[self.navigationController.navigationBar setBarTintColor:[UIColor redColor]];
[self.navigationController.navigationBar setShadowImage:[UIImage new]];

UISearchBar *searchBar = [[UISearchBar alloc] init];
searchBar.placeholder = @"search";
self.title = @"Locations";
searchBar.frame = CGRectMake(0, 0, self.navigationController.view.bounds.size.width, 64);
searchBar.barStyle = UIBarStyleDefault;
[searchBar setTranslucent:NO];
searchBar.barTintColor = [UIColor redColor];
searchBar.backgroundImage = [UIImage new];
[self.view addSubview:searchBar];

and the navigation bar looks like below and change the search bar to your requirement

swift code

    navigationController?.navigationBar.isTranslucent = false
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.barStyle = .black
    navigationController?.navigationBar.barTintColor = UIColor.red
    navigationController?.navigationBar.shadowImage = UIImage()
    title = "Location";


    let searchBar = UISearchBar()
    searchBar.placeholder = "Search"
    searchBar.frame = CGRect(x: 0, y: 0, width: (navigationController?.view.bounds.size.width)!, height: 64)
    searchBar.barStyle = .default
    searchBar.isTranslucent = false
    searchBar.barTintColor = UIColor.red
    searchBar.backgroundImage = UIImage()
    view.addSubview(searchBar)

story board setup:

every thing is fine, u just need to setup the story board view controller to embed in navigation controller, (if u don't done yet), then in the view controller, just add a search bar and make outlet for viewcontroller.swift then do following changes

@IBOutlet weak var searchBar: UISearchBar!
override func viewDidLoad() {
    super.viewDidLoad()
    //navigationController?.navigationBar.isTranslucent = false //set it in strory board
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    //navigationController?.navigationBar.barStyle = .black ////set it in strory board
    //navigationController?.navigationBar.barTintColor = UIColor.red ////set it in strory board 
    navigationController?.navigationBar.shadowImage = UIImage()
    title = "Location";

    searchBar.barStyle = .default
    searchBar.isTranslucent = false
    searchBar.barTintColor = UIColor.red 
    searchBar.backgroundImage = UIImage()
}

is it possible to add it and change the color in storyboard.? — ios, Oct 13 '16 at 07:15

score 1 · Answer 2 · edited Oct 13 '16 at 04:20

Here you go..Try this code

self.navigationItem.title = @"locations"; 
UISearchBar *searchBar1 = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 34)]; 
[self.view addSubview:searchBar1];
 NSLayoutConstraint *contTop = [NSLayoutConstraint constraintWithItem:searchBar1 
                               attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.topLayoutGuide attribute:NSLayoutAttributeBottom
                               multiplier:1.0 constant:0]; 

NSLayoutConstraint *consHeight = [NSLayoutConstraint constraintWithItem:searchBar1 attribute:NSLayoutAttributeHeight
                                 relatedBy:NSLayoutRelationEqual toItem:nil
                                 attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0  
                                 constant:34]; 

NSLayoutConstraint *contLeading = [NSLayoutConstraint constraintWithItem:searchBar1 attribute:NSLayoutAttributeLeading
                                  relatedBy:NSLayoutRelationEqual toItem:self.view
                                  attribute:NSLayoutAttributeLeading multiplier:1.0 constant:0]; 
NSLayoutConstraint *conttrailing = [NSLayoutConstraint constraintWithItem:searchBar1 attribute:NSLayoutAttributeTrailing
                                   relatedBy:NSLayoutRelationEqual toItem:self.view 
                                  attribute:NSLayoutAttributeTrailing multiplier:1.0 constant:0]; 
[NSLayoutConstraint activateConstraints:@[contTop, consHeight,contLeading,conttrailing]];
[searchBar1 setTranslatesAutoresizingMaskIntoConstraints:NO]; 
[self.view layoutSubviews]; 
self.navigationItem.title = @"locations"; 
self.navigationController.navigationBar.barTintColor = [UIColor orangeColor]; 
searchBar1.barTintColor= [UIColor orangeColor]; 
self.definesPresentationContext = YES;

[self.navigationController.navigationBar.layer setBorderWidth:2.0];// Just to make sure its working [self.navigationController.navigationBar.layer setBorderColor:[[UIColor whiteColor] CGColor]]; You can set border color of Search bar in the same way. — PlusInfosys, Oct 13 '16 at 06:14

Add search bar under the navigation title

2 Answers2