このようにTableViewの上部に検索機能がついたUIは、iphoneアプリでよく見られます。
今回は、tableViewとUISearchControllerを使って、実装する方法を紹介します！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import UIKit class TableViewController: UITableViewController { let searchController = UISearchController(searchResultsController: nil) override func viewDidLoad() { super.viewDidLoad() // searchBarのプレースホルダー searchController.searchBar.placeholder = "検索したい文字列を入力してください" // searchBarフォーカス時に背景色を暗くするか？ searchController.obscuresBackgroundDuringPresentation = true // searchBarのスタイル searchController.searchBar.searchBarStyle = UISearchBar.Style.prominent // searchbarのサイズを調整 searchController.searchBar.sizeToFit() // tableViewのヘッダーにsearchController.searchBarをセット tableView.tableHeaderView = searchController.searchBar } override func numberOfSections(in tableView: UITableView) -> Int { return 0 } } |
ソースはこのような形になります！
この実装にすれば、
- tableViewのヘッダー部分に検索ボックスを設置できる
- 検索ボックスフォーカス時にiphoneの入力欄が出現する
- 検索ボックスフォーカス時に、その他の部分をタップするとフォーカスが外れる
といった具合に、いい感じのUI・UXを組み込みの機能で作ることができます！
