[iOS] 스토리보드 컴포넌트 및 AutoLayout

📚 storyboard

	code base와 다르게 시각적으로 화면을 구성한다.
    
    

• Scene : 하나의 화면. 위에서 view controller가 하나의 scene
• Segue : 장면을 연결하는 흐름. 위에서 화살표에 해당. 여러 개의 View Controller를 Segue로 연결하여 화면 전환

• Label : 한 줄 이상의 텍스트를 표시하는 뷰
• Button : 사용자 상호 작용(탭)에 대한 응답으로 사용자 지정 코드를 실행하는 컨트롤
• Pull Down Button : 작업 목록을 나타내는 메뉴
• Pop Up Button : 클릭시 선택 목록을 나타내는 메뉴가 표시되며 선택한 항목은 팝업 단추의 제목으로 표시됨
• Segmented Control : 단일 또는 다중 선택 또는 명령 목록을 나타내며, 각 세그먼트는 텍스트 또는 영상을 표시할 수 있지만 둘 다 표시할 수는 없음

• Text Field : 편집 가능한 텍스트를 포함할 수 있는 둥근 직사각형. 사용자가 누르면 키보드가 나타나고, 사용자가 키보드에서 돌아가기를 누르면 키보드가 사라지고 텍스트 필드가 응용 프로그램별로 입력을 처리할 수 있음

• Slider : 값의 범위를 나타내는 트랙이라고 하는 수평 막대. 현재 값은 표시기 또는 엄지손가락의 위치로 표시. 사용자는 트랙을 따라 엄지손가락을 움직여 값을 선택하며 트랙과 엄지손가락 모양을 모두 사용자 정의 가능

• Switch : 지정된 값의 부울 상태를 사용자에게 보여주는 요소이며 컨트롤을 누르면 상태를 전환

• Activity Indicator View : 완료 비율을 알 수 없는 작업을 처리 중임을 표시

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

• Page Control : 응용프로그램의 열린 페이지 수를 나타내며 현재 본 페이지에 해당하는 점이 강조 표시됨

• Stepper : 값의 증감을 제어하며, 레이블 또는 텍스트 필드와 결합하는 경우가 많음

• Color Well : 누르면 색상 선택기가 표시되며, 색상 선택기에서 선택한 색상이 Color Well에 표시됨

• Paste Control : 사용자가 앱에 붙여넣기 게시판 내용을 배치하기 위해 누르는 단추

• Horizontal Stack View : 여러 뷰들을 수평으로 배치하는 스택을 작성하는 데 필요한 제약 조건을 작성하고 관리
• Vertical Stack View : 여러 뷰들을 수직으로 배치하는 스택을 작성하는 데 필요한 제약 조건을 작성하고 관리
• Table View : 여러 행을 사용하여 리스트 형태로 데이터를 표시하며 스크롤이 가능
• Table View Cell : 테이블 뷰를 이루는 각각의 행. 사용자가 삽입, 삭제, 재정렬 가능
• Image View : 이미지 또는 일련의 이미지를 애니메이션으로 표시
• Collection View : 스크롤 가능한 셀 컬렉션을 표시. 테이블 뷰와 다르게 수평으로도 스크롤이 가능
• Collection View Cell : Collection View의 각 셀
• Collection Reusable View : 섹션 header나 footer 같은 Collection View에서 재사용 가능한 반복적으로 나오는 뷰
• Text View :When a user taps a text view, a keyboard appears; when a user taps Return in the keyboard, the keyboard disappears and the text view can handle the input in an application-specific way. You can specify attributes, such as font, color, and alignment, that apply to all text in a text view. 탭시 키보드가 나타나고, 리턴을 누르면 키보드가 사라지고 응용 프로그램별로 입력을 처리
• Scroll View : 응용 프로그램의 창 크기보다 큰 콘텐츠를 표시. 사용자는 스와이프 제스처를 통해 해당 콘텐츠 내에서 스크롤 가능

• Date Picker : 여러 회전 휠을 사용하여 사용자가 날짜 및 시간을 선택
• Picker View : 휠을 통해 문자열 또는 레이블 또는 이미지와 같은 뷰 객체 선택
• Visual Effect View with Blur : 다른 뷰 뒤에서 사용자 정의 가능한 블러 배경을 제공
  • Visual Effect Views with Blur and Vibrancy : 블러 배경을 제공하며 진동 효과가 있는 뷰를 제공
• Map Kit View : 내장형 지도 인터페이스를 제공. 이 클래스를 그대로 사용하여 지도 정볼르 표시하며 앱의 지도 내용을 조작 가능. 사용자 정의 정보로 주석 달기 가능
• MetalKit View : Metal 오브젝트 표시
• GLKit View : openGL로 만든 그래픽 표시
• SceneKit View : SceneKit으로 만든 그래픽 표시
• SpriteKit View : SpriteKit으로 만든 그래픽 표시
• ARKit SceneKit View : SceneKit과 ARKit으로 만든 그래픽 표시
• ARKit SpriteKit View : SpriteKit과 ARKit으로 만든 그래픽 표시
• Web View (deprecated) : 앱 내 브라우저와 같이 대화형 웹 콘텐츠를 표시
• WebKit View : 뷰 및 윈도우에서 웹 페이지를 렌더링하는 렌더링 엔진 라이브러리
• RealityKit AR View : RealityKit으로 만든 그래픽 표시
• Room Capture View : 사용자가 장치의 카메라로 자신의 룸을 스캔할 수 있는 뷰

• Core Location Button : 장치의 현재 위치에 대한 일회성 권한을 부여하는 버튼
• Navigation Bar : 앱 화면 상단에 네비게이션 표시줄이 나타나 콘텐츠 계층 구조를 통한 네비게이션이 가능하게 하는 바
• Navigation Item : 네비게인션 바에 사용하는 컨텐츠
• Toolbar : 자주 사용하는 명령과 현재 보기와 관련된 작업을 수행하도록 하는 스크린 아래에 위치한 바
• Bar Button Item : toolbar, navigation bar, shortcuts bar에 배치하는 특수 버튼
• Bar Button Item Group : toolbar, navigation bar, shortcuts bar에 배치하는 하나 이상의 특수 버튼 그룹
• Fixed Space Bar Button Item : toolbar에서 고정된 값의 공간 제공
• Flexible Space Bar Button Item : toolbar에서 유동적인 공간 제공
• Tab Bar : 앱에서 뷰, 하위 작업 또는 모드를 선택할 수 있는 막대를 표시
• Tab Bar Item : Tab Bar에서 사용하는 아이템
• Search Bar : 검색 필드가 있는 바
• Menu Command : 액션이나 설정들을 보여줌
• Main Menu : macOS에서 기본 메뉴로 사용할 기본 메뉴 및 명령 집합을 포함
• Sub Menu : 서브 메뉴
• Inline Section Menu : 그룹화한 메뉴

• View : 뷰 계층에서 상위 영역의 직사각형 영역 내에서 하위 뷰를 그리고 배치하고 이벤트를 처리하기 위한 구조를 제공하는 비어있는 뷰
• Container View : 자식 뷰 컨트롤러를 만들어주는 뷰. 위 뷰 컨트롤러는 포함된 segue와 함께 지정된다.
• View Controller : UIKit 앱의 뷰 계층을 관리하는 개체. 사용자가 화면을 보는 것에 대한 관리 기능을 제공.
  - 윈도우와 뷰 사이는 뷰 컨트롤러를 통해 연결. 뷰 컨트롤러는 뷰의 계층을 관리하여, 윈도우에 전달하고, 모바일 디바이스에 감지된 터치 이벤트를 윈도우로부터 전달받아처리하는 역할
• Storyboard Reference : 다른 스토리보드 참조
• Navigation Controller : 계층적 내용을 탐색하기 위한 스택 기반 구성표를 정의하는 컨테이너 뷰 컨트롤러
• Table View Controller : 테이블 뷰가 내장된 뷰 컨트롤러
• Collection View Controller : 컬렉션 뷰가 내장된 뷰 컨트롤러
• Tab Bar Controller : 탭 바가 내장된 뷰 컨트롤러
• Split View Controller : 분할 화면을 위한 뷰 컨트롤러
• Page View Controller : 여러 페이지를 보여주기 위한 뷰 컨트롤러
• Hosting View Controller : SiwftUI를 위한 뷰 컨트롤러
• GLKit View Controller : openGL을 관리하는 뷰 컨트롤러
• AVKit Player View Controller : 오디오 비쥬얼 컨텐츠를 표시하기 위한 뷰 컨트롤러
• Look Around View Controller : map look around 뷰를 관리하는 뷰 컨트롤러
• Object : custom class inspector를 사용하여 이 개체를 특정 클래스의 인스턴스로 변환

• Tap Gesture Recognizer : 사용자가 탭하면 작업 메시지 전송. 단일 또는 다중 터치로 단일 또는 다중 탭에 대해 구성가능
• Pinch Gesture Recognizer : 사용자가 두 손가락으로 꼬집는 동안 작업 메시지를 계속 전송. 콘텐츠 확대 또는 축소시 사용
• Rotation Gesture Recognizer : 사용자가 두 손가락으로 회전을 수행하는 동안 작업 메시지를 계속 전송
• Swipe Gesture Recognizer : 사용자가 스와이프할 때 작업 메시지 전송. (닦아내기, 특정 방향으로 쓸기)
• Pan Gesture Recognizer : 드래그시 메시지 전송
• Screen Edge Pan Gesture Recognizer : 스크린 끝에서 시작하는 드래그시 메시지 전송
• Long Press Gesture Recognizer : 길게 터치할 때 메시지 전송
• Custom Gesture Recognizer : 사용자 지정 터치시 메시지 전송

📚 AutoLayout

	오토 레이아웃은 뷰에 지정된 constraints(뷰의 x,y위치와 뷰의 크기)에 따라서 각 디바에스에 맞춰 
    뷰의 크기와 위치를 계산하여 그려주는 기능이다. 
    이를 통해 뷰의 내부적 변경과 외부적 변경에 대응한다.
    

External Changes & Internal Changes

External Changes : super 뷰의 크기나 모양이 변경될 때 발생

• 사용자가 window 크기를 조정하는 경우 (OS X)
• 사용자가 iPad에서 Split 뷰를 입력하거나 종료 (iOS)
• 장치 회전(iOS)
• 활성 통화 및 오디오 녹음 표시줄이 나타나거나 사라지는 경우 (iOS)
• 다양한 크기의 클래스를 지원
• 다양한 화면 크기를 지원

Internal changes : 사용자 인터페이스의 보기 또는 컨트롤 크기가 변경될 때 발생

• 앱에 의해 표시되는 콘텐츠가 변경되는 경우
• 앱이 국제화를 지원
• 앱이 Dynamic Type을 지원 (iOS)
  

attribute

• Top : 사각형 상단부터의 여백
• Bottom : 사각형 하단부터의 여백
• Baseline : 텍스트의 하단
• Leading : 텍스트 시작부터의 여백
• Trailing : 텍스트 끝부터의 여백
• CenterX : 수평 중심
• CenterX : 수직 중심

Safe Area

• Safe Area : 상태바 등과 겹치지 않게 미리 IDE에서 표시해 주는 것 (파란색 테두리로 표현)
  

Constraint

Constraint 설정 예시

1. pin으로 설정

상단, 하단, 좌측, 우측으로부터 10씩 margin

2. ctrl + 드래그

• Trailing Space to Safe Area
• Top Space to Safe Area
• Leading Space to Safe Area
• Bottom Space to Safe Area
• Center Horizontally in Safe Area
• Center Vertically in Safe Area
• Equal Widths
• Equal Heights
• Aspect Ratio

[참고]
https://developer.apple.com/
https://to-remember-for-100-years.tistory.com/95
https://ios-development.tistory.com/30
https://codecrafting.tistory.com/34
https://velog.io/@wook4506/iOS-Swift-Storyboard%EC%99%80-ViewController