iOS) 스토리보드 없이 레이아웃 그리기 연습 & 공유기능 구현 예제 (2)

 

다음은 앱 탭의 UI를 구성해보겠습니다.

UINavigationController 인베디드

우선 앱 뷰컨트롤러 파일을 만들고 클래스를 구현합니다.

 

UINavigationBar가 필요하기때문에 AppViewController는 UINavigationController에 인베디드 되어야합니다.

 

 

 

앱 뷰 컨트롤러에는 세가지 이상의 UI컴포넌트를 사용합니다.

아래와 같이 UI스크롤뷰에 스택뷰가 AddSubView했을때 장점은 

UI스택뷰는 서브뷰에 의해서 높이가 정해지기때문에 높이 변동이 생겨도 자동적으로 스택뷰도 늘어나기에 따로 계산할 필요가 없습니다.

 

임시로 스택뷰에 컴포넌트를 추가해주고 테스트 해보겠습니다.

 

Feature Section의 UICollectionView 구현하기

 

 

 

 

이제 파란 부분의 커스텀 셀을 만들어보겠습니다.

 

이제 커스텀셀을 등록합니다.

 

컬렉션뷰의 세퍼레이트를 구현하겠습니다.

클래스를 새롭게 만듭니다.

 

 

 

다음은 랭킹피쳐를 구현하겠습니다.

상단의 UILable과 모두보기 버튼의 헤더가 될 수 있지만 번거로움이 존재해서 UICollection뷰와 동등한 객체로 구현.

Ranking Feature Section의 UICollectionView 구현.

클래스를 생성합니다.

이번에도 separator를 만들어줍니다.

그리고 레이아웃을 설정합니다.

메소드 들을 레이아웃을 init메소드에서 불러주어야함. 자주 까먹음 주의

 

이제 임시로 지정한 백그라운드 컬러들은 삭제해줍니다.

 

이번엔 랭킹피쳐 안의 커스텀셀을 만들겠습니다.

 

 

 

 

 

하단의 마지막 컴포넌트인 코드교환 버튼이 있는 섹션을 구현하겠습니다.

밑에 여유를 주기 위해서 SpacingView를 구현하겠습니다.