[iOS] UISearchController에 대해 - HoonIOS

안녕하세요, HoonIOS입니다.

 

앱 개발 스터디를 통해서 팀원들과 part별로 나누어서 앱 개발을 하고 있는데 여러 UI 기능을 구현을 하다. 

SearchBar을 처음 구현을 해봤는데 이것을 정리하면 좋을꺼 같아 글을 적게 되었습니다.

 

iOS에서 SearchBar을 구현하는 방법은 2가지가 있습니다.

 

1. UISearchBar
2. UISearchController

 UISearchBar

애플 문서에서는 사용자로부터 검색 연관된 정보를 받기 위한 특별한 뷰라고 설명이 되어있습니다.

 

UISearchBar는 entering text, 검색 버튼, 북마크 버튼, 취소 버튼을 제공합니다.

 

이 UISearchBar을 그냥 구현을 하면 쌩 날것 그대로는 검색기능을 수행하지 않습니다. 즉, UISearchBarDelegate 프로토콜을 사용해서 유저가 텍스트를 쓰고 엔터를 치거나 버튼을 클릭했을 때 동작을 하게 구현해줍니다.

 

또 다른 특징으로 SearchBar의 모양을 한번에 한 번씩 커스텀을 해서 커스텀해주거나 appearance프록시를 사용해서 앱에 있는 모든 서치바의 외형을 일괄적으로 커스텀할수 있습니다.

마찬가지로 프로퍼티가 bar metrics에 프로퍼티가 의존적일때 개발자는 UIBarMetricsDefault값을 사용할 수 있습니다.

(음.... 공식문서에서 나온부분인데 찾아봐도 무슨 내용인지 모르겠네요..ㅠㅠ 혹시 아시는 분 있으면 댓글 남겨주시면 감사하겠습니다. )

 

 UISearchController

애플 문서에서는 검색창과 상호작용하는것을 베이스로 검색 결과를 보여주는 것을 관리하는 뷰 컨트롤러라고 설명이 되어 있습니다.

 

이 SearchBar는 iOS8이후로 새로 등장한 UISearchController입니다.

 

UISearchBar와 함께 사용자와 상호작용을 할때 searchController는 검색 결과 컨트롤러를 통해 검색 결과를 표시합니다. 

 

UISearchController클래스의 initalize을 보시면 init(searchResultsController:)가 있습니다.

공식문서에서 한번 살펴 볼까요?

search Result를 두 번째 뷰 컨트롤러를 통해 검색 결과를 보여주려고 할 때 init(searchResultsController:)에 해주면 됩니다. 

이렇게 해주면 사용자가 searchBar와 함께 상호작용을 할 때 searchController는 자동적으로 결과 컨트롤러를 통해 결괏값을 보여줍니다.

 

이번 구현에서는 UISearchController를 통해서 SearchBar를 구현했는데요, 한번 구현 방법에 대해 살펴보겠습니다.

 

 UISearchController 구현하기

 

우선 저는 programmically형식을 기반으로 코드를 구현하려고 합니다. :)

 

결과를 먼저 살펴보면 우선 아래와 같은 SearchBar을 구현을 하겠습니다.

 

searchBar을 구현하고 검색을 하면 해당 인덱스 값들이 일괄적으로 나오게 하겠습니다.

 

1. 제일 먼저 스토리보드에 사용할 뷰 컨트롤러를 추가해주고 내비게이션 컨트롤러를 emeded in 해주겠습니다.

 

2. VC를 만들어줘서 해당 뷰 컨트롤러와 연결해주겠습니다.

 

* 설명

• 저는 여기서 searchBarViewController로 커스텀 뷰 컨트롤러를 만들어주겠습니다.

  tableView를 먼저 만들어주고 searchBar을 만들어주겠습니다.

 

3. 사용할 테이블 뷰를 프로퍼티로 선언해 주겠습니다.

 

* 설명

• tableView의 테이블 뷰 관련 변수를 클래스 내에서 어디서든 접근을 할 수 있게 클래스의 지역변수로 지정해주겠습니다.

4. maketableView()이라는 함수를 정의해주겠습니다.

 

 

5. UItableView를 설정해주고 추가를 해주겠습니다.

 

* 설명

• 클래스의 지역변수로 지정해주었던 talbeView에 UITableView() 객체를 넣어 줍니다.
  
  
• 우선 여기서는 보여주기만 하면 되기 때문에 delegate 말고 dataSource만 지정을 해주겠습니다. 
  
  
• .register(UITableViewCell.self, forCellReuseIdentifier: "mountinCell")은 programmically로 UITableView의 셀을 지정해주는 방식으로 Cell을 커스텀하지 않았으므로 UITableViewCell.self의 매개변수값을 지정해 주었고 forCellReuseIdentifier를 통해 테이블 뷰 셀의 identifier을 mointinCell로 지정을 해준 것입니다.

6. UITableView의 레이아웃을 설정해주겠습니다.

 

* 설명

• 제일 첫 번째 코드에서. translatesAutoresizingMaskIntoConstraints은 기본적으로 설정되어 있는 레이아웃을 사용할 것인지 아닌지 설정하는 것입니다. 
  
  레이아웃을 수동으로 설정을 해줄 거면 false로 지정을 해줘야 합니다.
• NSLayoutConstraint의 매개변수를 한번 살펴보면 item은 뷰의 왼쪽 제약 조건, attribute는 왼쪽 뷰의 제약조건 방향, relatedBy는 왼쪽 사이드와 오른쪽 사이드의 제약조건 형태의 관계를 나타나는 것으로 NSLayoutConstraint.Relation 의 열거형 값, toItem: 뷰의 오른쪽 제약 조건 attribute는 오른쪽 뷰의 제약조건 방향, multiplier는 attribute 첫 번째 값과 attrubute 두 번째값에서 얻은값과 해당값을 곱하도록 하는 값입니다. constant는 attrubute 첫번째 값이 attribute 두번째 값에 추가하는 값을 나타냅니다.
  
  이렇게 위아래 오른쪽 왼쪽을 다 설정해 줬습니다.

7. makeSearchBar()이라는 함수를 정의해주겠습니다.

 

 

8. 이 함수 내에 UISearchController을 정의해주겠습니다.

 

* 설명

• UISearchController객체를 만들어주고 간단하게. placholder을 설정해 줍니다.
• . obscureBackgroundDuringPresentation은 서치 바로 최초 응답자가 가게 되면은 나머지 뷰들을 어둡게 하거나 그렇지 않게 하거나 설정을 해주는 것인데 true면 어두워지고 false면 밝아집니다. 한번 비교해보겠습니다.

• . searchResultUpdater는  UISearchResultsUpdating프로토콜의 델리게이트 패턴을 설정해 준 것입니다. 해당 이벤트는 나의 객체에게 알려줘라는 말이죠 ㅎㅎ

9. navigationItem의 속성을 설정하고 설정한 searchController을 넣어주겠습니다.

 

* 설명

• navigationItem의. hideSearchBarWhenScrolling property는 스크롤을 할 때 searchBar부분을 계속 유지 시킬건지 hide를 할지 정해주는 것입니다.
  true값을 넣어주면 스크롤을 할 때 searchBar을 숨겨주고 false값을 넣어주면 스크롤을 해도 보이게 됩니다.
• 이 포스팅의 핵심은 이 부분입니다. UISearchController는 navigationItem의 searchController에 넣어줘야 하는 것입니다.
  따라서 아까 설정해준 searchController객체를 여기다가 넣어줬습니다.
• self.navigationController?.navigationBar.prefersLargeTitles는  navigationItem.title의 부분을 큰 글자로 넣어준 것입니다. 아래 그림을 보면. prefersLargeTitles 부분을 true로 넣어준 것입니다.

이제 큰 틀은 다 만들었습니다. 이제 검색을 할 때마다 해당하는 값이 나오게 구현을 해주겠습니다.

 

10. UISearchResultsUpdating을 구현해주고 updateSearchResults 함수를 구현해주겠습니다.

 

* 설명

• 이 메서드는 서치바에서 검색을 할때마다 메서드가 실행되게 됩니다.

11. 해당 메서드 안을 구현해주겠습니다. 텍스트를 입력할 때마다 해당하는 text를 가져오겠습니다.

 

* 설명

• data는 데이터 모델이고 items는 해당 배열 안에 들어갈 값들을 나타낸 배열입니다. 
• . localizedCaseInsensitiveContains(text)를 통해 searchBar에 있는 text를 한 단어별로 값을 읽어오게 됩니다. 
  여기서 filterValue배열은 단어로 filter 한 결과를 나타냅니다.

12. 이제 tableView의 DataSource의 메서드를 구현해주겠습니다.

 

* 설명

• 여기서 isFiltering변수는 Bool형 변수로 새로 정의한 값입니다.

- searchController가 active 중이고 text가 비어있지 않으면 true를 반환하고 그렇지 않으면 false를 반환합니다.

• 이제 해당 메서드의. isFiltering을 보겠습니다. 만약 text가 편집이 되면 filterValue를 반환하고 그렇지 않으면 전체 값을 나타내야 하기 때문에 items.count를 반환하게 만들어 줘야 합니다.

13. tableView의 cellforRowAt을 구현하겠습니다.

 

* 설명

• 여기서는. isFiltering만 보겠습니다.
  앞에서 설명한 것처럼. isFiltering을 통해 만약 편집 중이라면 filterValue를 구현해주고 그렇지 않으면 전체 값이 나올 수 있게. items배열을 return 해주면 됩니다.

 

이렇게 UISearchController에 대해 알아봤습니다. 저도 이번 구현을 통해 처음 접해 본거라 공부한 부분을 포스팅해봤습니다.

 

추후 추가되는 내용이 있으면 추가 포스팅하겠습니다.