7주차_iOS 앱 개발 숙련_3~4일차_Standard반 AutoLayout_TIL

---

---

<TIL>
어제는 국회의원 선거일이라 내배캠 쉬는 날이었다.😃
(3~4일차 라고 제목 적은 이유)

이번 주차 개인과제 '위시 리스트 만들기'는 지난 게시글에 올린 내용에서
아직 추가적인 공부는 못했다.
(내일 이어서 할 예정!!)

수요일에 원래 있던 스탠다드반 수업이 목요일로 옮겨져서
오늘은 스탠다드반 사전과제를 했다.
사전과제는 1주차때 진행했던 오토레이아웃 잡기였다.

사전과제는 수업 전에 다 완료해서,
수업을 들으면서 한 번 더 복습하는 시간을 가졌다.
그리고 수업이 끝나고나서 해당 셀을 테이블뷰와 연결하여
빌드 후 실행했을 때 레이아웃이 망가지는 부분이 있어서 수정했다!
그리고 실제 앱에 있는 탭바를 추가해봤다.

우선, 아래에 사전과제 내용을 적은 후
직접 실습한 내용을 정리할 예정이다!

 

---

---

Standard반 3주차 사전과제

---

1. 앱 스토어

 

2. 당근마켓

3. 카카오톡 프로필

---

사전과제 실습 내용
(+추가 실습)

---

---

<Main.Storyboard UI>

1. 상단에 searchBar 넣기
2. mainStoryboard에 TableView를 넣기
3. 왼오위아래 constraints 0으로 잡아주기
4. Prototype Cells 1로 설정
5. Cell Identifier 설정

(하단 Tab Bar는 밑에서 다시 정리할 예정)

---

1. 앱 스토어

완성 화면

사전과제 요구사항대로 위와 같이
appStoreTableViewCell을 따로 xib 파일로 만들어서 실습을 진행했다.

왼쪽을 보면 알 수 있듯 StackView를 활용하여 오토레이아웃을 잡았다.

①
제일 상단에 imageView와 Label 2개 그리고 button을 StackView로 묶었다.
(Label 2개를 먼저 StackView Asis를 Vertical로 묶은 후,
imageView & StackView(Label 2개) & button 을 Horizontal로 묶으면 된다.)

- imageView는 Aspect Ratio를 1:1 해주기
- 전체 StackView Constraints 잡아주기 (top, leading, trailing)
- 버튼은 Style은 Gray, Background Configuration에서 Corner Style을 Capsule

②
중간에 별점 표시는 imageView 5개와 Label, imageView와 Label, imageView와 Label
이렇게 각각 StackView로 묶고, StackView 3개를 한 번에 또 StackView로 묶어주었다.

- 전체 StackView Distribution은 Fill Equllay
- 전체 StackView Spacing 20
- 각각의 StackVeiw Alignment Center, Distribution Fill
- 마찬가지로 오토레이아웃 잡아주기
(leading, trailing, bottom, top)

③
마지막 부분은 imageView 3개를 Horizontal StackView로 묶어주었다.

- 마찬가지로 오토레아아웃 잡아주기
(leading, trailing, bottom, top)

---

코드로 해당 셀 연결하기!

---

<Tab Bar 추가하기>

Viewcontroller 클릭 후, 하단에 Embed 클릭하여
Tab Bar Controller 클릭하여 추가!

그리고 원하는 tab Bar 갯수만큼 Viewcontroller 추가하고,
Tab Bar Controller에서 Control로 각각의 ViewController에 drag&drop!

view controllers로 연결해주면 된다.

앱 스토어 앱과 비슷한 이미지를 찾아서 설정해줬다.

---

실행해보면, 위와 같이 완성!!

코드에서 Cell의 갯수 리턴값을 5로 줘서 5개가 나왔다.
TableView는 기본적으로 Scroll이 가능하다. 

---

2. 당근마켓

마찬가지로 xib 파일을 새로 만들었다.
- imageView는 Aspect Ratio 1:1
- 가장 위에 Label 1개 , 중간 Label 2개, 가장 아래 Label 2개
각각 앱 스토어 때 처럼 StackView안에 StackView 묶기
- 가장 위에 Label은 Lines를 2로 설정(최대 2줄까지 보이게 하기 위해서)
- 하단 왼쪽 Label(거래완료)은 아래 Drawing에서 Hidden 체크! (거래 완료인 경우에만 보이게 하기 위해서)
- 위에서 오른쪽에 Button 추가하고 오토레이아웃 잡기(top, trailing)
- 아래에서 오른쪽에 imageView와 Label StackView로 묶고 오토레아웃 잡기(trailing, bottom)

---

3. 카카오톡 프로필

 - 가장 뒷 배경: imageView (safe area - trailing, leading 0 / super view - bottom, top 0)
- 왼쪽 상단: button / 오른쪽 상단: button 3개 stackView로 묶기 
- 하단에 구분줄은 view (trailing, leading 0 / height 1)
- 구분줄 위: imageView, label 2개 Vertical StackView
- 하단 버튼: imagView&Label Vertical StackView 묶어서 각각 2개를 다시 StackView 묶기

---