스토리보드 컴포넌트 및 AutoLayout 개념

김지훈·2022년 8월 1일
0

스토리보드 컴포넌트

표시

상위클래스

  • 하위클래스

UIView

화면의 직사각형 영역에 대한 내용을 관리한다.
앱 사용자 인터페이스의 기본 빌딩 블록이며 공통적인 동작을 정의한다. 뷰 객체는 경계 사각형 내에서 콘텐츠를 렌더링하고 해당 콘텐츠와의 모든 상호 작용을 처리한다. 아래 클래스들이 UIView의 하위클래스에 해당하며 Apple은 이러한 클래스들을 개발자가 직접 정의하려고 하기보다 UIKit 프레임워크가 제공하는 UIView의 하위클래스를 사용하기를 권장한다.

  • UILabel

    텍스트의 한줄 이상을 표시한다.
    레이블 텍스트의 전체 모양을 구성하고 특성 문자열을 사용하여 텍스트 내의 하위 문자열 모양을 사용자 정의할 수 있다.

  • UIScrollView

    포함된 View의 스크롤 및 확대/축소를 허용한다.

    • UITextView

      스크롤 가능한 여러줄 텍스트 영역이다.
      UITextView은 Custom style information을 사용하여 텍스트 표시를 지원하고 텍스트 편집도 지원한다. 일반적으로 TextView를 사용하여 큰 텍스트 문서의 본문을 표시할 때와 같이 여러 줄의 텍스트를 표시한다.
    • UITableView

      다음 수업
    • UICollectionView

      다음 수업
  • UIStackView

    열이나 행에 뷰 컬렉션을 배치하기 위한 인터페이스이다.
    StackView를 사용하면 AutoLayout 기능을 활용하여 디바이스의 방향, 화면 크기 및 사용가능한 공간의 변경 사항에 동적으로 적응할 수 있는 사용자 인터페이스를 생성할 수 있다.

  • UIImageView

    단일 이미지 또는 애니메이션 이미지를 인터페이스에 표시하는 객체이다.
    UIImageView를 사용하여 이미지를 그릴 수 있다. 예를 들어, JPEG 및 PNG파일과 같은 표준 이미지 파일의 내용을 표시할 수 있다.

  • UIActivityIndicatorView

    작업이 진행 중임을 나타내는 View이다.

    startAnimating()과 stopAnimating메서드를 활용함으로써 UIActivityIndicatorView가 애니메이션되는 시기를 제어할 수 있다.

  • UIProgressView

    시간경과에 따른 작업 진행 상황을 나타내는 View이다.

  • UITabBar

    앱 하단에서 여러 모드를 선택하기 위해 버튼을 표시하는 View이다

    일반적으로 UITabBarContoller와 함께 사용하지만 독립적으로 사용될 수 있다.

  • UISearchBar

    사용자로부터 검색 관련 정보를 수신하기 위한 View이다.

    UISearchBar의 텍스트 입력을 위한 텍스트 필드, 검색 버튼, 북마크 버튼, 취소 버튼 등을 제공한다.

UIControl

  • UIButton

    사용자 상호 작용에 대한 응답으로 사용자 지정 코드를 실행하는 UIControl의 하위클래스이다
    버튼을 탭하거나 선택하면 버튼이 연결된 모든 작업을 수행한다. 레이블, 이미지 등을 사용하여 버튼의 목적을 전달한다. 기본 스타일은 Plain Button이며 Gary, Tinted, Filled 3가지의 스타일이 존재한다. 추가로 Pull Down Button, Pop Up Botton과 같은 버튼 스타일이 추가 되었다.

    • Plain Button

    • Gray Button

    • Tinted Button

    • Filled Button

    • Pop Up Button

      팝업 버튼은 상호 베타적인 옵션메뉴를 표시한다.

    • Pull Down Button

      풀다운 버튼은 버튼의 목접과 직접적으로 관련된 항목 또는 작업 메류를 표시한다.

  • UISeguementedControl

    여러 세그먼트로 구성된 수평 컨트롤로, 각 세그먼트는 개별 버튼으로 작동한다.

  • UIPageConrtrol

    각 앱의 문서 또는 기타 데이터 모델 엔터티의 페이지에 해당하는 일련의 가로 점을 표시한다.

  • UITextField

    인터페이스에서 편집 가능한 텍스트 영역을 표시한다.

  • UISlider

    값의 연속 범위에서 단일 값을 선택하기 위한 컨트롤이다.

  • UISwitch

    켜기/끄기와 같은 이진 선택을 제공하는 컨트롤이다.

  • UIStepper

    값을 늘리거나 줄이는 컨트롤이다.

UIViewController

UIKit 앱의 뷰 계층 구조를 관리하는 개체이다.

  • UINavigationController

    계층적 콘텐츠 탐색을 위한 스택 기반 체계를 정의하는 ViewController이다.

  • UITabbarController

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

  • UISplitViewController

    계층적 인터페이스를 구현하는 컨테이너 ViewContoller이다.

    UISplitViewController는 계층적 인터페이스에서 자식 ViewContoller를 관리하는 ContainerViewController이다. 이 유형의 인터페이스에서는 한 ViewContoller의 변경이 다른 View의 내용을 변경할 수 있다.

  • UIPageViewController

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

  • UIHostingViewController

    SwiftUI 뷰 계층을 관리하는 UIKit 뷰 컨트롤러.
    SwiftUI View를 UIKit View 계층 구조에 통합하는 역할을 한다.


AutoLayout


Clone Coding

선택 앱

무신사

선택 화면

브랜드 탭

선택 화면 캡쳐

사용된 UI 컴포넌트

UIScrollView
UIView
UILabel
UIButton
UIImageView
UIStackView
UIPageControl
UITabBar
Tab Bar

0개의 댓글