스토리보드 컴포넌트

스토리보드 

(참고링크)

스토리보드는 iOS 애플리케이션의 사용자 인터페이스를 시각적으로 표현한 것으로 컨텐츠 화면과 해당 화면 간의 연결을 보여준다.

스토리보드는 일련의 장면(=화면?)으로 구성되며, 각 장면은 뷰 컨트롤러와 해당 뷰를 나타낸다.

장면들은 두 뷰 컨트롤러 간의 전환을 나타내는 Segue 객체로 연결된다.

 

---

스토리보드 컴포넌트

▶ Label

하나 이상의 여러 라인을 표시할 수 있다.

설정된 사각형의 크기와 속성에 따라 텍스트를 축소, 줄 바꿈, 자르는 등의 제어를 할 수 있다. (참고)

내부 텍스트의 글꼴, 색상, 정렬, 강조 표시 및 음영을 제어 가능하다.

 

▶ Button

사용자의 인터렉션을 통해 커스텀 코드를 실행할 수 있다.

버튼의 텍스트, 이미지 및 기타 모양 속성을 설정 가능하다.

 

▶ Segmented Control

여러 분할로 구성되어 있는 가로형 제어기, 각각의 분할은 분리된 버튼으로 구성됨 (버튼이 다양한 스위치 같은 느낌)

단일, 다중 선택 또는 명령 목록을 나타낼 수 있다.

 

 

 

▶ Text Field

인터페이스 내에서 편집이 가능한 텍스트 오브젝트

사용자가 텍스트 필드를 탭하면 키보드가 나타난다.

 

▶ UISearchBar  (참고 링크)

검색창을 생성할 때 매우 유용할 것 같다!

Text Field는 정말 단순하게 텍스트를 입력할 수 있는 기능 외에는 아무것도 없는데,

UISearchBar에는 clear버튼이 구현되어 있고, 키보드에 "검색" 기능이 내장되어 있다.

검색창에 적절한 Place holder 작성 가능 (왼쪽 사진 "요기에 검색")

 

검색창 위에 한 줄 문구를 prompt로 작성 가능

 

 

 

 

 

 

 

 

 

▶ Slider

연속된 범위의 값으로부터 단일 값을 선택해서 값을 불러오는 제어 오브젝트

값 범위를 나타내는 트랙이라고 하는 가로 막대를 표시

 

현재 값은 표시기 또는 엄지손가락의 위치로 표시된다. (이게 뭔소린지 이해가 안갔는데, 슬라이더를 조작할 때 현재 위치한 값이 터치하고 있는 손가락(엄지)의 위치 또는 표시기에 뜬다는 말인듯)

 

▶ Switch

주어진 값의 불리언 상태를 사용자에게 보여준다. (말 그대로 스위치!)

컨트롤을 탭하여 상태를 전환한다.

 

▶ Activity Indicator View

작업이 진행될 때 표시되는 뷰 오브젝트

완료율을 알 수 없는 작업의 처리를 나타내는데 사용된다.

(어디선가 본거같은데.. 작업이 진행중이면 진행중이라고 명확하게 사용자가 인식할 수 있도록 해야 좋은 UI라고.. 누가 그런거같기도)

 

▶ Progress View

작업의 진행상황을 직관적으로 보여줄 수 있는 뷰 오브젝트

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

 

▶ Page Control

열려 있는 각 페이지에 점을 표시하여 얼마나 열려있는지 나타낸다.

현재 열려있는 페이지의 점은 강조 표시된다.

 

▶ Stepper

값을 증감시키는 제어 오브젝트

값을 표시하기 위해 종종 레이블 또는 텍스트 필드와 결합하여 사용된다.

 

▶ Horizontal Stack View, Vertical Stack View

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

스택에 제거되거나 추가되는 뷰에 반응하기 위해 제약 조건을 동적으로 추가, 제거한다.

사용자 정의를 통해 주변 레이아웃에 반응하고 영향을 줄 수도 있다.

 

▶ Table View

data source, delegate를 통해 스크롤 가능한 행 목록을 표시한다.

테이블 뷰의 각 셀은 UITableViewCell 객체로 이루어진다.

행들을 섹션으로 그룹화할 수 있으며 각 섹션에는 머리글과 바닥글을 추가할 수 있다.

 

▶ Table View Cell

Table View에서 각 셀의 속성과 동작을 정의한다.

테이블 셀의 선택 상태 모양을 설정하고, 편집 기능을 지원하고, 악세서리 보기(ex: 스위치 제어)를 표시하고, 배경 모양과 컨텐츠 들여쓰기를 지정할 수 있다.

 

▶ Image View

이미지 또는 일련의 이미지를 애니메이션으로 표시한다.

 

▶ Collection View

data source, delegate를 통해 스크롤 가능한 셀 컬렉션을 표시한다.

컬렉션 뷰의 각 셀은 UICollectionViewCell 객체로 이루어진다.

Collection Views support flow layout as well a custom layouts, 

각 셀들은 섹션으로 그룹화할 수 있으며 섹션과 셀은 선택적으로 보조 views를 가질 수 있다.

 

▶ Collection View Cell

컬렉션 뷰에서 하나의 셀을 나타내는 단일 View

Label, Image View같은 하위 View로 채워져서 모양을 제공한다.

 

▶ Collection Reusable View

섹션 머리글, 바닥글과 같은 Collection View에서 재사용 가능한 View의 속성이나 행동을 정의한다.

 

▶ Text View

사용자가 Text View를 탭하면 키보드가 나타난다.

사용자가 키보드에서 Return을 탭하면 키보드가 사라지고 Text View에서 애플리케이션별 방식으로 입력을 처리할 수 있다.

Text View의 모든 텍스트에 적용되는 글꼴, 색상 및 정렬과 같은 속성을 지정할 수 있다.

 

 

비슷한걸 비교! 

<Text Label vs Text Field vs Text View>

요소 종류	사용하면 좋을 상황
Text Label	텍스트를 표시하고 싶지만 사용자가 텍스트를 입력하거나 편집할 필요가 없는 경우 note: 1. numberOfLines속성을 0으로 주고 너비를 제한하면 Text Label 박스 크기 이상으로 텍스트가 많아질 때 자동으로 줄바꿈하여 박스가 길어짐 2. 동적 유형(>iOS 10)을 사용하는 경우 사용자가 원하는 텍스트 크기를 변경할 때 Label이 글꼴을 자동으로 업데이트하도록 속성을 변경하십숑
Text Field	사용자가 한 줄의 텍스트를 입력하도록 하려면 Text Field를 이용하세유 Text Field는 키보드 유형 및 모양, 자동 대문자 및 수정, 리턴 키, 맞춤법 검사 및 보안 텍스트 입력을 제어할 수 있는 UITextInputTraits 프로토콜을 지원한다. note: 1. 사용자가 텍스트를 입력할 때 Text Field와 상호 작용하는 UITextFieldDelegate의 다양한 메소드를 참조하셔유 2. on-screen 키보드는 Text Field가 첫 번째 응답자가 될 때 표시된다. (일반적으로 사용자가 Field를 탭할 때) Text Field가 beFirstResponder()를 호출하여 첫 번째 응답자가 되도록 강제하고 resumeFirstResponder()로 제거할 수 있다. (= 화면이 전환될 때 자동으로 키보드가 올라오도록 하는 메서드인듯?? ex-쿠팡에서 검색 아이콘 누를 때 자동으로 키보드 올라오는 그런거?) 3. on-screen 키보드가 컨텐츠를 가리지 않도록 하려면 키보드를 관리하는게 좋겠음!
Text View	사용자가 두 줄 이상의 텍스트를 입력하도록 하려면 Text View를 이용하셔유 Text View는 Text Field와 같은 UITextInputTraits를 지원하지만 Text View의 텍스트는 또한 편집 가능하고, 스크롤이 가능하고, selectable하다. Text View는 기본값이 스크롤 가능한 것이고, Interface Builder의 attributes inspector에서 스크롤을 비활성화할 수 있다. note: 1. 스크롤이 활성화된 경우 Text View에는 고유한 컨텐츠 크기가 없다.?? (= 스크롤이 가능하니 Text View의 상자 크기에 맞게 텍스트가 들어가므로 이런 표현을 한듯..?) 2.  Text View를 편집하거나 스크롤할 수 없도록 하더라도 사용자가 텍스트를 선택, 복사, 및 조회할 수 있도록 Text Label 대신 텍스트를 표시하는데 사용할 수 있다. 3. Text View는 기본적으로 선택 및 편집할 수 있으며, Interface Builder 또는 코드에서 기본값을 변경 가능하다.

 

요약 :

• UILabel : 하나 이상의 텍스트 줄을 표시한다. / 선택, 편집, 스크롤이 불가능하다.
• UITextField : 한 줄의 텍스트를 입력한다. / 암호와 같은 민감한 데이터에 대한 보안 항목을 사용한다.(?)
• UITextView : 한 줄 이상의 텍스트를 표시하거나 입력한다. / 선택, 편집, 스크롤이 가능하다.

올바른 항목을 선택하는데 도움이 되는 순서도는 다음의 링크를 참고: WWDC2018

 

 

▶ Scroll View

<참고>

애플리케이션 창의 크기보다 큰 콘텐츠를 표시하는 메커니즘을 제공한다.

사용자가 스와이프 제스처를 통해 해당 콘텐츠 내에서 스크롤할 수 있도록 한다.

 

▶ Date Picker

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

 

▶ Picker View

구성 요소가 행으로 구성되어 있고, 휠을 통해 선택할 수 있는 오브젝트

구성요소의 각 행에는 문자열, Label, Image와 같은 View 객체인 컨텐츠가 있다.

 

▶ Visual Effect View with Blur

다른 View 뒤에서 사용자 정의 가능한 혼합 효과를 제공하는 오브젝트

 

▶ Visual Effect View with Blur And Vibrancy

흐린 배경을 제공하고 생동감 있는 효과로 포함된 View를 렌더링(?)한다.

 

▶ View Controller

툴바, 내비게이션 바, 응용 프로그램 View에 대한 View-management 기능을 제공한다.

 

▶ Navigation Controller

뷰 컨트롤러의 스택과 내비게이션 바를 관리한다.

각각의 뷰 컨트롤러는 내비게이션 아이템을 통해 내비게이션 바의 모양을 커스터마이징할 수 있다.

When view controllers are pushed onto and popped off the stack, the navigation controller updates the navigation bar and view appropriately. 

 

▶ Table View Controller

Table View를 관리하고, 올바른 크기와 크기 조정 마스크를 사용하여 인스턴스를 자동으로 생성한다.

Table View의 Delegate 및 data source 역할을 수행한다.

 

▶ Collection View Controller

Collection View를 관리하여 올바른 크기와 크기 조정 마스크로 인스턴스를 자동으로 생성한다.

Collection View의 Delegate 및 data source 역할을 수행한다.

 

▶ Tab Bar Controller

각각 탭 표시줄 항목을 나타내는 뷰 컨트롤러 집합을 관리한다.

각 뷰 컨트롤러는 탭 표시줄 항목에 대한 정보를 제공하고 항목이 선택될 때 표시될 View를 제공한다.