Xcode ) Storyboard - Object Library

 

Storyboard - Object Library 내의 각 컴포넌트 정리

 

 

------

 

1. Label, Buttons, Segmented Control

 

 

 

 

 

Label

read-only, 텍스트를 포함할 수 있으며 텍스트의 글꼴, 텍스트 색상, 정렬, 강조 표시 및 그림자를 제어할 수 있음

 

---

Buttons

https://developer.apple.com/design/human-interface-guidelines/ios/controls/buttons/

Buttons - Controls - iOS - Human Interface Guidelines - Apple Developer

 

Button

title, subtitle, image 등을 가질 수 있는 버튼.

plain button 외에 gray, tinted, filled와 같은 스타일의 버튼도 있음(iOS15부터 추가됨)

 

Pull Down Button 

버튼의 동작과 관련된 항목들을 포함하는 메뉴를 열어줌. 텍스트나 이미지 외에 Glyph 항목도 메뉴에 넣을 수 있음

Glyph란, 흑백으로 만들어진 기호를 의미하는데

이를 사용하여 별도의 설명 없이 기호를 보고 이게 어떤 기능이구나 하고 직관적으로 사용자가 파악할 수 있음

 

Pop Up Button

 

상호배타적인(mutually exclusive) 옵션 / 상태의 flat list를 표시함.

사용자가 팝업버튼의 메뉴를 선택하면 선택한 메뉴에 따라 컨텐츠의 내용이 업데이트될 수 있음.

** 버튼의 동작 목록을 나타내거나, 여러 항목을 선택하거나, 하위메뉴를 제공하려는 경우에는 팝업버튼 대신 풀다운(pull-down) 버튼을 사용할 것!

---

 

Segmented Control

 

 

두 개 이상의 세그먼트로 구성되며, 각각이 상호배타적인 버튼으로 작동함

컨트롤 내에서 각각의 세그먼트는 동일한 넓이를 가지며

각각의 세그먼트는 text 또는 image를 가질 수 있다. (text, image를 둘 다 넣을 순 없음)

 

------

 

2. Text Field, Slider, Switch, Progress Indicators(Activity Indicator View, Progress View),

Page Control, Stepper

 

 

 

 

 

Text Field

 

탭하면 키보드를 불러오며, 고정된 높이를 갖는 한 줄로 구성된 텍스트 필드.

placeholder text를 넣어 어떤 걸 입력받을지 사용자에게 힌트를 줄 수 있다. ex) Email, Name...

텍스트필드의 끝에 투명한 버튼을 배치해 사용자가 입력한 항목을 쉽게 지울 수 있게 할 수 있음 - Attributes Inspector에서 적용 가능

비밀번호와 같은 개인정보를 입력할 때 글자를 안보이게 할 수도 있음

 

 

Slider

 

'thumb'라고 부르는 컨트롤을 포함하는 수평 트랙.

minimum - maximum 값 사이에서 원하는 값을 조정할 수 있으며 왼쪽/오른쪽 양 끝에 이미지를 추가하여 직관성을 줄 수 있음

** 오디오 볼륨 컨트롤은 슬라이더가 아닌 Volume view를 사용할 것!

 

 

Switch

 

on / off 상태를 보여주는 시각적인 토글. 색상 변경도 가능함

on / off 외에도 다른 기능에도 영향을 줄 수 있음

ex) 비행기모드를 켜면 셀룰러 데이터나 핫스팟 꺼짐

 

----

Progress Indicators (Activity Indicator View, Progress View)

 

Activity Indicator View

로딩중임을 보여줌.. 

얼마나 진행되었는지는 모름ㅋ 구리기 때문에 아래의 progress view를 더 많이씀

 

 

Progress View

현재 태스크의 진행 정도를 보여줌

 

----

 

Page Control

 

flat list의 페이지를 보여주며 해당 indicator를 스크롤해서 원하는 페이지에 갈 수 있도록 해줌

 

 

Stepper

 

두 개의 세그먼트 컨트롤로 구성됨. value를 증가 / 감소시킴

기본으로 제공된 -,+ 외에도 custom image 사용 가능~

 

------

 

3. Horizontal Stack View, Vertical Stack View, Table View, Table View Cell, Image View,

Collection View, Collection View Cell, Collection Reusable View

 

 

 

Horizontal Stack View, Vertical Stack View

뷰를 수평/수직 스택뷰에 추가해서 constrain을 부여함

주변의 레이아웃에 영향을 줄 수 있음

 

 

Table View (Table) - Style : Plain / Grouped / Inset Grouped

섹션이나 그룹으로 나눌 수 있는 데이터를 스크롤, 단일 열 리스트로 나타냄

텍스트를 기반으로 한 컨텐츠를 나타내는데 이상적이고, Split View의 한 쪽에 네비게이션 용도로 쓰이곤 한다.

세 가지 스타일 중 선택해서 만들 수 있다.

---

1) Plain style

Labeled section으로 분리되어 있음

optional index가 오른쪽 가장자리를 따라 수직으로 보여질 수 있음

첫 번째 item의 앞에 header가, 마지막 item 이후에 footer가 올 수 있음

 

2) Grouped style

그룹으로 나누어 표시할 수 있음.

plain style과 마찬가지로 각 그룹의 앞/뒤에 header/footer가 올 수 있음

적어도 하나 이상의 그룹과, 각각의 그룹에 하나 이상의 행이 존재함

index는 없음

 

3) Inset Grouped style

 

사진 오른쪽에 보이는 것이 Inset Grouped style - Table view임.

parent view의 가장자리에 삽입되어 있고, 둥근 모서리를 가짐. 그룹으로 나누어짐

적어도 하나 이상의 그룹과, 각각의 그룹에 하나 이상의 행이 존재하며 각 그룹의 앞/뒤에 header/footer가 올 수 있음

index는 없음

공간 차지를 많이 해서 보통 가로모드라던지.. 폭이 넓은 조건일 때 사용되는 듯 함

---

 

Table View Cell

Table View의 속성과 동작 등을 정의할 수 있음

사용자가 특정 cell을 선택했을 때의 상태라던지.. title-subtitle 방식으로 표시하여 각 셀에 대한 설명을 달아준다던지..

여러 가지 기능을 사용할 수 있는데 자세한 건 HIG에서 확인할 수 있음

 

 

Image View

말 그대로 이미지뷰. 

하나의 이미지 또는 여러 장으로 구성된 애니메이션화된 이미지를 넣을 수도 있음

 

 

Collection View 

컬렉션은 사진 세트와 같은 정렬된 콘텐츠 세트를 관리하며, 시각적인 레이아웃으로 보여줌

일자로 정렬해야 한다던지.. 정해진 룰이 없어서 다양한 사이즈를 가진 item을 디스플레이하는 것에 적합함

컬렉션 뷰 내에 다른 뷰를 도입할 수도 있음

상호작용, 애니메이션 모두 사용가능함

기본적으로 한 번 누르면 선택/꾹 누르고 있으면 수정/스크롤도 가능

다른 제스처도 도입할 수 있음 ㅇㅇ

 

Collection View Cell

컬렉션뷰 만들면 자동으로 하나 생성됨. 

당연히 추가할 수도 있고 하나의 Collection View Cell이 말 그대로 컬렉션 뷰 내의 하나의 cell을 나타냄

label, image view와 같이 하위 뷰로 채우면 됨

 

Collection Reusable View

컬렉션 뷰에서 제시된 모든 셀의 동작과 보충 뷰를 정의하는 뷰

여기서 reusable이라는게 뭐냐면..

지금 보여지는 화면에서 스크롤해서 내리거나 했을 때,

해당 뷰를 없애는 게 아니라, reuse queue에 두고 재사용할 수 있도록 하기 때문에 저렇게 부름

 

------

4. Text View, Scroll View, Date Picker, Picker View,

Visual Effect View (with Blur / with Blur and Vibrancy)

 

 

 

Text View

 

말 그대로 텍스트뷰! 

사용자가 텍스트뷰를 선택하면 텍스트를 입력/수정할 수 있도록 함

속성을 줄 수 있음 - 폰트/색상/정렬 등

높이제한 없고, 스크롤도 가능

 

 

Scroll View 

화면에 보여지는 영역보다 문서/이미지 등이 큰 경우.. 유저가 컨텐츠를 탐색할 수 있도록 함

swipe, flick, drag, tap, pinch 등... 제스처를 사용해서 컨텐츠 탐색하도록 함

스크롤 뷰 자체에 어떤 모양이 있는 건 아닌데 사용자가 건드리면 scrolling indecator(스크롤 표시기)가 나타남

페이징 모드로 작동할 수도 있음 (현재 페이지를 탐색하는 것 외에도 새로운 페이지가 나타나도록 할 수도 있음)

 

 

Date Picker - Style : Compact / Inline / Wheels

 

특정 날짜나 시간 등을 선택할 수 있게 해줌ㅎㅎ

이것도 스타일이 여러 종류가 있는데

---

1) Compact : 버튼식.. 모델 뷰 내에서 날짜 / 시간 수정

 

 

2) Inline : 시간만 선택할 때는 버튼, 시간+날짜 선택할 때는 캘린더 뷰가 나타남

 

 

3) Wheels : 키보드로도 입력받을 수 있는 스크롤휠로 조정함

 

---

 

 

Picker View 

 

스피닝휠..으로 하나 이상의 값들의 세트 중에서 선택할 수 있도록 함

휠을 굴려서...원하는 값을 선택......... 네........

 

 

Visual Effect View (with Blur / with Blur and Vibrancy)

 

시각적인 처리를 해줌 ㅎㅎㅎ

 

 

------

 

5. Map Kit View, MetalKit View, GLKit View, SceneKit View, SpriteKit View,

ARKit SceneKit View, ARKit SpriteKit View, WebKit View

 

 

 

Map Kit View

 

지도!!

https://developer.apple.com/documentation/mapkit/mkmapview

 

 

MetalKit View 

금속을...그리는건가봄

https://developer.apple.com/documentation/metalkit/mtkview

 

 

GLKit View--더이상 사용하지 않음

 

 

SceneKit View

SceneKit 프레임워크를 사용하는 3D 자료를 다룸

https://developer.apple.com/documentation/scenekit/scnview

 

SpriteKit View 

SpriteKit 프레임워크를 사용하는 2D 자료를.. 다룸

https://developer.apple.com/documentation/spritekit/skview

 

ARKit SceneKit View

ARKit and SceneKit 프레임워크를 사용하는 자료를 3D자료를 다룸

 

ARKit SpriteKit View

ARKit and SpriteKit 프레임워크를 사용하는 자료를 다룸

 

WebView -- 구식이라서 WebKit View 사용을 권장함

WebKit View

 

 

웹컨텐츠를 보여줌

우리가 알고있는 메일도 그냥 HTML 컨텐츠를 보여주는 웹뷰임

 

 

------

 

6. Core Location Button, View, Container View, Navigation Bar, Navigation Item,

Toolbar, Bar Button Item, (Fixed/Flexible) Space Bar Button Item

 

 

 

Core Location Button

사용자의 현재 위치에 대한 일회성 권한 부여할 수 있음 (CLLocationButton : UIControl)

https://developer.apple.com/documentation/corelocationui/cllocationbutton

 

 

View

빈 뷰가 추가됨

앱 사용자 인터페이스의 기본 구성 요소..

화면에서 직사각형 영역의 컨텐츠를 관리함...

https://developer.apple.com/documentation/uikit/uiview

 

 

Container View

 

자식 VC(view controller)를 호스팅하기 위해 VC의 뷰 계층 내의 영역을 정의함

https://developer.apple.com/documentation/uikit/view_controllers/creating_a_custom_container_view_controller

 

 

Navigation Bar

화면을 계층적으로 탐색할 수 있음

https://developer.apple.com/design/human-interface-guidelines/ios/bars/navigation-bars/

 

Navigation Item

네비게이션 바의 컨텐츠

위의 네비게이션 바의 사진을 보면 뒤로가기 버튼이나 Aug2017라고 적혀있는 타이틀, 그 외 동작버튼이 있음

 

 

Toolbar 

화면 하단에 도구모음을 제공함

https://developer.apple.com/design/human-interface-guidelines/ios/bars/toolbars/

 

 

Bar Button Item (UIBarButtonItem)

네이게이션 바 / 툴바에서 쓰는 버튼

그냥 버튼이랑 비슷함

 

 

(Fixed/Flexible) Space Bar Button Item -- 얘네도 UIBarButtonItem임

툴바 아이템 사이의 공간을 고정적으로/유동적으로 제공함.

 

------

 

7. Tab Bar, Tab Bar Item, Search Bar, Menu Command, Main Menu, Sub Menu, Inline Section Menu

 

 

 

Tab Bar 

 

툴바와는 다르게 어떠한 동작을 하게 할 수는 없고, 네비게이션 역할을 하도록 함

https://developer.apple.com/design/human-interface-guidelines/ios/bars/tab-bars/

 

Tab Bar Item

ㅇㅇ

 

 

Search Bar

 

사용자가 텍스트를 입력하여 검색할 수 있도록 함

 

 

Menu Command, Main Menu, Sub Menu, Inline Section Menu 

메뉴를 만들 때 사용하는 것들

https://developer.apple.com/documentation/uikit/uicommand

https://developer.apple.com/documentation/uikit/uimenu

 

 

------

 

8. View Controller, Storyboard Reference, Navigation Controller, Table View Controller,

Collection View Controller, Tab Bar Controller, Split View Controller, Page View Controller,

Hosting View Controller, GLKit View Controller, AVKit Player View Controller, Object

 

 

 

View Controller 

하나의 화면을 관리함. (화면 안에 툴바, 각종 뷰 등등..이 있을 것임)

 

Storyboard Reference 

레퍼런스를 사용해서 스토리보드를 다른 파일들에서 팩토링할 수 있게 함 

 

 

Navigation Controller 

 

계층적 콘텐츠를 탐색하기 위한 스택 기반 체계를 정의하는 컨테이너 뷰 컨트롤러.

https://developer.apple.com/documentation/uikit/uinavigationcontroller

 

 

Table View Controller (UITableViewController)

Collection View Controller (UICollectionViewController) 

Tab Bar Controller (UITabBarController)

Split View Controller(UISplitViewController)

Page View Controller(UIPageViewController)

이름 그대로.. 각각 관리함

 

 

Hosting View Controller (UIHostingController) 

SwiftUI 뷰를 UIKit 뷰에 통합하고 싶을 때 만듬

계층을 관리함

https://developer.apple.com/documentation/swiftui/uihostingcontroller/

 

 

GLKit View Controller(GLkViewController) -- 이제 안씀

OpenGL ES 렌더링 루프를 관리할 때 사용했었는데 iOS 12까지만 사용하는듯

 

AVKit Player View Controller

AVPlayer object 관리, 영상 플레이어와 관련됨

 

Object (NSObject)

대부분의 Objective-C 클래스 계층의 루트 클래스.

 

------

 

9. 각종 제스처 인식기(?)

 

 

고맙게도 모두 제곧내

 

 

 

 

애플 HIG(Human Interface Guideline), Developer Documentation에 더 자세히 나옴

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