[iOS] 검색하고 검색한 글자 필터링한 객체 테이블뷰에 띄우기(Search Object Filtering)

안녕하세요 Foma 입니다!

 

언제나 그랬듯 제목 정하기가 너무 힘드네요...

 

오늘은 알아볼건 서치바에 검색하고 검색한 글자가 포함된 것들을 필터링한 것을 테이블뷰에 띄우는 것입니다.

 

이번 글은 저번 시간에 엑셀 파싱하는법에서 배웠던 나라와 도시 이름들이 담긴 데이터를 활용하겠습니다.

 

혹시 못보신 분들은 여기 에서 보고와주세요!

 

바로 시작할게요~

---

Preview

 

---

Storyboard

 

아래와 같이 테이블뷰를 만들어줍니다.

 

(주의하실 점은 반드시 UIViewController로 만드신 후에 TableView를 AutoLayout해주세요!)

 

그리곤 해당 테이블뷰를 control을 누르고 드래그해서 ViewController에 가져가서 dataSource를 체크해주세요.

---

AddViewController

 

제일 먼저 테이블뷰를 연결시켜주세요.

@IBOutlet weak var tableView: UITableView!

아래와 같이 모든 위치를 담을 배열과 필터링된 위치를 담을 배열을 만들어줍니다.

 var allLocations:[Location] = []
 var filteredLocation:[Location] = []

Location 구조체는 아래와 같이 도시와 나라 그리고 나라코드를 프로퍼티로 만들어줍니다.

struct WeatherLocation: {
    var city:String!
    var country:String!
    var countryCode:String!
}

 

그 다음으로 테이블뷰의 윗 부분에 해당되는 UISearchController를 만들어주세요.

 let searchController = UISearchController(searchResultsController: nil)

 

 

그리곤 아래와 같이 setUpSearchController 함수를 만들어서 서치컨트롤러를 세팅해볼게요!

 

제일 먼저 위에서 연결한 테이블뷰의 헤더에 searchController.searchBar를 넣어줍니다.

 

그 다음으로 서치바의 플레이스홀더를 정해주는데요.( 플레이스홀더는 검색하기 전 서치바에 회색글씨로 미리 띄워주는 글자입니다.)

       private func setUpSearchController() {
        
           tableView.tableHeaderView = searchController.searchBar
        
           searchController.searchBar.placeholder = "City or Country"
           searchController.searchResultsUpdater  = self
           searchController.obscuresBackgroundDuringPresentation = false
           searchController.searchBar.searchBarStyle = UISearchBar.Style.prominent
           searchController.searchBar.sizeToFit()
       }

그리고 중요한건 searchResultUpdater인데요. 

 

이것은 사용자가 검색한 값에 따라서 컨텐츠를 업데이트 시켜주는 프로퍼티 입니다.

그리고 obobscuresBackgroundDuringPresentation 가 false로 되어있는데 이건 무엇일까요?

 

애플 문서에 나와있는 내용을 간단하게 해석해보면 

 

"검색 중에 기본 콘텐츠가 가려 지는지 여부를 나타내는 것입니다.

저는 처음엔 이해가 안돼서 한번 true로 해보고 false로도 해보았는데요.

 

왼쪽이 true로 했을때 오른쪽이 false로 했을때 입니다. 이렇게 보니 컨텐츠를 가린다는 말이 바로 이해가 가네요!

 

그 다음으론 서치바의 스타일과 사이즈를 원하시는대로 정해주세요!

---

AddTableViewCell

 

아래와 같이 TableViewCell을 만들어주세요!

class AddTableViewCell: UITableViewCell {

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }
}

---

DataSource

 

이제 테이블뷰의 DataSource를 세팅해볼게요.

 

먼저 numberOfRowsInSection은 필터링된  위치의 갯수만큼 세팅해주시고

 

셀의 위 레이블은 location의 도시이름 아랫 부분은 나라이름으로 설정해줍니다.

  extension AddViewController:UITableViewDataSource {
       func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
           filteredLocation.count
       }
       
       func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
           
           let cell = tableView.dequeueReusableCell(withIdentifier: "AddTableViewCell") as! AddTableViewCell
           
           let location = filteredLocation[indexPath.row]
           cell.textLabel?.text = location.city
           cell.detailTextLabel?.text = location.country
           return cell
       }
   }

그리곤 UISearchResultsUpdating 딜리게이트를 설정해주는데

 

먼저 updateSearchResults는 기본으로 설정되는 메소드입니다.

 

이건 SearchController의 글자가 바뀔때마다 호출되는 함수에요!

 

그러면 글자가 바뀔때마다 filteredContentfilteredContentForSearchText 함수를 호출해주는 것이죠.

 

filteredContentfilteredContentForSearchText 는  검색한 글자를 파라미터로 받아서 

 

그 글자가 포함된 객체를 필터링해서 filteredLocation에 담은 뒤 테이블뷰를 reload시켜주는 역할을 합니다. 

 

그러면 검색한 글자가 포함된 객체들만 필터링된 위치가 담긴 배열에 있겠죠?

   extension AddViewController:UISearchResultsUpdating {
       func filteredContentForSearchText(_ searchText:String){
           filteredLocation = allLocations.filter({ (location) -> Bool in
               return location.city.lowercased().contains(searchText.lowercased()) || location.country.lowercased().contains(searchText.lowercased())
           })
           tableView.reloadData()
       }
       
       func updateSearchResults(for searchController: UISearchController) {
           filteredContentForSearchText(searchController.searchBar.text ?? "")
       }
   }

마지막으로 아래와 같이 저번 시간에 배운 loadLocationFromCSV 함수와 setUpSearchController 함수를 실행시켜주면

       override func viewDidLoad() {
           super.viewDidLoad()
     
           loadLocationsFromCSV()
           setUpSearchController()
         
       }

아래와 같이 도시 이름이나 나라 이름을 검색했을때 필터링된 객체만 띄워주는 테이블뷰를 볼 수 있습니다!!

---

오늘은 이렇게 검색하고 필터링하는 법에 대해서 알아보았는데요.

 

혹시라도 틀린 점이 있거나 궁금하신 사항이 있으시면 댓글로 알려주세요!!