[IOS] AutoLayout으로 현업의 서비스 화면 구성하기

오토 레이아웃을 통해 현 서비스의 앱 화면을 만들면서 작성한 코드를 리뷰하는 글입니다.

---

1. 주문하기 화면

• 탭바의 첫번째 네비게이션 컨트롤러
• 배너 높이를 루트 뷰 높이의 0.2배로 설정
• 음식 카테고리 버튼들을 레이아웃 하기위해 1개의 수직 스택뷰와 4개의 수평 스택뷰 사용
• 수직 스택뷰 상하좌우에 20의 간격을 주어 수직 스택뷰의 너비와 높이 결정
• 수평 스택뷰의 높이를 결정하기 위해 수직 스택뷰 distribution을 fill equally 설정
• 하나의 수평 스택뷰에 4개의 서브뷰(어레인지뷰)가 들어감.
• 수평 스택뷰 distribution을 fill equally로 설정해서 각 서브뷰의 너비 결정
• 수평 스택뷰의 서브뷰들 간의 공간은 (spacing) 20
• 서브뷰(음식 카테고리) 하나의 높이와 너비가 결정됐으므로 서브뷰 내부의 이미지뷰와 버튼을 레이아웃
• 이미지뷰 가로 세로 비율을 1:1로 설정하고 수퍼뷰 상,좌,우와 일치하는 제약 설정
• 버튼의 상,좌,우 역시 이미지뷰와 동일하지만 하단을 이미지뷰 하단보다 20의 간격만큼 떨어지게 설정하고
  버튼의 수직 컨텐츠 정렬을 가장 아래로 설정

좌 : 아이폰 8 플러스, 중앙 : 아이폰 11, 우 : 아이폰 13 프로 맥스

 

2. 선물하기 화면

• 탭바의 두번째 네비게이션 컨트롤러
• 네비게이션 바 아래 6개의 버튼을 담는 스택뷰를 레이아웃
• 각 버튼이 담고 있는 텍스트에 따라 intrinsic size가 다르므로 distribution을 fill proportionally로 설정
• 격자로 이뤄진 뷰를 담는 컨테이너 뷰를 만들고 좌우에 20만큼의 간격을 줘서 너비 결정
• 컨테이너 뷰의 높이를 루트 뷰 높이의 0.55배로 설정 -> 높이 결정
• 좌상단의 첫번째 격자를 기준으로 나머지 격자의 너비와 높이를 비율로 설정
• 각 격자 사이의 간격은 5로 설정하고 3X4의 격자를 레이아웃
• 첫번째 격자의 너비 = (컨테이너 뷰 너비 - 10)/3, 높이 = (컨테이너 뷰 높이 - 15)/4
• 레이블 최소 폰트를 10으로 설정해서 격자 크기가 줄어들어도 한 줄에 다 보일 수 있게 만듦.

좌 : 아이폰 8 플러스, 중앙 : 아이폰 11, 우 : 아이폰 13 프로 맥스

 

3.  쇼핑 화면

• 탭바의 세번째 네비게이션 컨트롤러
• 뷰를 크게 2가지 영역으로 나누고 사이 간격을 10으로 설정
• 영역 하나의 높이 =  (SafeArea의 높이 - 10) / 2
• 첫번째 영역에는 버튼 스택뷰, 배너, 나의 쇼핑 정보를 레이아웃하기 위해 하나의 컨테이너 뷰를 생성
• 각 서브뷰의 높이를 컨테이너 뷰 높이의 0.25, 0.6, 0.15배로 설정
• 스택뷰 버튼에 Symbol Configuration을 설정하고 상하좌우에 Cotent Inset을 줘서 고유 사이즈를 키움
• 두번째 영역에 가게 정보, 가게 라이브 뷰, 광고 버튼을 레이아웃 하기 위해 컨테이너 뷰 생성
• 각 서브뷰 높이를 컨테이너 뷰 높이의 0.2, 0.7, 0.1배로 설정 (라이브 영상이 주 컨텐츠이므로)

좌 : 아이폰 8 플러스, 중앙 : 아이폰 11, 우 : 아이폰 13 프로 맥스

 

4. 멤버십 화면

• 탭바의 네번째 네비게이션 컨트롤러
• 네비게이션 바 하단에 세그먼트 배치
• 카드들을 담는 컨테이너 뷰를 생성해서 그 안에 3개의 카드 뷰를 레이아웃
• 컨테이너 뷰 상좌우에 20, 하에 80의 간격을 설정해서 너비와 높이를 결정
• 카드가 겹친 상태를 표현하기 위해 아래에 놓인 카드의 top = 위에 놓인 카드의 bottom - 30 의 제약 설정
• 카드가 겹친 영역의 높이가 30이므로 카드 뷰 하나의 높이 = (컨테이너 뷰 높이 + 60) / 3
• 따라서 카드뷰의 너비와 높이가 결정되고 그 안에 레이블을 레이아웃
• 입체적인 느낌을 위해 카드뷰의 레이어에 그림자와 둥근 모서리 효과 추가

 

좌 : 아이폰 8 플러스, 중앙 : 아이폰 11, 우 : 아이폰 13 프로 맥스

 

---

전체 코드 : https://github.com/Lieutenant-K/SesacIOS-Delivery.git

GitHub - Lieutenant-K/SesacIOS-Delivery