[iOS] SnapKit 사용해보기, Preview Provider

예제 코드 링크 : https://github.com/eigen98/TIL/tree/master/Today-I-Learned-main/IOS/NetflixSnapKit

Storyboard없이 ui를 구성해보려 합니다.

우선 스토리보드와 뷰 컨트롤러를 지워줍니다.

그대로 빌드하면 위와 같은 오류가 나오네요. 설정이 필요할 것 같아요.

우리가 만든 뷰 컨트롤러로 시작할 수 있도록 하겠습니다.

TARGETS -> Info

storyboard Name을 삭제 해줍니다.

이제 샘플 앱의 뷰 컨트롤러를 추가합니다.

이제 이 뷰 컨트롤러를 인지하고 띄울 수 있도록 SceneDelegate에서 설정합니다.

SnapKit을 사용하기 위해서 Swift Package Manager를 통해 추가해줄 것입니다.

Swift Package Manager는 아래 +버튼을 누르면 이용가능합니다.

 

위와 같이 추가해줄 수 있게됩니다. 참고로 스냅킷 주소는 스냅킷 깃허브에 가시면 찾을 수 있습니다.

이제 자동적으로 좌측 메뉴에서 스냅킷이 깔린 것을 확인할 수 있습니다.

 

네비게이션 설정

다음으로 저는 강의 자료에서 제공되는 컨텐츠 plist를 가져왔습니다.

여러가지 배열의 형태를 가지고 있는 것을 알 수 있습니다.

섹션타입 , 섹션 네임 등이 있는 것이 보입니다.

item 들을 섹션으로 두고

각각 섹션이 가지는 컨텐츠 아이템의 배열을 로우로 둘것입니다.

 

파일을 만들어서 이 컨텐츠를 가져올 수 있도록 할 것입니다.

구조체를 만들어줍니다.

읽기작업이 필요하므로 디코더블 타입으로 구조체를 만들어줍니다.

컨트롤러로 돌아와서 컨텐츠를 가져올 함수와 변수를 만들어줍니다.

홈 뷰 컨트롤러 데이터 소스와 딜리게이트를 설정합니다.

베이직 역할을 할 작은 셀을 만들어줍니다. 새파일을 만들고 컨텐츠 컬렉션 뷰 셀이라고 이름을 정합니다.

셀의 오토레이아웃을 설정할 때 스냅킷을 사용합니다.

이제 셀을 만들었으니 컨트롤러에 셀을 등록합니다.

다음은 헤더를 만들어줍니다.

새파일을 만들고 컨텐츠 컬렉션 뷰 헤더로 이름을 정했습니다.

마찬가지로 셀의 오토레이아웃을 스냅킷을 통해 설정합니다.

위에서 셀을 등록했던 과정을 똑같이 거치는데 헤더이므로 헤더타입인 것을 알려주도록합니다.

기본 UI설정은 이정도로 끝이 납니다.

 

배너 구현하기를 시작합니다.

여기서 스위프트 UI 프리뷰 를 추가할 것입니다.

컬렉션뷰 같은 복잡한 레이아웃을 개발할때는 수시로 시뮬레이터를 돌리게 됩니다.

이러한 고충을 덜어줄 수 있는 프리뷰프로바이더를 이용하면 편하다고 합니다. 다만 Swift UI에서 제공하기에 조금 생소한 코드일 수도 있고

UIKIT을 이용해서 작성하고있기에 미리보기 용도로만 사용할 것입니다. 프리뷰를 볼 수 있다 정도로만 이해하면 좋을 것 같습니다.

홈 뷰 컨트롤러를 미리보기 할 것입니다.

우선 스위프트 UI를 추가합니다.

아래로 가서 다음 코드를 작성하면 미리보기 화면이 우측에 나오게됩니다.

아직 데이터를 뿌려주지 않았기에 빈화면입니다. 

이제 기본 컴포지셔널 레이아웃을 설정할것입니다.

지금까지는 베이직과 라지에 해당하는 셀을 만들었지만 베이직 타입의 셀들이 일렬로 가로 스크롤이 되는 형태를 만들어줄것이기에 

그에 맞는 레이아웃을 컴포지셔널 레이아웃을 설정해줄것입니다.

 

 

가장 처음에 컬렉션 뷰 컨트롤러를 만들 때 우리가 이 씬델리게이트에서 그냥 플로우 레이아웃 그냥 아무것도 우리가 설정하지 않은 플로우 레이아웃을 설정해줬지만 실제로 이제 뷰가 커지고 나면 각각의 데이터들을 가져올 거고 그 데이터들에 대한 내용으로 레이아웃을 새로 꾸며주는 거예요. 실제로 우리가 적용하고 싶은 속성을 추가한 거라고 보시면 됩니다.

 

 

 

 

헤더도 별도로 레이아웃을 설정해줍니다.

 

이제 지금까지의 과정을 보기 위해서 섹션의 셀개수를 조금 수정해준 후 미리보기를 보겠습니다.

아래화면처럼 이미지들이 보이는 것을 확인할 수 있습니다.

이제 다음 화면처럼 베이직이 아닌 강조되는 더 큰 화면 같은 경우엔 Large타입의 섹션은 큰 사이즈를 갖도록 별도의 레이아웃 설정을 해주어야합니다.

이렇게 베이직과는 거의 비슷하지만 그룹의 사이즈와 설정만 다르게 Large타입의 섹션을 만들어주는 함수를 선언합니다.



이제 위 함수를 레이아웃 분기처리에 Large를 추가해주면 될 것입니다.

이렇게하면 이제 라지타입 그룹의 셀이 설정한 크기대로 나오는 것을 알 수 있습니다.

다음은 랭크 셀을 만들어줄 것입니다. 

아래와 같이 포스터 이미지뿐 아니라 순위표시까지 같이 나오고 있는 셀입니다

 

 

마지막으로 이 랭크도 레이아웃을 가질 수 있도록 섹션 레이아웃을 별도로 만들어줄것임.

 

섹션 레이아웃또한 레이아웃 분기점에 추가합니다.

프리뷰에 표시하기위해 해당 코드를 추가합니다.

그럼 아래 이미지처럼 순위가 표시되는 배너를 볼 수 있습니다.

이렇게 배너를 완성하였습니다.

 

 

이제 두가지 스택뷰를 이용해 메인셀을 만들어 볼것인데요. 

메뉴 스택뷰(TV프로그램 , 영화, 카테고리)와 베이스 스택뷰(이미지뷰, descriptionLabel, contentStackView)로 구성할 것입니다.

우선 새 파일을 만듭니다.

 

 

이제 설정한 메인셀을 컬렉션뷰에 등록시킵니다.

뷰 컨트롤러로 가서

이제 컨텐츠 아이템들중 하나만 랜덤으로 메인셀에 표시하겠습니다.

메인셀을 셀 설정에 추가해줍니다.

이제 메인셀에 맞는 레이아웃을 설정해줍니다

이제 이 함수를 레이아웃 함수에 분기에 추가합니다.

임의로 테스트를 위해 셀 개수설정에 추가해둔 조건문도 없애줍니다.