📱 실제 요기요 앱 메인 화면
📱 요기요 앱 메인 프론트 구성 결과
iPhone 13 Pro max
iPhone 8
사용된 UI 컴포넌트
일단 간략히 보면 아래와 같다.
이 중 주요 컴포넌트를 설명해보자면
UIScrollView 사용
- UIScrollView 선택 이유 : 화면 크기를 넘어갈 정도로 입력할 내용물이 많아서 스크롤이 필요한 경우에 사용
UIView 사용
- UIView 선택 이유 : UINavigation Controller를 대체하여 스크롤시 사라지지 않고 상단에 고정시키기 위해 (대체 이유는 이후에 설명)
스크롤 뷰 안에 UIView 넣어줌
- UIView 사용 이유 : 스크롤뷰 안에 보여질 내용물들을 담기위한 컨텐츠 영역으로 사용.
UITabbar Controller 사용
UIStackView 사용
그 외
- UITextView
- UIButton
- UIImageView
💡 이슈 및 해결
Issue 1) UINavigation Controller의 center에 버튼 배치 불가
스크롤을 할 경우에도 상단바가 함께 올라가지 않는 것을 구현하기 위해 UINavigation Controller를 사용하려고 했으나
아래와 같이 기본 Navigation Bar의 center에는 버튼을 넣을 수 없음
Solve
상단바 부분을 UIView로 대체해주었다.
이때 스크롤 시 UIView가 함께 올라가서 사라지지 않도록 UIScrollView와 분리시켜주어야한다!
Issue 2) 스택 내부 요소의 constraints
처음에 스택 내부 요소에도 각각 safe area에 trailing과 leading을 걸어주었더니
이렇게 스택 내부 요소끼리 겹치는 상황 발생
solve
이렇게 자신과 가까운 쪽에만 constraint를 걸어주어 해결
Issue 3) Aspect Ratio로 인한 에러
Vertical Stack View 내부에 Horizontal Stack View를 넣어서 collection view처럼 표현을 하려고 했으나 Horizontal Stack View들 사이에 공간이 크게 발생함
solve
처음 constraints를 설정 시 잘못된 비율로 Aspect Ratio를 잡아두어서 발생.
잘못된 Aspect Ratio를 삭제하여 해결
Issue 4) 스택에서 distribution 설정 에러
13 pro max에서 실행 시 메뉴 스택이 비율이 맞지 않았음 (가운데에 작게 나왔음)
solve
각 horizontal stack의 distribution을 fill equally로 설정!!!!
Hello, World!