UICollectionView

Updated:

🔷 UICollectionView

UICollectionView official docs - https://developer.apple.com/documentation/uikit/uicollectionview

특징

  • UICollectionView 유연하게 변경 가능한 레이아웃을 사용하여, 특정 타입 형태로 정렬된 데이터 집합을 표시하는 방법임.

  • 일반적으로 항목을 격자와 같은 배열 형태로 나타내는것이지만, iOS 의 CollectionView 는 행과 열의 나열 뿐만 아니라, 다양한 배열 구현을 가능하게 하여 Grid, Stack, 원형 레이아웃, 동적으로 변경되는 레이아웃 모두 UICollectionView 로 만들 수 있음

🔷 UICollectionView 를 구현하기 위한 Class 와 Protocol

image

데이터가 화면에 배열 되고, 표시되는 방식과 표시되는 데이터를 분리하도록 디자인 되어 있음 표시할 데이터를 엄격하게 관리 하는 동시에, 시각적인 다양한 객체에서 관리가 되게 된다

위의 표에서 대부분의 class 는 하위 클래스 화 할 필요 없이 있는 그대로 사용하도록 설계 되었기 때문에, 상대적으로 적은 코드로도 복잡한 UI 를 쉽게 구현할 수 있음

🔷 Top-level Containment and Management

image

최상위 레벨에서 관리 역활을 하는 UICollectionView, UICollectionViewController 는 최상위 UIScrollView 를 상속하기 때문에 Layout 정보 기반 데이터를 쉽게 표시함

🔷 Content Management

image

데이터 소스는 UICollectionView 와 연결된 가장 중요한 객체로써, 반드시 제공해야되는 객체임

image

CollectionView 에서 발생하는 특정 action 이나, 상황을 catch 해서 View 의 동작을 사용자 지정 할 수 있음, 이거는 Optional 임, 즉 DataSource 를 구현하지 않고서는 UICollectionView 를 나타 낼 수 없음

🔷 Presentation

image

UICollectionView 에 표시되는 모든 View 는 Collection reusable class 에 instance 이어야 함 재사용 메커니즘을 지원하는데, 매번 새로운 View 를 만드는 대신해서 같은형태로 재사용 가능하게 함.

🔷 Layout

image

하위 클래스들을 layout 객체로 묶어서 가리키며, 위치, 크기, 시작적 속성 이런것들을 정의하는 역활을 함. App 에서 관리하는 데이터 객체를 관리하지 않고도 Layout 을 동적으로 변경할 수 있음

🔷 Flow Layout

image

Grid 나 기타 선 기반의 레이아웃을 사용하는데, class 를 있는 그대로, delegate 와 함께 사용하기 때문에 layout 을 동적으로 사용자 정보를 지정할 수 있게 도와줌

Layout metric 을 나타내는 layout 객체

image

세로 스크롤의 flow 레이아웃이 cell, header, footer 이러한 supplementally 뷰를 정렬할때를 나타냄

🔷 5가지 요소를 합쳐 CollectionView 가 표시되는 모습

image


🔶 🔷 📌 🔑 👉

🗃 Reference

Categories:

Updated:

Leave a comment