[iOS] 스토리보드 컴포넌트와 AutoLayout 개념

iOS 구성

Swift에서 화면 구성하는 방식

• 스토리보드
  • 가장 기본이 되는 방식
  • 하나의 파일로 여러 개의 View를 가질 수 있음
  • 1개의 View는 1개의 Controller를 가질 수 있음
• Swift UI
• 코드작성

Stroyboard

• iOS 앱의 사용자 인터페이스를 시각적으로 표현하여 컨텐츠 화면과 화면 간의 연결을 보여주는 도구
• 스토리보드는 일련의 Scenes로 구성, 각 scene은 ViewController와 해당 View를 나타냄

View

• iOS 앱 사용자 인터페이스의 기본 구성요소
• 앱의 컨텐츠를 화면에 그리거나 구성 가능

ViewController

• View에서 일어나는 모든 상호작용을 관리
• ViewController는 하나의 루트 View만 관리
• 해당 View가 여러 개의 서브 View들을 가지는 방식

화면이동 (Segue)

• Swift에서 화면 이동은 기본적으로 Segue를 통해 가능
• 버튼과 같은 컴포넌트에 Control를 누른채 드래그하여 다른 View와 연결

UIKIT

• 그래픽 기반의 이벤트 중심 사용자 인터페이스를 구성하고 관리하는 프레임워크
• 제스처처리, 애니메이션, 그림그리기, 이미지 처리, 텍스트 처리등 사용자 이벤트 처리를 위한 클래스 포함
• Button, Text Field 등 애플리케이션의 화면을 구성하는 요소를 포함

 

1) 스토리보드 컴포넌트

스토리보드 상단의 ‘+’ 모양의 버튼을 누르면 iOS의 화면을 구성하는 오브젝트 라이브러리 확인 가능

UILabel

• 정보 텍스트의 한 줄 이상을 표기
• 텍스트의 글꼴, 텍스트 색상, 정렬, 강조 표시 및 음영을 제어 가능

UIButton

• 사용자 상호작용에 대한 응답으로 사용자 지정 코드를 실행
• 버튼의 제목, 이미지, 기타 속성을 설정 가능
• 기본 4가지 스타일
  • Plain Button
  • Gray Button
  • Tinted Button
  • Filled Button

Pull Down Button

• 작업 목록을 나타내는 메뉴를 표시
• 여러 항목을 선택하거나, 하위 메뉴를 제공하는 경우 사용

Pop Up Button

• 독점적인 선택 목록을 나타내는 메뉴를 표시
• 선택한 항목은 팝업 버튼의 제목으로 표시

UISegmented Control

• 여러 세그먼트로 구성된 수평 컨트롤, 각 세그먼트는 개별 버튼으로 작동
• 단일 or 다중 선택 or 명령 목록을 나타낼 수 있음
• 각 세그먼트는 텍스트 or 이미지를 표시할 수 있지만 둘 다 표시는 불가능

UIText Field

• 사용자가 상호작용할 수 있는 텍스트 필드 표시
• 사용자가 작성 가능

UISlider

• 값의 제한된 성형 범위에서 값을 선택하기 위한 컨트롤
• 트랙(값 범위를 나타내는 가로 막대)을 표시
• 사용자는 트랙을 밀어 값을 선택

UISwitch

• 사용자에게 주어진 값의 부울 상태를 보여주는 요소를 표시
• 컨트롤을 눌러 상태 전환

UIActivity Indicator View

• 작업이 진행 중임을 표시
• 완료율을 알 수 없는 작업의 처리를 나타내는 데 사용

UIProgress View

• 긴 작업이 진행 중임을 표시
• 완료된 작업의 백분율을 나타냄

UIPage Control

• 열려있는 각 페이지에 대해 점을 표시하여 응용프로그램에서 열려있는 페이지 수를 나타냄
• 현재 표시된 페이지에 해당하는 점이 강조 표시
• 사용자가 현재 강제 표시된 점의 오른쪽 or 왼쪽으로 탭할 때 이벤트를 전송

UIStepper

• 레이블 or 텍스트필드와 결합하여 값이 증가하는 것을 표시

UIStackView

• 뷰 스택을 만드는 데 필요한 제약 조건을 생성하고 관리

Horizontal Stack View

• 수평, 가로

Vertical Stack View

• 수직, 세로

UITableView

• 테이블 타입으로 데이터를 표시
• 테이블 보기의 각 행은 UITableViewCell 개체
• 행을 섹션으로 그룹화 가능하며 섹션에는 선택적으로 머리글과 바닥글이 있을 수 있음
• 사용자는 테이블 셀을 삽입, 삭제, 재정렬하여 테이블을 편집가능

UITableView Cell

• 테이블 뷰에서 셀의 특성 및 동작을 정의
• 선택된 셀의 상태 모양을 설정하고 편집가능

UIImageView

• 이미지 or 일련의 이미지를 애니메이션을 표시

UICollectionView

• 데이터 소스와 조정하고 셀의 스크롤 가능 컬렉션을 표시
• 컬렉션 뷰의 각 셀은 UICollectionViewCell 개체
• 흐름 레이아웃과 사용자 정의 레이아웃을 지원
• 셀을 섹션으로 그룹화 가능
• 섹션과 셀은 선택적으로 보조 뷰를 가질 수 있음

UICollectionView Cell

• 컬렉션 뷰에서 하나의 셀을 나타내는 단일 뷰
• Label, ImageView와 같은 하위 뷰로 채움

UICollectionReusableView

• 컬렉션 뷰에서 재사용이 가능한 뷰의 특성 및 동작을 정의

UITextView

• 특정 응용 프로그램 방식으로 입력 처리 가능
• 사용자가 키보드에서 리턴을 누르면 키보드가 사라짐
• 텍스트 뷰의 모든 텍스트에 적용되는 글꼴, 색상 및 정렬과 같은 속성을 지정 가능

UIScrollView

• 응용 프로그램 창 크기보다 큰 콘텐츠를 표시할 수 있는 메커니즘을 제공
• 사용자가 제스처를 스와이핑하여 해당 콘텐츠 내에서 스크롤 가능하게 함

.

.

.

UIView

• 화면의 직사각형 영역에 대한 내용을 관리하는 개체
• 앱의 사용자 인터페이스의 기본 구성 요소

UINavigation Controller

• 네비게이션 바 및 뷰 컨트롤러 스택을 관리
• 상태표시줄 바로 아래에 탐색 모음을 표시하는 메커니즘을 제공

UITabbar Controller

• 앱에서 보기, 하위 작업이나 모드를 선택하기 위한 막대를 표시
• 각 뷰 컨트롤러는 표시줄 항목에 대한 정보를 제공하고 항목을 선택할 때 표시할 뷰를 제공

UISearch Bar

• 검색아이콘이 포함된 편집 가능한 검색 표시줄
• 리턴을 누르면 대상 객체에 작업메시지를 보냄

 

2) AutoLayout

Constraints(제약조건)을 사용하여 뷰의 위치를 지정하는 것

여러 종류의 디바이스 화면에 효율적으로 대응 가능

디바이스별 크기에 따라 UI대응방향

1. 화면 크기 변화에 따라 가로,세로 길이는 유지하고 외부 간격을 늘림
2. 화면 크기 변화에 따라 가로,세로 길이를 변화시키면서 외부 간격을 유지시킴
3. 가로,세로길이 유지하면서 외부 간격도 유지

Safe Area

• UI구현 시 iOS의 상태바 등과 겹치지 않도록 하기 위해 제공되는 일종의 기준선
• UI에 객체를 배치할 때 화면과 객체 사이의 기준 간격을 제공하는 역할

 

 

 

 

참조

 

https://developer.apple.com/design/human-interface-guidelines/components/all-components

All components - Components - Human Interface Guidelines - Design - Apple Developer

 

https://velog.io/@rlawnstn01023/UIKitUI-component

[Xcode]UI component

 

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/index.html

Auto Layout Guide: Understanding Auto Layout