iOS
UISearchController
サーチ…
構文
- UISearchController(searchResultsController:UIViewController?)//検索更新コントローラが検索可能なコンテンツも表示する場合は、パラメータとしてnilを渡します。
- func updateSearchResults(searchController:UISearchControllerの場合)// UISearchResultsUpdatingプロトコルを採用する際に実装する必要のあるメソッド
パラメーター
パラメータ | 詳細 |
---|---|
UISearchController.searchBar | あなたのインターフェイスにインストールする検索バー。 (読み取り専用) |
UISearchController.searchResultsUpdater | 検索結果コントローラの内容を更新するオブジェクトです。 |
UISearchController.isActive | 提示された検索インターフェースの状態。 |
UISearchController.obscuresBackgroundDuringPresentation | 検索中に基になるコンテンツが隠されているかどうかを示すブール値。 |
UISearchController.dimsBackgroundDuringPresentation | 検索中に基礎となるコンテンツが淡色表示されているかどうかを示すブール値。 |
UISearchController.hidesNavigationBarDuringPresentation | 検索時にナビゲーションバーを非表示にするかどうかを示すブール値。 |
UIViewController.definesPresentationContext | ビューコントローラまたはその子孫の1つがビューコントローラを表示するときに、このビューコントローラのビューがカバーされるかどうかを示すブール値。 |
UIViewController.navigationItem.titleView | 受信者が検索バーを配置できるトップアイテムである場合、ナビゲーションバーの中央に表示されるカスタムビュー。 |
UITableViewController.tableView.tableHeaderView | 検索バーを配置できるテーブルの上に表示されるアクセサリビューを返します。 |
備考
ナビゲーションバータイトル内の検索バー
この例では、検索コントローラを使用して、テーブルビューコントローラ内のデータをフィルタ処理します。検索バーは、テーブルビューが埋め込まれているナビゲーションバーの内側に配置されています。
埋め込みコードUITableViewController
にUINavigationController
取得するUINavigationItem
(ナビゲーションバーが含まれています)。その後、カスタムViewControllerクラスを設定してUITableViewController
から継承し、 UISearchResultsUpdating
プロトコルを採用します。
class ViewController: UITableViewController, UISearchResultsUpdating {
let entries = [(title: "Easiest", image: "green_circle"),
(title: "Intermediate", image: "blue_square"),
(title: "Advanced", image: "black_diamond"),
(title: "Expert Only", image: "double_black_diamond")]
// An empty tuple that will be updated with search results.
var searchResults : [(title: String, image: String)] = []
let searchController = UISearchController(searchResultsController: nil)
override func viewDidLoad() {
super.viewDidLoad()
searchController.searchResultsUpdater = self
self.definesPresentationContext = true
// Place the search bar in the navigation item's title view.
self.navigationItem.titleView = searchController.searchBar
// Don't hide the navigation bar because the search bar is in it.
searchController.hidesNavigationBarDuringPresentation = false
}
func filterContent(for searchText: String) {
// Update the searchResults array with matches
// in our entries based on the title value.
searchResults = entries.filter({ (title: String, image: String) -> Bool in
let match = title.range(of: searchText, options: .caseInsensitive)
// Return the tuple if the range contains a match.
return match != nil
})
}
// MARK: - UISearchResultsUpdating method
func updateSearchResults(for searchController: UISearchController) {
// If the search bar contains text, filter our data with the string
if let searchText = searchController.searchBar.text {
filterContent(for: searchText)
// Reload the table view with the search result data.
tableView.reloadData()
}
}
// MARK: - UITableViewController methods
override func numberOfSections(in tableView: UITableView) -> Int { return 1 }
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// If the search bar is active, use the searchResults data.
return searchController.isActive ? searchResults.count : entries.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// If the search bar is active, use the searchResults data.
let entry = searchController.isActive ?
searchResults[indexPath.row] : entries[indexPath.row]
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = entry.title
cell.imageView?.image = UIImage(named: entry.image)
return cell
}
}
テーブルビューヘッダーの検索バー
この例では、検索コントローラを使用してテーブルビューコントローラ内のセルをフィルタ処理します。検索バーは、テーブルビューのヘッダービューの内側に配置されます。テーブルビューのコンテンツは、検索バーと同じ高さでオフセットされているため、検索バーは最初は非表示になっています。テーブルビューの上端をスクロールすると、検索バーが表示されます。検索バーがアクティブになると、ナビゲーションバーが非表示になります。
UITextViewControllerをUINavigationControllerに埋め込み、UINavigationItem(ナビゲーションバーを含む)を取得します。その後、カスタムViewControllerクラスを設定してUITableViewControllerから継承し、UISearchResultsUpdatingプロトコルを採用します。
class ViewController: UITableViewController, UISearchResultsUpdating {
let entries = [(title: "Easiest", image: "green_circle"),
(title: "Intermediate", image: "blue_square"),
(title: "Advanced", image: "black_diamond"),
(title: "Expert Only", image: "double_black_diamond")]
// An empty tuple that will be updated with search results.
var searchResults : [(title: String, image: String)] = []
let searchController = UISearchController(searchResultsController: nil)
override func viewDidLoad() {
super.viewDidLoad()
searchController.searchResultsUpdater = self
self.definesPresentationContext = true
// Place the search bar in the table view's header.
self.tableView.tableHeaderView = searchController.searchBar
// Set the content offset to the height of the search bar's height
// to hide it when the view is first presented.
self.tableView.contentOffset = CGPoint(x: 0, y: searchController.searchBar.frame.height)
}
func filterContent(for searchText: String) {
// Update the searchResults array with matches
// in our entries based on the title value.
searchResults = entries.filter({ (title: String, image: String) -> Bool in
let match = title.range(of: searchText, options: .caseInsensitive)
// Return the tuple if the range contains a match.
return match != nil
})
}
// MARK: - UISearchResultsUpdating method
func updateSearchResults(for searchController: UISearchController) {
// If the search bar contains text, filter our data with the string
if let searchText = searchController.searchBar.text {
filterContent(for: searchText)
// Reload the table view with the search result data.
tableView.reloadData()
}
}
// MARK: - UITableViewController methods
override func numberOfSections(in tableView: UITableView) -> Int { return 1 }
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// If the search bar is active, use the searchResults data.
return searchController.isActive ? searchResults.count : entries.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
// If the search bar is active, use the searchResults data.
let entry = searchController.isActive ?
searchResults[indexPath.row] : entries[indexPath.row]
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = entry.title
cell.imageView?.image = UIImage(named: entry.image)
return cell
}
}
実装
まず、クラスがUISearchResultsUpdating
プロトコルに準拠するようにします。
class MyTableViewController: UITableViewController, UISearchResultsUpdating {}
検索コントローラのプロパティを追加します。
class MyTableViewController: UTableViewController, UISearchResultsUpdating {
let searchController = UISearchController(searchResultsController: nil)
}
検索バーを追加:
override func viewDidLoad() {
super.viewDidLoad()
searchController.searchResultsUpdater = self
searchController.hidesNavigationBarDuringPresentation = false
searchController.dimsBackgroundDuringPresentation = false
searchController.searchBar.sizeToFit()
self.tableView.tableHeaderView = searchController.searchBar
}
最後に、 UISearchResultsUpdating
プロトコルからupdateSearchResultsForSearchController
たupdateSearchResultsForSearchController
メソッドを実装します。
func updateSearchResultsForSearchController(searchController: UISearchController) {
}
Objective-CのUISerachController
Delegate: UISearchBarDelegate, UISearchControllerDelegate, UISearchBarDelegate
@property (strong, nonatomic) UISearchController *searchController;
- (void)searchBarConfiguration
{
self.searchController = [[UISearchController alloc] initWithSearchResultsController:nil];
self.searchController.searchBar.delegate = self;
self.searchController.hidesNavigationBarDuringPresentation = NO;
// Hides search bar initially. When the user pulls down on the list, the search bar is revealed.
[self.tableView setContentOffset:CGPointMake(0, self.searchController.searchBar.frame.size.height)];
self.searchController.searchBar.backgroundColor = [UIColor DarkBlue];
self.searchController.searchBar.tintColor = [UIColor DarkBlue];
self.tableView.contentOffset = CGPointMake(0, CGRectGetHeight(_searchController.searchBar.frame));
self.tableView.tableHeaderView = _searchController.searchBar;
_searchController.searchBar.delegate = self;
_searchController.searchBar.showsCancelButton = YES;
self.tapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(resetSearchbarAndTableView)];
[self.view addGestureRecognizer:self.tapGestureRecognizer];
}
- (void)resetSearchbarAndTableView{
// Reload your tableview and resign keyboard.
}
- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar{
// Search cancelled
}
- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar{
// Implement filtration of your data as per your need using NSPredicate or else.
// then reload your data control like Tableview.
}