【Xcode/Swift】SearchBarの基本的な使い方

今回は簡単にSearchBarの使い方を記事にしてみました。

検索機能が必要なアプリ等を作る時に便利になると思います〜

◉完成形

検索条件にマッチするものだけ表示するという機能です、よく見かける機能ですね。

それではちゃちゃっと作っていきましょう〜

Contents 非表示

プロジェクトの作成、Storyboardで見た目作り
プログラムと紐付け、コードの解説
まとめ

プロジェクトの作成、Storyboardで見た目作り

まずはテキトーにプロジェクトを作成

◉今回使用するパーツを配置

プログラムと紐付け、コードの解説

◉各パーツをプログラムと紐付けする。

まずは全体のコードをコピペしてください(解説は後述します)

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var label: 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()
    }
    
 }

今回重要な部分はfunc searchBarSearchButtonClickedかと思います。(54行目以降)