UIKit Collection View

유민우·2024년 7월 2일
0

Collection View

UI컬렉션 뷰는 UI테이블 뷰와 유사하지만 더 유연한 레이아웃을 제공합니다.
UI컬렉션 뷰는 데이터 항목들을 셀로 표시하며, 각 셀은 UI컬렉션 뷰 셀 Class의 인스턴스 입니다.

구성요소

  1. UICollection View
  • 데이터 항목을 관리하고 표시하는 주된 컴포넌트 이다.
    쉽게 설명하면 큰 상자이다. 이 상자는 여러개의 작은 칸을 가지고 있다.
  1. UICollection View Cell
  • 각 항목을 나타내는 셀이다 사용자 정의 셀을 만들 수 있다.
    쉽게 설명하면 작은 칸이다. 이 칸에 그림이나 글자를 넣을 수 있다.
  1. UICollection View DateSource
  • 컬렉션 뷰에 데이터를 공급하는 역활을 한다.
    쉽게 설명하면 상자에 어떤 그림이나 글자를 넣을 지 알려주는 친구이다.
    필수 메소드로는 'numberOfItemsSection' 과 'cellForItemAt' 이 있다.
  1. UICollection View Delegate
  • 사용자 인터페이스와 상호작용하는 역활을 한다. 셀이 선택되었을 때의 행동을 정의할 수 있다.
    쉽게 설명하면 상자 안의 칸을 클릭했을 때 무슨일이 일어나는지 알려주는 친구이다.
  1. UICollection View Flow Layout
  • 컬렉션 뷰의 기본 레이아웃 객체로, 그리드 기반 레이아웃을 제공한다.

    UICollection View Flow Layout 은 우리가 여러개의 사진이나, 그림을 정리해서 예쁘게 보여줄 때 사용하는 규칙을 정리하는 도구이다. 예를들어 사진을 붙일 때 어떤 순서로, 어떤 크리고, 어떤 간격으로 붙일지 정하는 것이다.
    주로 수평이나 수직으로 아이템을 배치하는데 사용한다.

    UICollection View Flow Layout 주요 속성

  1. itemSize
  • 각 아이템(셀)의 크기를 설정한다.
  • 기본값은 (50,50) 이다.
  1. minimumLinespacing
  • 아이템 사이의 세로 간격을 설정한다.
  • 기본값은 10 이다.
  1. minimumInteritemSpacing
  • 아이템 사이의 가로 간격을 설정한다.
  • 기본값은 10 이다.
  1. sectionInset
  • 섹션의 가장자리에 있는 아이템과 컬렉션 뷰 사이의 여백을 설정합니다.
  • 기본값은 (0, 0, 0, 0)
  1. scrollDirection
  • 스크롤 방향을 설정합니다. '.vertical' , 또는 '.horizontal' 중 하나를 선택할 수 있습니다.

UICollection View는 데이터 목록을 유연하게 표시할 수 있는 강력한 도구이다. UICollection View의 구성요소와 기본 사용법을 이해하고 나면 , 이를 사용하여 다양한 UI를 구할 수 있고 커스텀 셀과 레이아웃을 통해 복사 복잡한 데이터 시각화도 손쉽게 구현할 수 있다.

profile
유민우

0개의 댓글