iOS, swift. How to make a floating search bar with drop down list like this?? (Image included)

Question

Can I make this with standard iOS UIKit?

When I google for UISearchBar, all tutorials come with UITableView. Which is not what I want.

I want this search bar to be

• floating on top of everything
• show drop down list of possible matching options when the user types

Answer 1

to make searchbar like this you want to insert Button in Navigation bar controller and set background image as search.png(your image). so, when user click on this button set target as searchbarwill be open. please check below code for your reference.

First of all set delegate method in you .h file.

@interface FriendsViewController : UIViewController <UISearchDisplayDelegate,UISearchBarDelegate,UIAlertViewDelegate>
 @property (nonatomic, strong) UIButton *searchButton;
 @property (nonatomic, strong) UIBarButtonItem *searchItem;
 @property (nonatomic, strong) UISearchBar *searchBar;
 @property (strong, nonatomic) UISearchController *searchController;
 @property (strong, nonatomic) UISearchDisplayController *d1;

then Insert button in your nevigationbar.

- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
UIButton *btn=[[UIButton alloc]initWithFrame:CGRectMake(279,9,25, 25)];
[btn setImage:[UIImage imageNamed:@"search"] //put here your searchimage
forState:UIControlStateNormal];
[btn setTitle:@"" forState:UIControlStateNormal];
[btn addTarget:self action:@selector(clickme:) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *barbtn=[[UIBarButtonItem alloc]initWithCustomView:btn];
self.tabBarController.navigationItem.rightBarButtonItem=barbtn;
[self.tabBarController.navigationController.navigationBar setHidden:NO];

Now you have to set searchcontroller on clickme your button method.

- (IBAction)clickme:(id)sender{
UISearchBar *searchBar = [[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, 300, 44.0)];
searchBar.autoresizingMask =0;
searchBar.delegate = self;
searchBar.placeholder = @"Search for items...";
searchBar.showsScopeBar=YES;

UIView *searchBarWrapper = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 200, 44)];
searchBarWrapper.autoresizingMask = 0;
[searchBarWrapper addSubview:searchBar];

self.searchItem = [[UIBarButtonItem alloc] initWithCustomView:searchBarWrapper];
self.tabBarController.navigationItem.leftBarButtonItem = self.searchItem;

self.navigationItem.rightBarButtonItem = nil;
self.navigationItem.titleView = nil;

  ////////////// ~ Search Display Controller as Object ~/////////////////////////////

self.d1 = [[UISearchDisplayController alloc] initWithSearchBar:searchBar contentsController:self];
self.d1.delegate = self;
self.d1.searchResultsDataSource = self;
self.d1.searchResultsDelegate = self;
self.d1.searchResultsTableView.rowHeight = 40;
self.d1.displaysSearchBarInNavigationBar = YES;
self.searchBar.translucent = NO;
self.searchBar.barTintColor = [UIColor grayColor];
self.d1.searchBar.tintColor = [UIColor blueColor];

[searchBar sizeToFit];

}

when you click on search icon