IOS, fast. How do I make a floating search bar with a dropdown like this? (Image included)
Can I do this with stock iOS UIKit
?
When I google for UISearchBar
, all tutorials come with UITableView
. This is not what I want.
I want this search string to be
- floating on top of everything
- show a dropdown list of possible match options when the user types
to make a search bar like this you want to insert a button in the navbar controller and set the background image to be search.png
(your image). so when the user clicks on that button, set the target as searchbar
. please check below code for reference.
First of all, set the delegate method to a file .h
.
@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 click the "Insert" button in the search bar.
- (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 need to set searchcontroller to 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 the search icon