[Swift] 넷플릭스 화면 따라만들기 (1)

넷플릭스 화면 따라만들기 (1)

(두둥~... 소리가 음성지원 되는 듯하다...)

출근러, 통학러들에게 필수인 넷플릭스 어플! 콘텐츠의 집합체인 넷플릭스를 모르는 사람은 없을 것이다. 사용할 때는 영상을 찾아서 플레이하는 것을 간단하게 생각하였으나, 그 기능을 만들기 위해 필요한 요소들에 대해 학습해볼 것이다. 먼저 넷플릭스를 구성하는 기능들 중 “서치 페이지”와 “플레이어”를 구현해 볼 것이다. 플레이어의 경우 실제 서버에 있는 영상을 스트리밍하여 재생할 수 있도록 해볼 것이다!

먼저 서치 바(searchBar)를 만들어 보자.

XCode내 우측 [+] 버튼을 눌러 “search bar”를 검색하여 추가한다.

알맞게 가져다 넣은 후, View와 Leading/Trailing/top 오토레이아웃을 해준다.

위에 사진처럼 searchBar가 위치하게 된 것을 볼 수 있다. 

그리고 검색 결과를 나타내기 위한 Collection View를 검색하여 추가한다.

추가한 후 마찬가지로 View와 Leading/Trailing/bottom 오토레이아웃을 해주고, search bar와 vertical spacing 해준다. (option 누르고 오토레이아웃 하고자 하는 대상을 클릭한 후 기준으로 삼을(view,search bar) 항목으로 끌어다 놓으면 된다.)

Collection View가 잘 입력된 것을 볼 수 있다.

그리고 searchBar를 View Component에 연결해준다. (ctrl + 클릭 후 코드입력란으로 드롭)
또한 검색결과를 나타내는 Collection View도 추가적으로 연결해준다.

그리고 search bar에서 일어나는 결과들 View Controller에게 위임 시켜서,해당되는 일들을 View Controller에서 담당하라고 할 것이다. ctrl + search Bar를 View Controller에 연결하여 delegate pattern을 부여해준다.

연결 후, UISearchBarDelegate 프로토콜을 이용하여 searchBar와 관련된 메서드/함수를 구현할 것이다.

먼저 searchBar에 검색했을 때 그 검색어를 출력해보자.

searchBar.text를 통해 입력된 값을 뽑아낼 수 있다.

실제로 입력을 하게 되면 아래와 같은 반환값을 얻게 된다.

데이터 타입을 보면 Optional임을 확인할 수 있다. 

왜 Optional일까 하니 입력값 자체가 없을 수도 있기에 Optional로 처리된 것을 알아챌 수 있다.

이에 Optional이 아닌 실제 입력된 값을 얻기 위해서는 옵셔널 바인딩을 통해 언래핑 해주어야 한다.

검색어가 있는지 확인해보고, 비어있는지 확인을 하고 출력해준다.

이제는 Optional이 아닌 입력한 문자열 그대로 반환할 수 있게 된다.

추가적으로, 검색을 완료하면 결과를 보기 위해서 키보드가 내려가야 한다.
검색 결과가 짧을 경우 크게 상관 없겠지만, 반환되는 값들이 많아 화면을 가득 채우게 된다면 떠있는 키보드는 그저 방해물이 되는 것이다. 

이에 키보드를 자동적으로 내리기 위해 resignFirstResponder() 메서드를 사용한다.

searchBar에 메서드로 사용하여, 검색 후 "이제 키보드가 첫 번째 리스폰더가 아니니 기능을 중지해라" 라는 의미를 가지고 있다. 

이에 키보드가 올라오는 것이 첫 응답이니, resignFirstResponder를 통해 검색 후 키보드를 자동적으로 내릴 수 있다.

** 패스트캠퍼스 iOS 앱 개발 올인원 패키지 : 넷플릭스