溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

UISearchBar的使用以及下拉列表框的實現(xiàn)

發(fā)布時間:2020-06-14 11:18:15 來源:網(wǎng)絡(luò) 閱讀:26730 作者:izhuhaoDev 欄目:開發(fā)技術(shù)

       在IOS混飯吃的同志們都很清楚,搜索框在移動開發(fā)應(yīng)用中的地位。今天我們就結(jié)合下拉列表框的實現(xiàn)來聊聊UISearchBar的使用。本人新入行的菜鳥一個,不足之處請多多指教。直接上代碼。

UISearchBar控件的聲明:(在控制器DownListViewController中)

  1. @property (nonatomic,retain) UISearchBar* searchBar; 

控件的初始化:

  1. _searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(0, 0, 320, 40)]; 
  2. _searchBar.placeholder = @"test";   //設(shè)置占位符 
  3. _searchBar.delegate = self;   //設(shè)置控件代理 

當(dāng)然,做完這些工作之后,我們還要在將控件添加到父視圖之上,也可以把他設(shè)置成UITableView的tableHeaderView屬性值,由于大家需求不一,這里就不再給出代碼。

前面,我們設(shè)置了控件的代理,當(dāng)然我們必須讓控制器(DownListViewController)的 .h 文件實現(xiàn) UISearchBarDelegate 協(xié)議,然后我們繼續(xù), 我們要在 .m 文件中實現(xiàn)協(xié)議方法:

  1. #pragma mark - 
  2. #pragma mark UISearchBarDelegate 
  3.  
  4. //搜索框中的內(nèi)容發(fā)生改變時 回調(diào)(即要搜索的內(nèi)容改變)
  5. - (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText{ 
  6.     NSLog(@"changed"); 
  7.     if (_searchBar.text.length == 0) { 
  8.         [self setSearchControllerHidden:YES]; //控制下拉列表的隱現(xiàn)
  9.     }else{ 
  10.         [self setSearchControllerHidden:NO]; 
  11.   
  12.     } 

  13. - (BOOL)searchBarShouldBeginEditing:(UISearchBar *)searchBar { 
  14.     searchBar.showsCancelButton = YES
  15. for(id cc in [searchBar subviews])
    {
    if([cc isKindOfClass:[UIButton class]])
    {
    UIButton *btn = (UIButton *)cc;
    [btn setTitle:@"取消" forState:UIControlStateNormal];
    }
    }
  16.     NSLog(@"shuould begin"); 
  17.     return YES; 
  18.  
  19. - (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar { 
  20.     searchBar.text = @""; 
  21.     NSLog(@"did begin"); 
  22.  
  23. - (void)searchBarTextDidEndEditing:(UISearchBar *)searchBar { 
  24.     NSLog(@"did end"); 
  25.     searchBar.showsCancelButton = NO
  26.  
  27.  
  28. - (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar { 
  29.     NSLog(@"search clicked"); 
  30.  
  31. //點擊搜索框上的 取消按鈕時 調(diào)用
  32. - (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar { 
  33.     NSLog(@"cancle clicked"); 
  34.     _searchBar.text = @""; 
  35.     [_searchBar resignFirstResponder]; 
  36.     [self setSearchControllerHidden:YES]; 

至此,搜索框的實現(xiàn)就搞定了,怎么樣簡單吧。下面我們來講講下拉列表框的實現(xiàn),先說說他的實現(xiàn)原理或者是思路吧。下拉列表框我們用一個控制器來實現(xiàn),我們新建一個控制器SearchViewController.

  1. @interface SearchViewController : UITableViewController 
  2.  
  3. @end 

在 .m 文件中,我們實現(xiàn)該控制器

  1. - (id)initWithStyle:(UITableViewStyle)style 
  2.     self = [super initWithStyle:style]; 
  3.     if (self) { 
  4.         // Custom initialization 
  5.     } 
  6.     return self; 
  7.  
  8. - (void)viewDidLoad 
  9.     [super viewDidLoad]; 
  10.  
  11.     self.tableView.layer.borderWidth = 1
  12.     self.tableView.layer.borderColor = [[UIColor blackColor] CGColor]; 
  13.  

然后實現(xiàn)控制器的數(shù)據(jù)源,

 

  1. #pragma mark - 
  2. #pragma mark Table view data source 
  3.  
  4. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { 
  5.     return 1; 
  6.  
  7.  
  8. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
  9.     // 返回列表框的下拉列表的數(shù)量
  10.     return 3; 
  11.  
  12.  
  13. // Customize the appearance of table view cells. 
  14. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
  15.      
  16.     static NSString *CellIdentifier = @"Cell"; 
  17.      
  18.     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
  19.     if (cell == nil) { 
  20.         cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] ; 
  21.     } 
  22.      
  23.     // Configure the cell... 
  24.     NSUInteger row = [indexPath row]; 
  25.     cell.textLabel.text = @"down list"; 
  26.      
  27.     return cell; 

這樣列表框的控制器就實現(xiàn)了。接下來我們就來看看怎么讓出現(xiàn)、隱藏。這點我們利用UIView的動畫效果來實現(xiàn),我們在DownListViewController控制器中 增加一個方法:

  1. - (void) setSearchControllerHidden:(BOOL)hidden { 
  2.     NSInteger height = hidden ? 0: 180; 
  3.     [UIView beginAnimations:nil context:nil]; 
  4.     [UIView setAnimationDuration:0.2]; 
  5.      
  6.     [_searchController.view setFrame:CGRectMake(30, 36, 200, height)]; 
  7.     [UIView commitAnimations]; 

我們只需調(diào)用該方法就可以了?,F(xiàn)在我們看看DownListViewController的布局方法

  1. - (void)viewDidLoad 
  2.     [super viewDidLoad]; 
  3.     _searchBar = [[UISearchBar alloc]initWithFrame:CGRectMake(0, 0, 320, 40)]; 
  4.     _searchBar.placeholder = @"test"; 
  5.     _searchBar.delegate = self;  
  6.      
  7.     _tableview = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain]; 
  8.     _tableview.dataSource = self
  9.     _tableview.tableHeaderView = _searchBar
  10.      
  11.     _searchController = [[SearchViewController alloc] initWithStyle:UITableViewStylePlain]; 
  12.     [_searchController.view setFrame:CGRectMake(30, 40, 200, 0)]; 
  13.      
  14.     [self.view addSubview:_tableview]; 
  15.     [self.view addSubview:_searchController.view]; 

這樣一切都搞定了。

 

UISearchBar的使用以及下拉列表框的實現(xiàn)

好了,總結(jié)一下:

我們用了兩個控制器:DownListViewController(搜索框的實現(xiàn) 和 控制下拉列表框的出現(xiàn)與隱藏)和SearchViewController(下拉列表框的實現(xiàn))。在DownListViewController中我們聲明并初始化 UISearchBar和SearchViewController(高度開始設(shè)置為零),用動畫來實現(xiàn)下拉列表框的出現(xiàn)與隱藏。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI