아요 개발 일기
[iOS] UICollectionView 본문
안녕하세요 :D
오늘은 UICollectionView에대해 알아보도록하겠습니다!!
Apple Documentation을 참고하여 작성하였습니다
UICollectionView 란?
유연하게 변경가능한 layout을 사용하여 특정 타입 형태로 정렬된 데이터 집합을 표시합니다.
가장 일반적인으로 격자와 같은 배열로 표시할때 사용하지만,
iOS의 CollectionView는 그저 행과 열의 나열뿐만 아니라 다양한 배열 구현 가능하게 합니다.
그리드, 스택, 원형 레이아웃 또는 동적으로 변경되는 레이아웃 모두 UICollectionView로 가능합니다.
UICollectionView의 영역
UICollectionView는 데이터와 해당 데이터를 표시하는데 사용되는 시각적 요소를 엄격하게 구분합니다.
즉, 위 이미지와 같이 Data 영역과 Layout 영역으로 구분되어지고
각각 아래 표와 같은 사항을 고려하여 개발해야합니다.
| Data | Layout |
| 어떻게 관리할지 어떻게 나타낼지 |
View를 어떻게 배치할지 각 View는 어떠한 속성을 가질지 |
영역별로 각각 분리가 되어서 각자 역할에 맞는 정보를 제공을 하고
UICollectionView는 이러한 두 부분을 종합하여 최종 형태를 구축합니다.
이렇게 UICollectionView는 데이터가 화면에 배열되고 표시되는 방식(layout)과 표시되는 데이터(data)를 분리 하도록 디자인 되었으며,표시할 데이터를 엄격하게 관리하는 동시에 시각적인 표현은 다양한 객체에 의해서 관리 됩니다 :D
UICollectionView를 구현하기 위한 Class와 Protocol
대부분의 Class는 하위 클래스와 할 필요 없이 있는 그대로 사용하도록 설계되었기때문에
상대적으로 아주 적은 코드로도 복잡한 UI를 구현할 수 있습니다.
(이 부분이 큰 장점이라고 생각해요!)
| Purpose | Classes / Protocols |
| Top-level containment and management | UICollectionView UICollectionViewController |
| Content management | UICollectionViewDataSource UICollectionViewDelegate |
| Presentation | UICollectionReusableView UICollectionViewCell |
| Layout | UICollectionViewLayout UICollectionViewLayoutAttributes UICollectionViewUpdateItem |
| Flow layout | UICollectionViewFlowLayout UICollectionViewDelegateFlowLayout |
위 표는 구현할때 사용하는 Class와 Protocol을 정리한 것입니다!
자세히 살펴볼까요?
Top-level Containment and Management
특징
- 시각적인 요소 정의
- UIScrollView 상속
- Layout 정보 기반 데이터 표시
class
| UICollectionView | UICollectionViewController |
| CollectionView가 가지는 컨텐츠의 보여지는 영역을 정의 | CollectionView를 ViewController 수준에서 관리 |
Content Management
특징
collection view와 연결된 가장 중요한 Object인
Data Source Object와
CollectionView의 content와 해당 content를 표시하는데 필요한 view를 만드는
Data Source Management
이 두가지 기능은 반드시 구현해야하는데
이는 UICollectionViewDataSource protocol을 준수하는 object를 만들면 구현됩니다.
자세한 사항은 아래 표를 참고해주세요!
class
| UICollectionViewDataSource protocol | UICollectionViewDelegate protocol |
| - 필수 요소 - Content 관리 및 Content 표시에 필요한 View 생성 |
- 선택 요소 - 특정 상황에서 View 동작 custom |
Presentation
특징
- Header, Footer
- 재사용 가능
class
| UICollectionReusable | UICollectionViewCell |
| - collection view에 표시되는 모든 view는 UICollectionViewReusableView class의 인스턴스여야 함 - 이 class는 collection views에서 사용중인 재사용 매커니즘을 지원 - view를 재사용하면( 새로운 view를 만드는 대신) 일반적으로 성능이 향상되고 특히 스크롤하는 동안의 성능이 향상 됨 |
UICollectionViewCell object는 주 데이터 항목에 사용하는 재사용 가능한 view로 특정 유형의 배열을 가지게 됨 |
Layout
특징
- 각 항목 배치 등 시각적 스타일 담당
- View를 직접 소유하지 않는대신 Attributes 생성
- 데이터 항목 수정시 UpdateItem 인스턴스 수신
- 책임 분리를 통해서 앱에서 관리하는 데이터 객체를 변경하지 않고도 layout을 동적으로 변경할 수 있음
| UICollectionViewLayout | UICollectionViewLayoutAttributes | UICollectionViewUpdateItem |
| UICollectionView 내에서 cell과 reusableView의 위치, 크기, 시각적 속성 과 같은 것들을 정의하는 역할을 함 |
UICollectionView의 Cell과 ReusableView등의 위치, 크기, 시각적 모양등을 설명하는 속성을 알려주는 Layout 속성 객체를 만듬 그 후, UICollectionView가 이러한 속성을 실제 View 객체에 적용하게 됩니다. |
Layout 객체는 UICollectionView 내에서 데이터 항목이 삽입, 삭제 또는 이동할때마다 UICollectionUpdateItem 클래스에 인스턴스를 받음 때문에 해당 클래스의 인스턴스는 직접 만들 필요 없음 |
부모뷰가 자식뷰를 재배치하는데 사용하는 LayoutSubView Method를 떠올렸을수도 있습니다.
하지만 이 UICollectionView Layout 객체는 Layout 대상이되는 View를 실제로 소유하진 않기때문에
해당 Method에서 구현하는 상황과는 전혀 다르답니다!
Flow Layout
특징
- Grid, line - based layout 구현
- 레이아웃 정보를 동적으로 Custom
| UICollectionViewFlowLayout | UICollectionViewDelegateFlowLayout protocol |
| 그리드 또는 기타 선 기반 레이아웃을 구현하는데 사용하는 구체적인 레이아웃 객체 |
클래스를 있는 그대로 또는 Delegate와 함께 사용하기때문에 Layout 정보를 동적으로 사용자가 지정할 수 있게 도와줌 |
Collection View와 관련 핵심 Object간의 관계
먼저, UICollectionView는 우측 데이터 소스에서 표시할 Cell에대한 정보를 가져옵니다.
Data source와 Delegate 객체(Object)는 사용자 지정 객체 cell 선택, 강조등 표시를 포함해서 컨텐츠를 관리하는데 사용이 됩니다.
좌측 layout 객체들은 해당 Cell이 속하는 위치를 결정하고 해당 정보를 하나 이상의 Layout 속성 객체 형태로 collectionView에 보내는 역할을 합니다.
그 후 CollectionView는 이 Layout 정보를 실제 Cell을 포함한 다른 reusableView들과 병합을 해서 최종적으로 보여지는 프레젠테이션을 만들게됩니다.
'iOS' 카테고리의 다른 글
| [iOS] Cocoa Touch Framework (2) | 2023.01.02 |
|---|---|
| [iOS] Code base로 UI 구현 (StoryBoard를 사용하지 않고 UI 구현하기) (0) | 2023.01.02 |
| [iOS] ViewController Life - cycle (생명주기) (0) | 2023.01.02 |
| [iOS] Apple's MVC 패턴 (0) | 2023.01.02 |
| [iOS] UIKit (0) | 2023.01.02 |
