[28일차] SearchBar와 키보드 숨김 처리

넷플릭스 앱과 비슷한 디자인의 앱을 만들어본다.

콘텐츠 플랫폼 앱에서 대부분 존재하는 검색바(SearchBar)를 추가해보고 키보드 관련 동작을 테스트해보고자 한다.

 

넷플릭스 따라하기 앱

1. 검색 탭으로 이동 + 상단에 검색창(SearchBar)을 추가한다.

검색창 UI 추가

우리들이 보통 사용하는 앱에서는 키워드를 입력 후, [검색] 버튼을 누르면 키보드 화면이 내려가고 검색결과 화면이 나오는 게 일반적이다.

 

하지만, 이러한 처리가 자동으로 되지는 않는다. 키보드를 내려주는 별도의 처리가 필요하다.

 

2. 입력한 검색어를 출력하는 함수 생성 + [검색] 버튼 이후 '키보드' 자동 내리기 처리

출처 : Swift 공식 홈페이지

SearchBar, TextField .. 등등 텍스트를 기재하는 여러 UI 요소에서는 resignFirstResponder() 를 자주 사용하게 될 것이다.

 

* resignFirstResponder 

 : 쉽게 말하자면, 처음의 상태를 포기했다는 것을 의미하는 것으로 '키보드' 선택영역을 포기함으로써 키보드가 자동으로 숨김 처리

< 소스코드 >

import UIKit

class SearchViewController: UIViewController {
    @IBOutlet weak var searchBar: UISearchBar!
    @IBOutlet weak var resultCollectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
}

// 검색바의 다양한 이벤트 처리
extension SearchViewController: UISearchBarDelegate {
    
    private func dismissKeyboard() {
        // 검색바의 현재 상태를 포기했다는 의미로 '키보드 영역' 숨김처리
        searchBar.resignFirstResponder()
    }
        
    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        
        // 검색 시작
        dismissKeyboard()
        
        // 검색어가 있는지
        guard let searchTerm = searchBar.text,
            searchTerm.isEmpty == false else { return }
        
        // 네트워킹을 통한 검색
        
        // 검색버튼이 눌렸을 때, 검색 시작!
        print("--> 검색어 : \(searchTerm)")
    }
    
    
}

 

 

다음 시간은 키워드를 기반으로 네트워크 통신을 통해 검색 결과를 출력해보고자 한다.