iOS應(yīng)用中UISearchDisplayController搜索效果的用法

2020-07-26 03:27:47

字體：大中小

供稿：網(wǎng)友

新建Navigation-based Project。打開.xib文件，拖一個(gè)Search Bar and Search DisplayController 對(duì)象到Table View對(duì)象上方，如下圖所示，選中File's Owner ,打開Connections面板：

201621891219772.jpg (750×420)

現(xiàn)在我們來創(chuàng)建Search Bar和SearchDisplay Controller的出口。打開Assistant Editor，按住ctrl鍵，將SearchDisplay Controller拖到ViewController 的頭文件中。創(chuàng)建一個(gè)名為searchDisplayController的出口，然后點(diǎn)Connect。

201621891243378.jpg (750×410)

同樣的方法為Search Bar創(chuàng)建連接。現(xiàn)在ViewController的頭文件看起來像這樣：

復(fù)制代碼代碼如下:

#import <UIKit/UIKit.h>

@interface RootViewController : UITableViewController {

UISearchDisplayController *searchDisplayController; UISearchDisplayController *searchBar;

NSArray *allItems;

NSArray *searchResults;

}

@property (nonatomic, retain) IBOutlet UISearchDisplayController *searchDisplayController;

@property (nonatomic, retain) IBOutlet UISearchDisplayController *searchBar;

@property (nonatomic, copy) NSArray *allItems;

@property (nonatomic, copy) NSArray *searchResults;

@end

你可能注意到，我初始化了兩個(gè)NSArray。一個(gè)用于作為數(shù)據(jù)源，一個(gè)用于保存查找結(jié)果。在本文中，我使用字符串?dāng)?shù)組作為數(shù)據(jù)源。繼續(xù)編輯.m文件前，別忘了synthesize相關(guān)屬性：

@synthesize searchDisplayController;
@synthesize searchBar;
@synthesize allItems;
@synthesize searchResults;

在viewDidLoad 方法中,我們構(gòu)造了我們的字符串?dāng)?shù)組:

復(fù)制代碼代碼如下:

- (void)viewDidLoad {

[super viewDidLoad];

// [self.tableView reloadData];

self.tableView.scrollEnabled = YES;

NSArray *items = [[NSArray alloc] initWithObjects: @"Code Geass", @"Asura Cryin'", @"Voltes V", @"Mazinger Z", @"Daimos", nil];

self.allItems = items;

[items release];

[self.tableView reloadData];

}

在Table View的返回TableView行數(shù)的方法中，我們先判斷當(dāng)前Table View是否是searchDisplayController的查找結(jié)果表格還是數(shù)據(jù)源本來的表格，然后返回對(duì)應(yīng)的行數(shù):

復(fù)制代碼代碼如下:

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

NSInteger rows = 0;

if ([tableView isEqual:self.searchDisplayController.searchResultsTableView]){

rows = [self.searchResults count];

}else{

rows = [self.allItems count];

}

return rows;

}

在tableView:cellForRowAtIndexPath:方法里，我們需要做同樣的事：

復(fù)制代碼代碼如下:

// Customize the appearance of table view cells.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *CellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];

cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;

}

/* Configure the cell. */

if ([tableView isEqual:self.searchDisplayController.searchResultsTableView]){

cell.textLabel.text = [self.searchResults objectAtIndex:indexPath.row];

}else{

cell.textLabel.text = [self.allItems objectAtIndex:indexPath.row];

}

return cell;

}

現(xiàn)在來實(shí)現(xiàn)當(dāng)搜索文本改變時(shí)的回調(diào)函數(shù)。這個(gè)方法使用謂詞進(jìn)行比較，并講匹配結(jié)果賦給searchResults數(shù)組:

復(fù)制代碼代碼如下:

- (void)filterContentForSearchText:(NSString*)searchText scope:(NSString*)scope {

NSPredicate *resultPredicate = [NSPredicate predicateWithFormat:@"SELF contains[cd] %@", searchText];

self.searchResults = [self.allItems filteredArrayUsingPredicate:resultPredicate];

}

接下來是UISearchDisplayController的委托方法，負(fù)責(zé)響應(yīng)搜索事件：

復(fù)制代碼代碼如下:

#pragma mark - UISearchDisplayController delegate methods

-(BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchString:(NSString *)searchString {

[self filterContentForSearchText:searchString scope:[[self.searchDisplayController.searchBar scopeButtonTitles] objectAtIndex:[self.searchDisplayController.searchBar selectedScopeButtonIndex]]];

return YES;

}

- (BOOL)searchDisplayController:(UISearchDisplayController *)controller shouldReloadTableForSearchScope:(NSInteger)searchOption {

[self filterContentForSearchText:[self.searchDisplayController.searchBar text] scope:[[self.searchDisplayController.searchBar scopeButtonTitles] objectAtIndex:searchOption]];

return YES;

}

運(yùn)行工程，當(dāng)你在搜索欄中點(diǎn)擊及輸入文本時(shí)，如下圖所示：

201621891348854.jpg (750×716)

UISearchDisplayController 點(diǎn)擊搜索出現(xiàn)黑條問題解決方案
如果點(diǎn)擊按鈕啟動(dòng) presentViewController 的時(shí)候出現(xiàn)下圖效果：

201621891407773.gif (640×774)

比如說我這里現(xiàn)在代碼式這樣寫的：

復(fù)制代碼代碼如下:

AddFriendViewController *addFriendVC = [[AddFriendViewController alloc] init];  
   UINavigationController *nav =[[UINavigationController alloc] initWithRootViewController:addFriendVC];  
   [self presentViewController:nav animated:YES completion:nil];  
   [addFriendVC release];  
   [nav release];  

發(fā)現(xiàn)問題所在 UINavigationController 的背景顏色是黑色的；

為了解決TableView點(diǎn)擊搜索出現(xiàn)的黑條:

代碼：

復(fù)制代碼代碼如下:

AddFriendViewController *addFriendVC = [[AddFriendViewController alloc] init];  
    UINavigationController *nav =[[UINavigationController alloc] initWithRootViewController:addFriendVC];  
    [nav.view setBackgroundColor:UIColorFromRGB(0xC6C6CB)];  
    [self presentViewController:nav animated:YES completion:nil];  
    [addFriendVC release];  
    [nav release];  

改變了Nav的背景色：

復(fù)制代碼代碼如下:

[nav.view setBackgroundColor:UIColorFromRGB(0xC6C6CB)];

效果：

201621891433964.gif (642×554)