こんにちは!株式会社メモリアインクのふくしまです!
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を使用して検索フォームを実装する方法について、実用的なサンプルコードを用いて詳細に解説しました。この記事が皆様の開発ライフの一助となれれば幸いです!
この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント