iOS) Scene(2) - 인터페이스 빌더로 씬 작성

인터페이스 빌더로 씬 작성

뷰를 이용한 씬 작성

뷰란?

씬의 콘텐츠 출력

씬을 작성할 때 씬은 씬에 속한 뷰를 이용하여 화면에 나타낸다. 뷰의 가장 기본적인 역할은 콘텐츠 출력이다.

콘텐츠 종류에 맞는 뷰

UIKit은 여러 개의 뷰를 제공하는데 자신이 출력하고자 하는 콘텐츠의 종류에 맞는 뷰 하나를 선택해야 한다.

예를 들어 글자를 출력해야 하면 글자를 출력하는 기능을 제공해주는 뷰를 사용해야 한다. 이미지를 출력해야 하면 이미지를 출력할 수 있는 기능을 제공하는 뷰를 사용해야 한다.

뷰 작성과 속성

이렇듯 컨텐츠 종류에 맞는 뷰를 선택하고 그다음 뷰를 작성하고 속성 값을 넣어준다. 화면상에 나타나기 위해서는 씬에 대한 뷰 구조에 추가해주는 과정을 거쳐야 한다.

뷰 구조

씬에 뷰를 배치할 경우 자동으로 뷰 구조가 만들어진다.

View Structure

위 자료는 도큐먼트 아웃라인 이다. 씬에는 View가 있고 이를 root view라 한다. 그 안에는 자식으로 뷰가 추가된다. 뷰는 부모 뷰(superview) - 자식 뷰 또는 하위 뷰(subview)가 있다. 도큐먼트 아웃라인 내 아래에 위치한 뷰가 상위에 나타난다.

왼쪽의 그림은 세 개의 뷰가 같은 형제 레벨로 들어가 있고 오른쪽은 레드 뷰 하위로 그린뷰가 들어간다. 도큐먼트 아웃라인을 이용하면 마우스를 이용해서 뷰 구조를 이동해가면서 변경할 수 있다.

뷰 속성

뷰 속성은 오른쪽의 유틸리티 영역을 이용해서 만든다.

뷰 인스펙터(Inspector)

View Inspector

위 자료에 있는 버튼은 순서대로 다음과 같다. 이 중 많이 사용하는 것은 네 번째 속성과 다섯번 째 사이즈이다.

• File
  • 스토리보드 파일 속성
• Quick Help
  • 항목 도움말
• Idenity
  • 클래스, 아이디, IB 내 이름
• Attributes
  • 항목 속성
  • 화면상에 보이기 위한 가장 기본적인 기능을 제공한다.
• Size
  • 크기
  • 뷰에 대한 크기
  • x, y 좌표
  • 레이아웃 제약 조건
  • 콘텐츠 크기 유지에 대한 제약 조건 등
• Connections
  • 연결 정보

인터페이스 빌더로 씬 작성

라이브러리에서 뷰를 배치한다. 뷰를 배치하면 뷰 구조가 만들어지고 각각의 뷰의 구조를 조절할 수 있다. 뷰에 대한 속성을 조절할 수 있다.

 

참고 : https://www.youtube.com/watch?v=m6NqIxyBmZE&list=PL9mhQYIlKEhdQ8viJACIwxIcUiXU2lMLX&index=2