[iOS/UIKit] Xcode 스토리보드 컴포넌트

Label

UILabel: Presents read-only text

하나 이상의 정보 텍스트를 표시하는 뷰

임의의 양의 텍스트를 포함할 수 있지만 UILabel은 경계 사각형 및 설정한 속성의 크기에 따라 텍스트를 축소, 줄바꿈 또는 잘릴 수 있다

텍스트의 글꼴, 텍스트 색상, 정렬, 강조표시 및 그림자를 제어할 수 있다

Button

UIButton: Sends an action when tapped

사용자의 상호작용에 대한 응답으로 사용자가 custom한 코드를 실행하는 컨트롤

제목, 부제, 이미지 및 기타 모양 속성을 가질 수 있는 일반 스타일의 버튼을 표시한다

Gray Button

UIButton: Sends an action when tapped

제목, 부제, 이미지 및 기타 모양 속성을 가질 수 있는 회색 스타일의 버튼을 표시

Tinted Button

UIButton: Sends an action when tapped

제목, 부제, 이미지 및 기타 모양 속성을 가질 수 있는 색조 스타일의 버튼을 표시

Filled Button

UIButton: Sends an action when tapped

제목, 부제, 이미지 및 기타 모양 속성을 가질 수 있는 채워진 스타일의 버튼을 표시

 

<버튼 비교>

Pull Down Button

UIButton: Displays a pull down menu

버튼의 목적과 직접 관련된 항목 또는 작업 메뉴를 표시한다

일반적인 편집 동작을 표시하기 위해 사용, 인터페이스에 추가적인 버튼 없이도 사람들이 버튼의 대상을 명확히 하거나 동작을 사용자정의할 수 있다.

Pop Up Button

UIButton: Displays a pop up menu

단독 선택 목록을 나타내는 메뉴가 표시한다.

팝업 버튼의 메뉴에서 항목을 선택하면 메뉴가 닫히고, 버튼은 현재 선택 항목을 나타내기 위해 내용을 업데이트 하는데 사용한다.

상호 배타적인 옵션 또는 상태의 단순 목록을 표시한다. 사용자가 자신의 컨텐츠나 주변 뷰에 영향을 미치는 선택을 할 수 있도록 도와준다.

 

<Pull Down / Pop Up 비교>

관련된 작업 목록을 제공하거나 여러 항목을 선택하거나 하위메뉴를 제공해야하는 경우는 풀다운 버튼

공간이 제한되어 있고 항상 상호 배타적인 모든 옵션을 표시할 필요가 없는 경우는 팝업 버튼을 사용

Segmented Control

UISegmentedControl: presents a horizontal group of buttons

세그먼트는 단일 또는 다중 선택 또는 명령 목록을 나타낼 수 있다.

각 세그먼트는 텍스트 또는 이미지를 표시할 수 있지만 둘 다 표시할 수 없다.

분할된 컨트롤은 두 개 이상의 세그먼트로 구성된 선형 집합으로, 각 세그먼트는 버튼으로 작동한다.

Text Field

UITextField: edits text

적은 양의 텍스트를 입력하거나 편집하는 사각형 영역

Slider

UISlider: Selects a value from a range

사용자가 최소값과 최대값 사이에서 조정할 수 있는 컨트롤(thumb)이 있는 수평 트랙

Switch

UISwitch: Switch a state between a on and off

켜짐/꺼짐과 같이 이진 선택을 제공하는 컨트롤 , 탭하여 상태를 전환할 수 있음

Activity Indicator View

UIActivityIndicatorView: presents a spinning progress indicator

완료 정도를 알 수 없는 작업의 처리를 나타내는 데 사용한다.

Progress View

UIProgressView: presents a progress bar

긴 작업이 진행 중임을 나타내며 완료된 작업의 백분율을 나타낸다.

 

<Activity Indicator / Progress 비교>

얼마나 지속될지 알 수 없는 경우는 UIActivityIndicatorView를, 얼마나 지속될 지 알 수 있는 경우는 UIProgressView를 사용

Page Control

UIPageControl: shows progression through a list of pages

열려있는 각 페이지에 대해 점을 표시하여 응용프로그램에서 열려있는 페이지 수를 나타내고, 현재 보고 있는 페이지에 해당하는 점이 강조 표시된다.

사용자가 현재 강조 표시된 점의 오른쪽 또는 왼쪽을 탭할 때 대리자(델리게이트) 이벤트를 전송하여 탐색을 지원한다.

Stepper

UIStepper: Increments or decrements a value

증가되는 값을 표시하기 위해 레이블 또는 텍스트 필드와 결합된다.(스테퍼 자체는 값을 표시하지 않기 때문에 스테퍼는 현재 값을 표시하는 필드 옆에 있다)

증분값을 늘리거나 줄이는 데 사용하는 2-세그먼트 컨트롤

Horizontal Stack View

UIStackView: Arranges views linearly

뷰의 수평 스택을 생성하는 데 필요한 제약조건을 생성하고 관리한다

View 들을 일정한 간격으로 배치하기 위해 사용한다

스택에 제거되거나 추가되는 뷰에 반응하기 위해 제약 조건을 동적으로 추가 및 제거, 사용자 정의를 통해 주변 레이아웃에 반응하고 영향을 줄 수 있다

Vertical Stack View

UIStackView: Arranges views linearly

뷰의 수직 스택을 생성하는 데 필요한 제약조건을 생성하고 관리한다

View 들을 일정한 간격으로 배치하기 위해 사용한다

스택에 제거되거나 추가되는 뷰에 반응하기 위해 제약 조건을 동적으로 추가 및 제거, 사용자 정의를 통해 주변 레이아웃에 반응하고 영향을 줄 수 있다

Table View

UITableView: Displays data in a list

단일 열에 배열된 행을 사용하여 데이터를 표시하는 뷰

스크롤 가능한 행 목록을 표시하기 위해 데이터 소스 및 델리게이트(대리자)와 조정한다

행은 섹션으로 그룹화할 수 있으며 섹션에는 선택적으로 머리글과 바닥글이 있을 수 있다

사용자는 테이블 셀을 삽입, 삭제 및 재정렬하여 테이블을 편집할 수 있다

Table View Cell

UITableViewCell: Single row of a table view

테이블 뷰를 이루는 개별적 행

테이블 뷰에서 셀의 속성과 동작을 정의한다

Image View

UIImageView: Displays an image

투명하거나 불투명한 배경에 단일 이미지 또는 경우에 따라 애니메이션 이미지 시퀀스를 표시

Collection View

UICollectionView: Displays a collection of cells

여러 아이템을 커스텀 레이아웃으로 보여줄 수 있는 객체, 변경이 가능한 레이아웃을 통해 데이터들을 보여주는 뷰의 일종

데이터 소스 및 델리게이트(대리자)와 조정하여 스크롤 가능한 셀 컬렌션을 표시

관련 데이터 아이템들을 관리하고 커스텀 가능한 레이아웃을 사용해 표시할 수 있는 객체, cell 뿐만 아니라 다른 타입의 뷰를 사용해 데이터를 표시할 수 있다

컬렉션 뷰 데이터 소스 객체에서 표시할 셀에 대한 정보를 가져온다

Collection View Cell

UICollectionViewCell: A cell in a collection

컬렉션 뷰의 주요 콘텐츠를 표시

Collection Reusable View

UICollectionReusableView: implements caching behavior

섹션 머리글 또는 바닥글과 같은 컬렉션 뷰안에서 reusable 뷰의 특성과 동작을 정의하는 오브젝트

Text View

UITextView: Edits multiline text content

선택적으로 편집할 수 있는 여러 줄의 스타일이 지정된 텍스트 내용을 표시

높이에 제한이 없고 콘텐츠가 뷰 외부로 확장될 때 스크롤이 가능하다

Scroll View

UIScrollView: Defines a scrollable region

애플리케이션 창의 크기보다 큰 콘텐츠를 표시하는 메커니즘을 제공하고 사용자가 스와이프 제스처를 만들어 해당 콘텐츠 내에서 스크롤 할 수 있도록 한다

Date Picker

UIDatePicker: selects dates and times

사용자가 날짜와 시간을 선택할 수 있도록 여러 회전 바퀴를 사용하는 오브젝트를 제공한다

Picker View

UIPickerView: Displays a series of spinning-wheels

슬롯머신 형태로 Wheel을 돌려서 데이터를 선택할 수 있는 기능을 제공

 

<data picker / picker 비교>

date picker 은 형태만 잡아주면 알아서 데이터를 가져오지만, picker view는 개발자가 직접 대부분을 구현해야 한다

Visual Effect View with Blur

UIVisualEffectView: provides a blurred background

다른 뷰 뒤에 있는 사용자 정의 가능한 블랜딩 효과를 제공

Visual Effect Views with Blur and Vibrancy

UIVisualEffectView: provides a blur and vibrancy effects

블러 배경을 제공하고, 포함된 뷰를 생동감 있는 효과로 렌더링한다

Map Kit View

MKMapView: displays map content

지도 인터페이스를 제공, 지도 정보를 표시하고 애플리케이션에서 지도 콘텐츠를 조작

MetalKit View

MTKView: presents graphics rendered with metal

애플리케이션을 대신하여 MTLRenderPassDescriptor 오브젝트 및 관련 렌더 대상 첨부 파일을 관리하는 편리한 방법을 제공한다

GLKit View

GLKView: presents graphics rendered with openGL ES

애플리케이션을 대신하여 프레임 버퍼 오브젝트를 직접 관리한다. 콘텐츠를 업데이트해야 할 때 애플리케이션은 프레임 버퍼에 그리기만 하면 된다

SceneKit View

SCNView: presents graphics rendered with sceneKit

sceneKit 프레임워크를 사용하여 3D 장면을 표시할 수 있다. 이를 통해 애플리케이션에서 3D 장면을 쉽게 로드, 조작 및 렌더링할 수 있다

SpriteKit View

SKView: presents graphics rendered with spriteKit

spriteKit 프레임워크를 사용하여 2D 장면을 표시할 수 있다. 이를 통해 애플리케이션에서 2D 장면을 쉽게 로드, 조작 및 렌더링할 수 있다.

ARKit SceneKit View

ARSCNView: presents graphics rendered with sceneKit and augmented with ARKit

ARKit 및 SceneKit 프레임워크를 사용하여 카메라 배경에 3D 장면을 표시할 수 있다. ARSession을 래핑하고 애플리케이션에서 3D 장면을 쉽게 로드, 조작 및 렌더링할 수 있도록 한다.

ARKit SpriteKit View

ARSKView: presents graphics rendered with spriteKit and augmented with ARKit

ARKit 및 SpriteKit 프레임워크를 사용하면 장면을 표시할 수 있다. ARSession을 래핑하고 애플리케이션에서 장면을 쉽게 로드, 조작 및 렌더링할 수 있다.

WebKit View

WKWebView: displays interactive web content

포함된 (embedded) 웹 콘텐츠를 표시하고 콘텐츠 탐색을 활성화한다

RealityKit AR View

ARView: presents graphics rendered with realityKit

RealityKit 프레임워크를 사용하여 3D 대화형 AR 장면을 표시할 수 있다. 이를 통해 애플리케이션에서 3D AR 콘텐츠를 쉽게 로드, 조작 및 렌더링할 수 있다.

Core Location Button

CLLocationButton: Grants one-time authorization of the device’s current location

UIButton과 매우 유사하게 작동할 뿐만 아니라 눌렀을 때 장치의 현재 위치에 대한 일회성 권한을 부여할 수 있는 UIControl

Navigation Bar

UINavigationBar: Displays a title, and optional buttons

상태 표시줄 바로 아래에 네이게이션바(탐색 표시줄)가 나타나 콘텐츠 계층 구조를 탐색할 수 있다.

Navigation Item

UINavigationItem: Navigation bar content

navigation bar의 콘텐츠를 표시하는 객체

 

<navigation bar 과 navigation item>

view controller 가 전환될 때마다 navigation bar 는 하나의 공동 객체지만, navigation item은 각각의 view controller 가 가지고있는 프로퍼티 이다

Toolbar

UIToolbar: Displays a horizontal bar of buttons

화면 하단에 도구 모음을 표시하는 메커니즘을 제공하고 툴바 항목 표시 및 선택을 지원한다

현재 보기와 관련된 작업을 수행하는 자주 사용하는 명령과 컨트롤에 편리하게 액세스할 수 있다

Bar Button Item

UIBarButtonItem: Button in a tool or navigation bar

UIToolbar 또는 UINavigationBar 에 배치할 수 있는 특수한 버튼

Fixed Space Bar Button Item

UIBarButtonItem: Fixed spacer within a toolbar

인접한 툴바 아이템을 고정된 공간으로 구분한다.

지정된 거리만큼 왼쪽에서 여백을 주고 싶을 때 사용하고, 명시적인 너비 값을 가질 수 있다.

Flexible Space Bar Button Item

UIBarButtonItem: Flexible spacer within a toolbar

유연한 공간으로 인접한 툴바 아이템을 구분한다

빈 공간을 모두 채울 때 사용한다

Tab Bar

UITabBar: a row of selectable items

앱에서 뷰, 하위작업 또는 모드를 선택하기 위한 막대를 표시한다

동일한 영역에 상호 배타적인 여러 콘텐츠 창을 표시하며, 탭 컨트롤을 사용하여 전환할 수 있다

Tab Bar Item

UITabBarItem: a item in a tab bar

탭 바의 항목을 나타낸다

Search Bar

UISearchBar: Displays a bar with a search field

리턴을 탭할 때 대상 오브젝트에 액션 메세지를 보내는 검색 아이콘이 포함된 검색 창 오브젝트이다

Menu Command

UICommand: Represents an action or setting

메뉴의 다른 명령과 함께 그룹화되며 선택 시 첫 번째 응답자를 통해 액션 메세지를 보낸다.

Main Menu

UIMenu: Default main menu

기본 메뉴로 사용할 기본 메뉴 및 명령 세트가 포함되어 있다

Sub Menu

UIMenu: shows a submenu

하위 메뉴를 표시하도록 구성된 메뉴

Inline Section Menu

UIMenu: Groups menus and commands inline

자식을 구분 기호와 함께 인라인으로 표시하는 메뉴 설정

View

UIView: an empty view

뷰 계층 구조에서 부모의 직사각형 영역 내에서 그리기, 하위 뷰 레이아웃 및 이벤트 처리를 위한 구조를 제공한다

Container View

UIContainerView: Hosts a child view controller

자식 뷰 컨트롤러를 호스팅하기 위해 뷰 컨트롤러의 뷰 계층 구조 내 영역을 정의한다.

View Controller

UIViewController: manages a single view

툴바, 네이게이션바, 애플리케이션 뷰에 대한 뷰 관리 기능을 제공한다

Storyboard Reference

UIViewController: references another storyboard

하나의 스토리보드에 담기에 뷰가 많아질 경우, 스토리보드 파일을 여러개로 나눌때 사용한다

Navigation Controller

UINavigationController: navigates a hierarchy of view controllers

계층적 내용을 탐색하기 위한 스택 기반 체계를 정의하는 컨테이너 뷰 컨트롤러

Table View Controller

UITableViewController: manages a table view

테이블 관리를 전문으로 하는 뷰 컨트롤러

Collection View Controller

UICollectionViewController: manages a collection view

컬렉션 뷰를 관리를 전문으로 하는 뷰 컨트롤러

Tab Bar Controller

UITabBarController: tabs through list of view controllers

다중 선택 인터페이스를 관리하는 컨테이너 뷰 컨트롤러로, 선택 항목에 따라 표시할 자식 뷰 컨트롤러가 결정된다

Split View Controller

UISplitViewController: presents two view controllers side by side

계층적 인터페이스를 구현하는 컨테이너 뷰 컨트롤러, 두개의 뷰 컨트롤러를 한 화면에서 관리한다

Page View Controller

UIPageViewController: pages through a sequence of view controllers

자식 뷰 컨트롤러가 각 페이지를 관리하는 콘텐츠 페이지 간 탐색을 관리하는 컨테이너 뷰 컨트롤러

Hosting View Controller

UIHostingController: A UIViewController that hosts a swiftUI view hierarchy

SwiftUI 뷰 계층을 관리하는 UIKit 뷰 컨트롤러

GLKit View Controller

GLKViewController: manages an OpenGL ES rendering loop

모든 표준 뷰 컨트롤러 기능을 제공하고 OpenGL ES 렌더링 루프를 관리하는 뷰 컨트롤러

AVKit Player View Controller

AVPlayerViewController: presents audiovisual content

플레이어 콘텐츠를 표시하고 재생을 제어하는 기본 사용자 인터페이스를 제공하는 뷰 컨트롤러

Object

NSObject: Instantiates any object

커스텀 클래스 인스펙터를 사용하여 특정 클래스의 인스턴스로 전환한다.

Tap Gesture Recognizer

UITapGestureRecognizer: Recognizes simple tap gesture

사용자가 탭할 때 액션 메세지를 보낼 때 사용한다.

단일 또는 다중 탭을 해석하는 개별 제스처 인식기이다.

Pinch Gesture Recognizer

UIPinchGestureRecognizer: Recognizes pinch gestures

두 손가락 사이 거리를 추적하고, 해당 정보를 사용하여 내용을 확대 또는 축소 하는 제스처를 추가

Rotation Gesture Recognizer

UIRotationGestureRecognizer: Recognizes rotation gestures

화면에서 두 손가락의 상대적 회전을 측정하고 해당 동작을 사용하여 콘텐츠를 회전 하는 제스처를 추가

Swipe Gesture Recognizer

UISwipeGestureRecognizer: Recognizes swipe gestures

화면에서 가로 또는 세로 스와이프 동작을 감지하고 이를 사용하여 콘텐츠 탐색을 트리거 하는 제스처를 추가

Pan Gesture Recognizer

UIPanGestureRecognizer: Recognizes Pan gestures

화면에서 손가락의 움직임을 추적하고 그 움직임을 콘텐츠에 적용하는 제스처를 추가한다

Screen Edge Pan Gesture Recognizer

UIScreenEdgePanGestureRecognizer: Recognizes Pan gestures at the edge of the screen

화면 가장자리 근처에서 시작하는 패닝(드래그) 제스처를 찾는 제스처 인식기

ex) 뒤로가기나 컨트롤센터 보여주는 기능

Long Press Gesture Recognizer

UILongPressGestureRecognizer: Recognizes a long press

화면에서 연장된 지속 시간 탭을 감지하고 이를 사용하여 상황에 맞는 관련 콘텐츠를 표시

Custom Gesture Recognizer

UIGestureRecognizer: Recognizes custom gestures

사용자 정의 제스처 인식기를 구현할 수 있다