[swift] Swift에서 TableFlip을 사용하여 테이블 뷰의 셀에 검색 필드를 추가하는 방법

16 Nov 2023

swift

테이블 뷰는 iOS 애플리케이션에서 효과적인 데이터 표시와 관리를 위해 널리 사용되는 컴포넌트입니다. 이때 검색 기능을 테이블 뷰에 추가하면 사용자가 쉽게 원하는 데이터를 찾을 수 있도록 도와줍니다. 이 문서에서는 Swift 프로그래밍 언어와 TableFlip 라이브러리를 사용하여 테이블 뷰의 셀에 검색 필드를 추가하는 방법을 알아보겠습니다.

TableFlip 라이브러리 설치하기

TableFlip 라이브러리는 CocoaPods 또는 Swift Package Manager를 통해 설치할 수 있습니다. 이 예제에서는 CocoaPods를 사용하겠습니다.

프로젝트의 Podfile에 다음 코드를 추가합니다:

pod 'TableFlip'

터미널에서 pod install 명령을 실행하여 TableFlip 라이브러리를 설치합니다.

검색 필드 추가하기

검색 필드를 추가하기 위해 먼저 테이블 뷰 컨트롤러를 생성합니다. 다음과 같이 새로운 Swift 파일을 생성하고, 해당 파일에서 필요한 코드를 추가합니다:

import UIKit
import TableFlip

class TableViewController: UITableViewController, UISearchResultsUpdating {
    
    let searchController = UISearchController(searchResultsController: nil)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 검색 필드 설정
        searchController.searchResultsUpdater = self
        searchController.obscuresBackgroundDuringPresentation = false
        definesPresentationContext = true
        tableView.tableHeaderView = searchController.searchBar
    }
    
    // 검색어 업데이트 시 호출되는 함수
    func updateSearchResults(for searchController: UISearchController) {
        // 검색어에 따른 검색 로직 구현
    }
    
    // 테이블 뷰 데이터 소스와 델리게이트 함수 생략...
}

해당 코드는 테이블 뷰 컨트롤러에 UISearchController를 추가하고, 검색 필드를 테이블 뷰의 헤더 뷰로 설정하는 기본적인 방법을 보여줍니다. updateSearchResults(for:) 함수에서는 검색어가 업데이트될 때마다 호출되며, 이곳에서 검색 로직을 구현할 수 있습니다.

검색 필터링 기능 구현하기

검색 필터링 기능을 추가하기 위해 테이블 뷰의 데이터 소스와 델리게이트 함수를 다음과 같이 수정합니다:

var items: [String] = ["Apple", "Banana", "Cherry", "Durian", "Elderberry"]
var filteredItems: [String] = []

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    if isFiltering {
        return filteredItems.count
    }
    return items.count
}

override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    
    let item: String
    if isFiltering {
        item = filteredItems[indexPath.row]
    } else {
        item = items[indexPath.row]
    }
    
    cell.textLabel?.text = item
    return cell
}

var isFiltering: Bool {
    return searchController.isActive && !searchBarIsEmpty
}

var searchBarIsEmpty: Bool {
    return searchController.searchBar.text?.isEmpty ?? true
}

func filterContentForSearchText(_ searchText: String) {
    filteredItems = items.filter { (item: String) -> Bool in
        return item.lowercased().contains(searchText.lowercased())
    }
    tableView.reloadData()
}

위의 코드에서는 items 배열에 테이블 뷰에 표시할 항목들을 저장하고, filteredItems 배열에 현재 검색어와 일치하는 항목들을 저장합니다. 이후 tableView(_:numberOfRowsInSection:) 함수를 수정하여 필터링된 항목들의 개수를 반환하고, tableView(_:cellForRowAt:) 함수를 수정하여 필터링된 항목들을 테이블 뷰의 셀에 표시합니다. filterContentForSearchText(_:) 함수는 검색어에 따라 filteredItems 배열을 업데이트하고, 테이블 뷰를 다시 로드하는 역할을 합니다.

이제 검색 필드를 사용하여 테이블 뷰의 항목들을 검색할 수 있습니다.

마무리

이번 글에서는 Swift에서 TableFlip 라이브러리와 UISearchController를 사용하여 테이블 뷰의 셀에 검색 필드를 추가하는 방법을 알아보았습니다. 이를 통해 사용자가 애플리케이션에서 데이터를 더 쉽게 찾을 수 있도록 도움을 줄 수 있을 것입니다.