[TIL] UISearchBar

UISearchBar

---

• 검색 기능을 제공할 때 자주 사용되는 UI 컴포넌트
• 사용자가 텍스트를 입력해 리스트나 콘텐츠를 검색할 수 있도록 도와주는 입력창
• 예: 연락처 앱에서 이름 검색, 앱스토어에서 앱 검색 등

구성 요소

• 단순한 텍스트 입력창이 아니라 다양한 기능이 내장되어 있음.
• 🔍 검색 아이콘: 왼쪽에 있는 돋보기 아이콘
• ✏️ 텍스트 필드: 사용자가 입력하는 부분
• 🗑 지우기 버튼: 텍스트 필드에 한 글자라도 입력하면 오른쪽에 나타나는 X 모양 버튼 (검색어 한 번에 지움)
• ❌ 취소 버튼 (선택): 검색창을 눌러 키보드가 활성화되었을 때 나타나는 버튼 (취소 버튼을 눌러 검색 종료)
• 🔽 scope bar (선택): 검색 범위를 더 좁힐 수 있도록 도와주는 버튼 그룹 (예: 제목, 내용, 작성자 등)

사용 방법

1. 생성 및 설정

let searchBar = UISearchBar()
searchBar.placeholder = "검색어를 입력하세요"
searchBar.delegate = self
searchBar.searchBarStyle = .minimal // 혹은 searchBar.backgroundImage = UIImage()

• placeholder: 회색 안내 텍스트
• delegate: 이벤트 처리를 위한 연결
• 기본적으로 상단과 하단에 경계선(border line)이 포함되어 있음.
  → 이를 제거하기 위해서는 searchBarStyle 혹은 backgroundImage 활용하면 제거 가능

2. UISearchBarDelegate의 주요 메서드

extension ViewController: UISearchBarDelegate {
	// 텍스트가 변경될 때마다 호출(사용자가 입력할 때마다)
    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
	//...
    }
    
    // 검색 버튼을 눌렀을 때 호출
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        searchBar.resignFirstResponder()  // 키보드 내리기
    }
    
    // 취소 버튼을 눌렀을 때 호출
    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        searchBar.text = ""
        searchBar.resignFirstResponder()
    }
    
    // 검색창 편집이 시작될 때 호출(검색창이 선택됐을 때)
    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
    	searchBar.showsCancelButton = true  // 취소 버튼 표시
	}
    
    // 검색창 편집이 끝날 때 호출(검색창이 닫혔을 때)
    func searchBarTextDidEndEditing(_ searchBar: UISearchBar) {
    	searchBar.showsCancelButton = false
	}
}

• textDidChange
  • 사용자가 입력하거나 지울 때마다 실시간으로 검색 결과를 보여주고 싶을 때 사용
• searchButtonClicked
  • 사용자가 모두 입력하고 검색 버튼을 눌렀을 때 한 번만 검색 결과를 보여주고 싶을 때 사용
• cancelButtonClicked
  • 검색 모드를 끝내고 싶을 때 사용
  • 보통 키보드 내리고, 원래의 전체 목록을 보여줌
• textDidBeginEditing
  • 검색에 집중할 수 있도록 화면의 모습을 바꿀 때 사용
  • 보통 취소 버튼 표시하고, 최근 검색어 보여줌
• textDidEndEditing
  • 검색 모드로 바꿨던 화면을 원래 상태로 되돌릴 때 사용
  • 보통 취소 버튼 숨기고, 원래 목록 보여줌