【2024年4月】弊社では、基本リモートワークで一緒に成長してくださるメンバーを広く募集させていただいております。 詳細はこちら

【Swift】検索フォームを実装する方法を実用的なサンプルコードを示しつつ詳細に解説!

【Swift】検索フォームを実装する方法を実用的なサンプルコードを示しつつ詳細に解説!
ふくしま

こんにちは!株式会社メモリアインクのふくしまです!

Swiftを使用してiOSアプリケーション内で検索フォームを実装する方法について、実用的なサンプルコードを交えながら解説します。

・検索フォームの基本的な実装方法
・検索結果の表示方法

目次

環境

Swiftのバージョン: 5.9
Xcodeのバージョン: 15

検索フォームの実装方法

概要

ユーザーがテキストフィールドにキーワードを入力し、検索ボタンを押すと検索結果が表示される機能を実装します。
この実装は、多くのアプリケーションで必要とされる基本的な機能の一つであり、理解することでSwiftにおけるUIコンポーネントの配置やイベントハンドリングの基礎を学ぶことができます。

サンプルコード

import UIKit

class SearchViewController: UIViewController, UITextFieldDelegate {

    let searchTextField: UITextField = {
        let textField = UITextField()
        textField.placeholder = "検索..."
        textField.borderStyle = .roundedRect
        return textField
    }()

    let searchButton: UIButton = {
        let button = UIButton(type: .system)
        button.setTitle("検索", for: .normal)
        return button
    }()
    
    let resultLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0 // 複数行を許可
        label.textAlignment = .center
        label.text = "検索結果はこちらに表示されます"
        return label
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupSearchTextField()
        setupSearchButton()
        setupResultLabel()
    }

    func setupSearchTextField() {
        view.addSubview(searchTextField)
        searchTextField.translatesAutoresizingMaskIntoConstraints = false
        searchTextField.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20).isActive = true
        searchTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
        searchTextField.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
        searchTextField.delegate = self
    }

    func setupSearchButton() {
        view.addSubview(searchButton)
        searchButton.translatesAutoresizingMaskIntoConstraints = false
        searchButton.topAnchor.constraint(equalTo: searchTextField.bottomAnchor, constant: 20).isActive = true
        searchButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        searchButton.addTarget(self, action: #selector(searchButtonTapped), for: .touchUpInside)
    }
    
    func setupResultLabel() {
        view.addSubview(resultLabel)
        resultLabel.translatesAutoresizingMaskIntoConstraints = false
        resultLabel.topAnchor.constraint(equalTo: searchButton.bottomAnchor, constant: 20).isActive = true
        resultLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20).isActive = true
        resultLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20).isActive = true
    }

    @objc func searchButtonTapped() {
        // 検索処理をここに記述
        guard let searchText = searchTextField.text, !searchText.isEmpty else { return }
        performSearch(with: searchText)
    }

    func performSearch(with keyword: String) {
        // 仮想的な検索結果を生成
        let searchResults = ["結果1", "結果2", "結果3"].filter { $0.contains(keyword) }
        updateSearchResults(searchResults)
    }
    
    func updateSearchResults(_ results: [String]) {
        // 検索結果が空の場合は「結果なし」と表示
        if results.isEmpty {
            resultLabel.text = "結果なし"
        } else {
            // 検索結果をラベルに表示
            resultLabel.text = results.joined(separator: "\n")
        }
    }
}

サンプルコードの説明

行5-10: searchTextFieldの設定。ユーザーによるテキスト入力を受け取るUIコンポーネントです。プレースホルダーに”検索…”を設定し、境界線スタイルを.roundedRectにしています。
行12-16: searchButtonの設定。ユーザーが検索を実行するために押すボタンです。”検索”というタイトルが設定されています。
行18-24: resultLabelの設定。検索結果を表示するラベルです。複数行の表示を許可しており、初期テキストは”検索結果はこちらに表示されます”です。
行26-31: viewDidLoadメソッド内で、UIコンポーネントの設定メソッドを呼び出しています。
行33-39: setupSearchTextFieldメソッド。テキストフィールドをビューに追加し、制約を設定しています。
行42-47: setupSearchButtonメソッド。検索ボタンをビューに追加し、制約を設定し、searchButtonTappedメソッドをタップアクションに関連付けています。
行50-55: setupResultLabelメソッド。結果表示用のラベルをビューに追加し、制約を設定しています。
行58-62: searchButtonTappedメソッド。検索ボタンがタップされたときに呼び出され、テキストフィールドのテキストを取得して検索処理を実行します。
行64-67: performSearchメソッド。キーワードに基づいて仮想的な検索結果を生成し、updateSearchResultsメソッドに結果を渡しています。

let searchResults = ["結果1", "結果2", "結果3"].filter { $0.contains(keyword) }["結果1", "結果2", "結果3"]という配列の各要素に対して、その要素が指定されたkeywordを含んでいるかどうかを確認し、含んでいる要素のみを新たな配列としてsearchResultsに格納しています。
ここで使われているfilterメソッドは、配列の各要素に対して条件を満たすかどうかをテストし、条件を満たす(つまり、クロージャがtrueを返す)すべての要素で新しい配列を作成する高階関数です。
このコードのクロージャ{ $0.contains(keyword) }は、各要素($0が各要素を表す)がkeywordを含むかどうかを確認するためにcontainsメソッドを使用しています。
行70-77: updateSearchResultsメソッド。検索結果に基づいて結果ラベルのテキストを更新します。結果がない場合は”結果なし”と表示します。

動作確認

ふくしま

それではビルドして、動作確認してみましょう!

【Swift】検索フォームを実装する方法を実用的なサンプルコードを示しつつ詳細に解説!

まとめ

いかがでしたか?
本記事では、Swiftを使用して検索フォームを実装する方法について、実用的なサンプルコードを用いて詳細に解説しました。この記事が皆様の開発ライフの一助となれれば幸いです!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次