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

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

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

◉完成形

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

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

プロジェクトの作成、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行目以降)

  • SearchBarが押された時に一度配列を空にする
  • 検索欄が空白のままであれば全て表示
  • それ以外の場合(検索欄に文字が入力されている)はその文字に該当するものだけを表示する

まとめ

今回は以上です、検索機能も色々な場面で役立てられるかと思うのでしっかり基本的な使い方をマスターしておきましょう!

この記事は役に立ちましたか?

はい
いいえ
貴重なフィードバックありがとうございます!