![見出し画像](https://assets.st-note.com/production/uploads/images/75890116/rectangle_large_type_2_ae6e4c67ed355ce96c27f0523072a39c.jpeg?width=1200)
Photo by
nanahoshi_d
SearchBarの基本的な使い方
◉サンプルアプリ
SearchBarに打ち込んだ文字にヒットするワードのみを表示する
・stodyboardの装飾
Label , searchBar , tableViewの3つを配置
コード全体です
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var searchBar: UISearchBar!
@IBOutlet weak var tableView: UITableView!
//tableViewに表示するための配列を作成してsearchResultに入れ込む
private var fruitsArray: [String] = ["Banana", "Apple","Grape","Orange","Pinapple","Mango","Strawberry","Watermelon"]
private var searchResult = [String]()
override func viewDidLoad() {
super.viewDidLoad()
setupView()
}
//画面のどこかをタッチしたときにキーボードを閉じる
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
self.view.endEditing(true)
}
//初期画面設定
private func setupView() {
searchBar.delegate = self
searchBar.enablesReturnKeyAutomatically = false
tableView.delegate = self
tableView.dataSource = self
searchResult = fruitsArray
}
}
//tableViewの設定
extension ViewController: UITableViewDelegate, UITableViewDataSource {
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return searchResult.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = searchResult[indexPath.row]
//セルがタップされた時のハイライトを表示しないようにする
cell.selectionStyle = UITableViewCell.SelectionStyle.none
return cell
}
}
//searchBarで検索ボタンを押した時の処理
extension ViewController: UISearchBarDelegate {
func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
searchBar.endEditing(true)
searchResult.removeAll()
if(searchBar.text == "") {
searchResult = fruitsArray
} else {
for data in fruitsArray {
if data.contains(searchBar.text!) {
searchResult.append(data)
}
}
}
tableView.reloadData()
print(searchResult)
}
}
不明点等有ればコメントしてください〜
以上です。
この記事が気に入ったらサポートをしてみませんか?