UISearchBar 사용하기: 검색 기능 추가

iOS 애플리케이션을 개발할 때 사용자는 종종 데이터를 검색하고 필터링 할 수 있는 기능이 필요합니다. UISearchBar는 이러한 필요를 충족시키기 위해 제공되는 UIKit 컴포넌트입니다. 이 글에서는 UISearchBar를 활용하여 iOS 애플리케이션에 검색 기능을 추가하는 방법을 단계별로 설명하겠습니다.

UISearchBar 설정하기

먼저 UISearchBar를 설정하는 단계부터 시작해보겠습니다. UISearchBar는 일반적으로 UITableView 또는 UICollectionView와 함께 사용됩니다. 우리는 여기에 간단한 UITableView 예제를 사용하여 UISearchBar를 설정하겠습니다.

Step 1: 프로젝트 설정

새로운 Xcode 프로젝트를 생성하고, Single View App 템플릿을 선택합니다. 프로젝트가 생성된 후, Main.storyboard를 열어 뷰 컨트롤러에 UITableView와 UISearchBar를 추가합니다.

Step 2: 아울렛 연결

ViewController.swift 파일을 열고 IBOutlet을 사용하여 UISearchBar와 UITableView를 연결합니다.

swift
import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var searchBar: UISearchBar!
    @IBOutlet weak var tableView: UITableView!

    var data = ["Apple", "Banana", "Cherry", "Date", "Fig", "Grape"]
    var filteredData: [String]!

    override func viewDidLoad() {
        super.viewDidLoad()
        filteredData = data
        searchBar.delegate = self
        tableView.dataSource = self
    }
}

UISearchBarDelegate 설정하기

이제 UISearchBarDelegate를 구현하여 검색 바가 작동하도록 설정합니다.

Step 3: 프로토콜 채택

UIViewController에 UISearchBarDelegate 프로토콜을 채택합니다.

swift
class ViewController: UIViewController, UISearchBarDelegate {
    // ... (생략된 코드)
}

Step 4: searchBar(_:textDidChange:) 메서드 구현

검색 바의 텍스트가 변경될 때마다 이 메서드가 호출됩니다. 우리는 이 메서드를 구현하여 사용자가 입력한 텍스트를 기반으로 데이터를 필터링합니다.

swift
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    if searchText.isEmpty {
        filteredData = data
    } else {
        filteredData = data.filter { $0.lowercased().contains(searchText.lowercased()) }
    }
    tableView.reloadData()
}

UITableViewDataSource 구현하기

이제 UITableViewDataSource 프로토콜을 구현하여 필터링된 데이터를 테이블 뷰에서 표시합니다.

Step 5: 프로토콜 채택

ViewController에 UITableViewDataSource 프로토콜을 채택합니다.

swift
class ViewController: UIViewController, UISearchBarDelegate, UITableViewDataSource {
    // ... (생략된 코드)

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return filteredData.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
        cell.textLabel?.text = filteredData[indexPath.row]
        return cell
    }
}

사용자 경험 개선

사용자 경험을 개선하기 위해 UISearchBar에 몇 가지 옵션과 스타일을 추가할 수 있습니다.

Step 6: UISearchBar 스타일링

UISearchBar의 스타일을 커스터마이즈하여 더 나은 사용자 경험을 제공할 수 있습니다.

swift
override func viewDidLoad() {
    super.viewDidLoad()
    // ... (생략된 코드)

    searchBar.searchBarStyle = .prominent
    searchBar.placeholder = "Search fruits"
    searchBar.showsCancelButton = true
}

Step 7: Cancel 버튼 동작 구현

사용자가 Cancel 버튼을 탭했을 때, 검색 바의 텍스트를 지우고 키보드를 숨기도록 합니다.

swift
func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
    searchBar.text = ""
    searchBar.resignFirstResponder()
    filteredData = data
    tableView.reloadData()
}

결론

이 글에서는 UISearchBar를 사용하여 간단한 검색 기능을 구현하는 방법을 다루었습니다. UISearchBar의 기본 설정부터 UISearchBarDelegate와 UITableViewDataSource를 구현하고, 사용자 경험을 개선하는 몇 가지 방법까지 살펴보았습니다. 이제 이 지식을 바탕으로 다양한 애플리케이션에서 검색 기능을 추가해볼 수 있을 것입니다.