[iOS/Swift] UISearchBar를 활용한 검색 기능 개발

안녕하세요. 애플망고입니다😊

이번 포스팅은 UISearchBar에 대해 정리해보겠습니다.

 
 

UISearchBar

UISearchBar는 사용자로부터 검색 정보를 받기 위한 특수화 된 뷰인데요. 이 뷰는 iOS에서 기본적으로 제공되는 UI 요소로, 검색 인터페이스를 간단하게 구현할 수 있도록 도와줍니다. 저는 UICollectionView와 함께 사용했고, 특정 데이터를 필터링하는데 사용하였습니다.

 
 

UISearchBar 추가하기

private let searchBar = UISearchBar()

...

private func setupSearchBar() {
    searchBar.delegate = self
    searchBar.placeholder = "그룹 이름을 입력해주세요."
    searchBar.backgroundImage = UIImage() // border line 제거
    view.addSubview(searchBar)
}

// Auto Layout 설정

navigationItem.titleView = searchBar 를 사용하면 따로 레이아웃 잡아 줄 필요없이 네비게이션 바의 중앙에 UISearchBar가 표시됩니다. 저는 원하는 위치에 넣고 싶어서 저 방식을 선택했습니다. 그리고 몇가지 설정을 해주었는데요.

 

border line 제거

기본적으로 UISearchBar에는 상단과 하단에 경계선(border line)이 포함되어 있습니다. 이를 제거하기 위해 backgroundImage를 빈 이미지(UIImage())로 설정했습니다. 이 코드를 추가해주면 border line이 제거가 됩니다.

searchBar.backgroundImage = UIImage()

 
 

UISearchBarDelegate

사용자가 입력한 Text를 감지해 Cell을 표시하고 싶어서 UISearchBarDelegate도 사용해주었습니다.

메서드	설명
func searchBar(UISearchBar, textDidChange: String)	텍스트가 변경될 때마다 호출
func searchBarSearchButtonClicked(UISearchBar)	검색 버튼을 눌렀을 때 호출
func searchBarCancelButtonClicked(UISearchBar)	취소 버튼을 눌렀을 때 호출
func searchBarTextDidBeginEditing(UISearchBar)	검색창 편집이 시작될 때 호출
func searchBarTextDidEndEditing(UISearchBar)	검색창 편집이 끝날 때 호출

 

textDidChange

func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
    guard let text = searchBar.text else { return }
    viewModel.searchWords(text: text)
}

textDidChange메서드를 통해 사용자가 검색창에 텍스트를 입력할 때마다 단어를 검색하는 함수를 호출해주었습니다.

 

searchBarSearchButtonClicked

func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
    guard let text = searchBar.text else { return }
    viewModel.searchWords(text: text)
    searchBar.resignFirstResponder()
}

searchBarSearchButtonClicked 메서드를 통해 검색 버튼을 클릭했을때도 똑같이 단어를 검색하는 함수를 호출했습니다. 검색이 끝난 상태이기 때문에 searchBar.resignFirstResponder()를 통해 키보드도 내려주었습니다.

 

searchBarCancelButtonClicked

func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
    searchBar.text = ""
    viewModel.fetchWords()
    searchBar.resignFirstResponder()
}

searchBarCancelButtonClicked 메서드를 통해 취소 버튼을 클릭했을때는 다시 모든 Cell을 불러왔습니다. 마찬가지로 키보드도 내려주었습니다. 이때 취소버튼은 searchBarTextDidBeginEditing과 searchBarTextDidEndEditing을 통해 검색이 시작됐을때 생기고, 끝났을때 없애주었는데요.

 

private func customizeCancelButton(_ searchBar: UISearchBar) {
    if let cancelButton = searchBar.value(forKey: "cancelButton") as? UIButton {
        cancelButton.setTitle("취소", for: .normal)
        cancelButton.setTitleColor(.gray, for: .normal)
        cancelButton.titleLabel?.font = UIFont.systemFont(ofSize: 16)
    }
}

먼저 기본으로 제공되는 cancel버튼이 마음에 들지 않아서 커스텀해주었습니다.

 

searchBarTextDidBeginEditing

func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
    searchBar.showsCancelButton = true
    customizeCancelButton(searchBar)
}

searchBarTextDidBeginEditing 메서드를 통해 입력이 시작될때 showsCancelButton을 true로 바꿔주었고 cancel버튼도 바꿔주었습니다.

 

searchBarTextDidEndEditing

func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
    searchBar.showsCancelButton = false
}

searchBarTextDidBeginEditing 메서드를 통해 입력이 끝났을때 다시 showsCancelButton을 false로 변경해주었습니다.

 
 

공식 문서 링크

UISearchBar | Apple Developer Documentation

 

UISearchBarDelegate | Apple Developer Documentation