UIColletionView이 무엇 ???
UIColletionView는 유연하게 변경 가능한 layout을 사용하여 특정 타입 형태로 표현된 데이터 집합을 표현하는 방법
행과 열의 나열뿐만 아니라 다양한 배열 구현을 가능하게 함. 격자무늬, 스택, 원형 레이아웃, 동적으로 변경되는 레이아웃 등 모두 가능 !
UIColletionView는 데이터와 해당 데이터를 표현하는 데 사용하는 시각적 요소를 엄격하게 구분하며
데이터를 어떻게 관리할지, 어떻게 나타낼지를 모두 별도로 고려해서 개발을 해야 한다.
또한 사용자에게 어떠한 형태의 화면을 보여줄지, view를 어떻게 배치할지, 각 view는 어떠한 속성을 가질지 가져와서
화면에 배치하는 모든 작업도 개발을 해야 한다.
UIColletionView를 구현하기 위한 class와 protocol
UIKit에서 제공하는 UICollectionView 관련 클래스와 프로토콜 ~!
Top-level containment and management
최상위 레벨에서 관리 역할을 하는 UIColletionView , UIColletionViewController가 있다.
UIColletionView 객체는 ColletionView가 가지는 Content가 보이는 영역을 어떻게 할지 정의를 한다.
이 클래스는 UIScrollerView를 상속하기 때문에
이후에 다룰 Layout에서 수신하는 Layout 정보를 기반으로 데이터를 쉽게 표시할 수 있게 도와준다.
UIColletionViewController는 이러한 UIColletionView를 ViewController 수준에서 관리할 수 있게 해 준다.
Content management
DataSource는 UIColletionView와 연결된 가장 중요한 필수 요소이다.
DataSource는 ColletionView의 Content를 관리하고 해당 Content를 표시하는데 필요한 View를 생성한다.
이러한 DataSource를 구현하려면 UIColletionViewDataSource Protocol을 준수하는 객체를 만들어야 한다.
UIColletionViewDelegate를 사용하면 ColletionView에서 발생하는 특정 액션이나 상황을 캐치해서 View의 동작을 사용자 지정할 수 있다.
Delegate는 DataSource와 달리 선택 사항이다.
DataSource를 구현하지 않고는 ColletionView를 나타낼 수 없지만 Delegate는 상황에 따라 선택하는 것이다.
Presentation
UIColletionView에 표시되는 모든 View는 UIColletionViewReusableView의 인스턴스여야 한다.
이 클래스는 ColletionView에서 사용 중인 재사용 메커니즘을 지원
매번 새 뷰를 만드는 대신 이 뷰를 재사용하여 성능을 향상시키고 특히 스크롤하는 동안 성능을 향상 시킴
tableView에서도 마찬가지로 많은 cell을 갖고 있어도 ReusableView을 이용하는 것과 동일!
Layout
UIColletionView만 가지고 있는 속성으로 UIColletionView내에서 Cell과 ReusableView의 위치 크기 시각적 속성 등을 정의하는 역할
이러한 책임 분리를 통해 앱에서 관리하는 데이터 객체를 변경하지 않고도 레이아웃을 동적으로 변경할 수 있다!
UIColletionView Layout은 Layout 대상이 되는 View를 직접 소유하지 않고 layout process 동안 이 UICollection 뷰의 레이아웃 객체는 Cell과 ReusableView 위치 크기 시각적 모양을 설명하는 속성 즉, layout 속성 객체 Attributes를 생성하고 View에 적용하게 된다.
레이아웃 객체는 UIColletionView 내에서 데이터 항목이 삽입, 삭제, 이동할 때마다 UIColletionView UpdateItem 클래스의 인스턴스를 받는다.
Flow layout
Grid나 Line-based Layout을 구현하는 데에 사용하는 구체적인 레이아웃 객체
클래스를 있는 그대로 혹은 delegate와 사용하기 때문에 레이아웃 정보를 동적으로 사용자 지정할 수 있게 도와준다.
* 5가지 요소를 합쳐 CollectionView가 표시되는 모습 !!!
위의 그림은 다섯 가지 요소 간의 관계를 보여준다.
먼저 UIColletionView는 우측에 있는 DataSource에서 표시할 Cell에 대한 정보를 가져온다.
DataSource , Delegate 개체는 사용자 지정 객체 Cell 선택 강조 이런 표시를 포함해서 Content를 관리하는 데에 사용
좌측에 있는 레이아웃 객체들은 해당 cell이 속하는 위치를 결정하고 해당 정보를 하나 이상의 레이아웃 속성 객체로 ColletionView에 보내는 역할을 한다.
ColletionView는 이 레이아웃 정보를 실제 cell을 포함한 다른 리유저블 뷰들과 병합을 해서 최종적으로 보여지는 프레젠테이션을 만들게 됨.
UIColletionViewFlowLayout? CompositionalLayout?
UIColletionView는 무려 iOS 6부터 제공되는 UIComponent 였다.
일반적이고 단순한 뷰, 그리드로 그리기, 레이아웃에서 정의한 대로 라인에 따라 공간을 채우고 하는 것까지는 자연스럽게 만들 수 있다.
그러나 오늘날의 뷰에는 실제로 UIColletionView로만 구현을 한다고 해도 감안해야 할 속성이 매우 복잡하고
심지어 애플에서도 UIColletionView는 flowLayout만 이용해서 레이아웃을 설정하라고 권장한다..!
layout을 커스텀해서 사용하면 코드가 길어지고 그에 따라 버그 발생률도 높아지고 가독성도 떨어지며 유지보수도 힘들어진다.
이러한 어려움을 개선하고 직관적이고 간편한 레이아웃 구현을 위해 WWDC19에서 iOS13부터 Compositional Layout을 발표했다 !!!
이러한 업데이트를 제공하는 데에 기반이 되는 개념은
먼저 이름에서 나타나듯이 구성 가능하게 즉, 복잡한 UI를 그리는 것이 목표더라도 각각의 구성요소는 단순하게 하여 복잡한 UI를 구현한다는 것이다.
두 번째로 유연해야 한다. 유연하게 변경 가능하고 응용 가능하여 이것만으로도 기존의 flow layout, custom으로 했던 layout도 구현할 수 있어야 한다.
마지막으로 빨라야 한다. 퍼포먼스를 프레임워크에서 알아서 자체 성능 최적화를 수행하여 개발자는 성능에 대한 고민 없이 레이아웃 목적에만 집중할 수 있어야 한다.
Compositional Layout
아래 사진과 같이 코드들을 조합해서 복잡한 레이아웃을 구현할 수 있다.
Compositional Layout을 구현하려면 item, group, section이 필요하다.
'iOS > 개념' 카테고리의 다른 글
| [iOS] SwiftUI - Container View (0) | 2021.10.13 |
|---|---|
| [iOS] SwiftUI (0) | 2021.10.13 |
| [iOS] Local, Remote Notification 개념 (0) | 2021.10.04 |
| [iOS] HTTP 통신 / Alamofire (0) | 2021.10.02 |
| [iOS] HTTP 통신 / URLSession (0) | 2021.10.02 |
