rakuishi.com

・ iOS

[iOS SDK] UITableView に UISearchBar を追加する

UITableView にセットしたデータを UISearchBar で、検索するプログラムを組んでみました。

動作確認：Xcode 4.3.1, 非 ARC

このように、文字を入力していくと、検索結果がリアルタイムで絞られます。Cancel ボタンをタップすると検索が終了します。

新規プロジェクトの作成

「File」→「New」→「Project…」と移動します。

ここでは、UITableView が始めから用意されている「Master-Detail Application」を選択します。

ここでは、Use Storyboards, Use Core Data, Use Automatic Reference Counting, Include Unit Tests すべてのチェックを外しておきます。

Product Name は、お好きな名前で。

MasterViewController.h を変更

SearchDisplay, SearchBar の delegate を追加しておきます。

UITableView に表示させるデータを持たせる配列 originalData と、検索でマッチするデータを持たせる動的配列 searchData を用意します。

#import <UIKit/UIKit.h>

@class DetailViewController;

@interface MasterViewController : UITableViewController <UISearchDisplayDelegate, UISearchBarDelegate> {
    NSArray *originalData;
    NSMutableArray *searchData;
}

@property (strong, nonatomic) DetailViewController *detailViewController;

@end

MasterViewController.m を変更

ここからは、各メソッドごとに解説していきます。

viewDidLoad では、検索バーの実装とデータ配列の初期化を行います。「Master-Detail Application」で元から用意されている editButton, addButton は、必要ないので削除しています。

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UISearchBar *searchBar = [[[UISearchBar alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 44.0f)] autorelease];
    UISearchDisplayController *searchDisplayController = [[UISearchDisplayController alloc] initWithSearchBar:searchBar contentsController:self];
    searchDisplayController.delegate = self;
    searchDisplayController.searchResultsDelegate = self;
    searchDisplayController.searchResultsDataSource = self;
    self.tableView.tableHeaderView = searchBar;

    originalData = [[NSArray alloc] initWithObjects: @"iPhone", @"iPod", @"iPod touch", @"iMac", @"Mac Pro", @"iBook", @"MacBook", @"MacBook Pro", @"PowerBook", nil];
    searchData = [[NSMutableArray arrayWithCapacity: originalData.count] retain];
}

numberOfRowsInSection メソッドは、UITableView のセル数を管理しています。検索状態か否かで分岐させて、返す値を変更しています。

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    if(tableView == self.searchDisplayController.searchResultsTableView)
        return searchData.count;
    return originalData.count;
}

cellForRowAtIndexPath メソッドも同様に、検索状態か否かで分岐させて、cell.textLabel.text に代入する値を変更させています。

- (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;
    }

    if(tableView == self.searchDisplayController.searchResultsTableView)
        cell.textLabel.text = [searchData objectAtIndex:indexPath.row];
    else
        cell.textLabel.text = [originalData objectAtIndex:indexPath.row];

    return cell;
}

didSelectRowAtIndexPath メソッドでは、テーブルのセルがタップされた時の処理を書きます。移動したビュー先のタイトルをセル名にするようにしています。

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (!self.detailViewController) {
        self.detailViewController = [[[DetailViewController alloc] initWithNibName:@"DetailViewController" bundle:nil] autorelease];
    }

    if(tableView == self.searchDisplayController.searchResultsTableView)
        self.detailViewController.title = [searchData objectAtIndex:indexPath.row];
    else
        self.detailViewController.title = [originalData objectAtIndex:indexPath.row];

    [self.navigationController pushViewController:self.detailViewController animated:YES];
}

ここからは、実際に検索して絞り込んでいく処理を行っています。

for(NSString *label in originalData) 内で、検索結果を絞り込んでいます。ここでは、曖昧（大・小文字、文字位置を区別しない）な検索を行っています。

- (void)filterContentForSearchText:(NSString*)searchString scope:(NSString*)scope {
    [searchData removeAllObjects];

    for(NSString *label in originalData) {
        NSRange range = [label rangeOfString:searchString
                                     options:NSCaseInsensitiveSearch];
        if(range.length > 0)
            [searchData addObject:label];
    }
}

- (BOOL)searchDisplayController:(UISearchDisplayController*)controller shouldReloadTableForSearchString:(NSString*)searchString {
    [self filterContentForSearchText: searchString
                               scope: [[self.searchDisplayController.searchBar scopeButtonTitles] objectAtIndex:[self.searchDisplayController.searchBar selectedScopeButtonIndex]]];
    return YES;
}

これで、実行すると動くはずです。

Special Thanks !