Toy Project/Netflix Style Application(iOS)

8. Player View 가로모드 구현

개발자킹콩 2021. 5. 1. 12:39

 

swift 11.4 버전 부터 simulator에서 Rotate 기능이 생겼다.

Cmd + 방향키 로도 방향을 바꿀 수 있다. 

Netflix의 경우 동영상을 재생할때 알아서 가로모드로 바꾼다.

 

 

가로 Landscape, Horizontally

세로 portrait, vertical

 

 

실제 보여지는 화면은 이렇기에 Landscape(가로)로 미리 지정한다.

 

 

 

 


 

 

 

Delegate

 

 

이제 CollectionView에서 cell을 클릭했을 때 영상이 재생되도록 하는 것이다.

collectionView의 Delegate를 구현하면 된다.

 

 

 


 

 

 

 

 

storyboard의 customClass와 identity를 PlayerViewController로 지정한다.

그럼 이제 SearchViewControllerDelegate에서 Player.storyboard와 PlayerViewController을 불러올 수 있게 된다.

 

 

 


 

 

 

이렇게 SearchVC에서 PlayerStoryboard와 PlayerVC를 불러와서 데이터를 넣어주고 present를 호출할 것인데 여기에는 문제가 하나 존재한다.

 

 

 

 


 

 

 

 

문제??

 

 

 

Player 화면이 전체화면이 아니라는 것이다. 

 

 

우리는 전체화면을 바란다. present의 모델 스타일을 변경시키면 된다.

 

 

이렇게 FullScreen이 되었음을 확인할 수 있다. 

여기서 중요한 것은 아래에 있는 선이다. 이를 기준으로 현재 모드가 어떤 모드인지를 나타내는 것이다.

 

 

 


 

 

 

이러한 가로 세로 모드를 관리할 수 있는데 이는 supportedInterfaceOrientations에서 관리한다.

.landscapeRight는 PlayerViewController를 실행해서 PlayerStoryboard가 실제 화면에 보여질 것이고 이때 오른쪽 가로형태로 바꾸는 것을 의미한다. 실제 넷플릭스는 한쪽 가로모드만 가능하다.

참고로 여기서 .landscape를 하게되면 양쪽이 모두 가능하다. 가로 세로 모드를 바꿀때는 supportedInterfaceOrientations로 UIInterfaceOrientationsMask를 바꿔준다는 것을 기억하자.

 

 

 


 

 

 

 

Background를 black으로 설정하고 다음 글에서 영상 재생에 관해 구현할 것이다.