[iOS] 2주차 스터디 - IBOutlet + IBAction, Tabbar, Autolayout

[ 1 ]  강의 영상

- Tabber: https://youtu.be/t4dEOtSvmfM
- Autolayout-1: https://youtu.be/1McZ6ukrmFo
- Autolayout-2: https://youtu.be/rXA-kK3z4K4

 

[ 2 ] 스터디 내용

1. IBOutlet + IBAction

1) @IBOutlet

: View에 존재하는 요소와 Controller를 연결하는 변수의 개념

2) @IBAction

: StoryBoard 상에 선언한 View 객체에게 특정 이벤트가 발생했을 경우(터치, 드래그, 편집 등등) Controller에게 알리는 역할

※ weak와 strong 사용 구분
IBOutlet 프로퍼티를 선언할 때 그 속성을 weak / strong 둘 중 어느 것을 써도 오류가 나지 않는다. 아울렛 자체를 참조하는 객체가 이를 ‘소유’하는 경우 strong을 사용한다.  즉, 항상 weak를 사용하되 앞의 사항처럼 특별한 경우네만 strong을 사용한다.

3) IBOutlet 과  IBAction의 적용

화면에 library(단축키: command + shift + L)를 이용하여 레이아웃을 구성한 후, control + option + command + enter 키를 눌러 Automatic을 띄운다. control 키를 누르고 띄어놓은 코드로 드래그하면 Connection, Object, Name, Type, Storage를 설정할 수 있다. 이때, Connection으로 Outlet을 설정하면 @IBOutlet 키워드가 형성되고 Action을 설정하면 @IBAction 키워드가 형성된다.

 

 

2. Tabber

1) TabBarController
: 탭으로 뷰컨트롤러를 차일드로 설정하여 관리하는 컨테이너 컨트롤러이다. 탭바 컨트롤러에는 루트뷰와 탭 바가 표시되고 차일드 뷰 갯수 만큼 탭 바에 탭 바 아이템이 생성된다.

2) TabBar 만들기
 (1) 루트뷰에 다른 차일드 뷰를 연결하고자 한다면 연결하고자 하는 차일드 뷰에 tab item을 위치시킨다.

* 이 때 루트 뷰를 맨 처음 화면에 뜨도록 하고 싶다면 View Controller에서 Is Initial View Controller 체크 박스를 체크해 주어야 한다.

 (2) 루트뷰에서 control 키를 누르고 차일드 뷰로 드래그한다. 관련 메뉴가 뜨면 Relationship Segue의 view controllers를 눌러 tabBar를 만든다.

 

3. Autolayout

1) Autolayout이란?
제약 조건(Constraints)을 이용해서 뷰의 위치와 크기를 동적으로 지정하는 것

2) Autolayout 속성
- Leading : 상대 뷰와의 왼쪽 면과의 간격
- Trailing : 상대 뷰와의 오른쪽 면과의 간격
- Top : 상대 뷰와의 위쪽 면과의 간격
- Bottom : 상대 뷰와의 아래쪽 면과의 간격

3) Autolayout의 장점
- 서로 다른 크기의 아이폰에서도 같은 화면을 똑같이 보여주기 위해 오토 레이아웃을 사용한다. (아이폰 기종마다 스토리보드를 만들지 않아도 된다.)
- 세로 보기 화면뿐만 아니라 가로 보기 화면까지도 지원한다.

4) Autolayout 핵심
- 뷰의 위치: 앵커로 제공, 가로 (x축), 세로 (y축)으로 지정
- 뷰의 크기: 앵커를 기반으로 스크린 사이즈로 뷰의 크기 제공 가능

 

[ 3 ] 참고 자료

- https://docs.swift.org/swift-book/ReferenceManual/Attributes.html
- https://developer.apple.com/documentation/uikit/uitabbarcontroller