layout: post
title: "May 17, 2021, TIL (Today I Learned) - Collection View vs TableView"
summary: "iOS 커리어 스타터 캠프 2기"
author: inwoodev
date: '2021-05-17 22:35:23 +0530'
category: ['Swift_iOS', 'TIL', 'View']
thumbnail: /assets/img/posts/light-bulbs.jpg
keywords: ios, swift, collectionView
permalink: /blog/TIL(Today I Learned)/44
usemathjax: true
수업내용
콜렉션뷰
-
A. 👻 😆 테이블뷰와 컬렉션뷰의 공통점과 차이점에 대해 이야기해봅시다.
-
테이블뷰
- 부스트코스 설명
- 테이블뷰는 iOS 애플리케이션에서 많이 활용하는 사용자 인터페이스입니다. 테이블뷰는 리스트 형태를 지니고 있으며 스크롤이 가능해 많은 정보를 보여 줄 수 있습니다.
-
컬렉션뷰
- 부스트코스 설명
- iOS 애플리케이션에서 컬럭센뷰는 그리드와 스택, 타일, 그리고 원형 배열을 포함하여 다양한 유연성을 제공하는 인터페이스입니다. 컬렉션뷰는 유연하고 변경 가능한 레이아웃을 사용하여 데이터 아이템의 정렬된 세트를 표시하는 수단입니다. 컬렉션뷰의 가장 일반적인 용도는 데이터 아이템을 그리드와 같은 형태로 표현합니다. 더불어 다양한 방법으로 컬렉션뷰의 레이아웃을 사용자 정의할 수 있습니다.
공통점
- 여러가지를 나열한다
- 셀을 재사용한다
차이점
- 테이블뷰 수직 나열 / single column
- 컬렉션뷰 수직+가로 나열, 앨범처럼 볼수 있음 / 그리드, 스택, 타일 / ordered collection of data items
👻 😆 컬렉션뷰를 학습하면서 앞서 배웠던 테이블뷰와 비슷한 점이 많지 않았나요? 그렇다면 컬렉션뷰 셀과 테이블뷰 셀에는 어떠한 차이점이 있는지 알아볼까요?
- 테이블뷰 셀의 구조는 콘텐츠 영역과 액세서리뷰 영역으로 나뉘었지만, 컬렉션뷰 셀은 배경뷰와 실제 콘텐츠를 나타내는 콘텐츠뷰로 나뉘었습니다.
- 테이블뷰 셀은 기본으로 제공되는 특정 스타일을 적용할 수 있지만 컬렉션뷰 셀은 특정한 스타일이 따로 없습니다.
- 테이블뷰 셀은 목록형태로만 레이아웃 되지만, 컬렉션뷰 셀은 다양한 레이아웃을 지원합니다.
A-1. DataSource와 Delegate의 역할
데이터소스
컬렉션뷰 데이터소스 객체는 컬렉션뷰와 관련하여 가장 중요한 객체이며, 필수로 제공해야 합니다. 컬렉션뷰의 콘텐츠(데이터)를 관리하고 해당 콘텐츠를 표현하는 데 필요한 뷰를 만듭니다. 데이터소스 객체를 구현하려면
UICollectionViewDataSource프로토콜을 준수하는 객체를 만들어야 합니다. 그리고 데이터소스 객체는 최소한collectionView(_:numberOfItemsInSection:)과collectionView(_:cellForItemAt:)메서드를 구현해야 하며 나머지 메서드는 선택사항입니다.델리게이트
컬렉션뷰 델리게이트 프로토콜은 컬렉션뷰에서 셀의 선택 및 강조표시를 관리하고 해당 셀에 대한 작업을 수행할 수 있는 메서드를 정의합니다. 이 프로토콜의 메서드는 모두 선택사항입니다.
DataSource :
Delegate :
A-2. 뷰의 재사용
UICollectionViewDataSource
- Use the
[dequeueReusableCell(withReuseIdentifier:for:)](<https://developer.apple.com/documentation/uikit/uicollectionview/1618063-dequeuereusablecell>)to get a cell for an item in the collection view. (TableView, CollectionView) - Use the
[dequeueReusableSupplementaryView(ofKind:withReuseIdentifier:for:)](<https://developer.apple.com/documentation/uikit/uicollectionview/1618068-dequeuereusablesupplementaryview>)method to get a supplementary view requested by the layout object. (Only CollectionView)
Asks your data source object to provide a supplementary view to display in the collection view.
A-3. 커스텀 뷰(레이아웃)의 구현
테이블뷰
-
테이블 뷰는 plain과 grouped 스타일 중 한 가지의 스타일을 가질 수 있습니다.
테이블 뷰에서는 하나의 열에 여러 행을 표시하는 형식이기 때문에, 셀의 모습을 행에 맞춰서 디자인합니다.
컬렉션뷰
-
반면, 컬렉션뷰는 열과 행을 만들 수 있기 때문에, 꼭 행의 모습이 아니더라도 다양한 모습으로 셀을 디자인할 수 있습니다. 컬렉션 뷰 셀의 가장 큰 특징이기도 하죠.
-
또한 컬렉션 뷰는 레이아웃 객체가 있습니다. 기존에 제공하는 flow layout을 사용해도 괜찮지만, 본인이 원하는 레이아웃 모양을 custom layout을 만들어서 사용합니다. 이를 담당하는 프로토콜은UICollectionViewDelegateFlowLayout 입니다.
A-4. indexPath
-
tableView - Returns an index path representing the row and section of a given table-view cell.
-
collectionView
- Gets the index path of the specified cell.
- supplementary 메서드 차이?
A-5. Header/Footer
- 차이점은 dequeueReusableSupplementaryView 사용
B. 👻 😆 각 앱의 화면을 테이블뷰로 구현하는 것이 좋을지, 컬렉션뷰로 구현하는 것이 좋을지 그 이유에 대해 의논해봅시다
B-1. 페이스북 - 타임라인
-
스토리, 알수도 있는 사람 - 컬렉션 뷰
-
타임라인 - 테이블 뷰
B-2. 인스타그램 - 타임라인
- 스토리 - 컬렉션뷰
- 타임라인 - 테이블 뷰
B-3. 미리 알림 앱
- 메인화면 - 컬렉션 뷰
- 미리 알림 목록화면 - 테이블 뷰
B-4. iPhone App Store의 투데이 화면 - 테이블뷰 vs 컬렉션뷰
- 컬렉션뷰로 하는 게 효율적이지 않나?
- 테이블뷰로 할거면 전부 섹션을 나눠야하는데...
B-5. 시계 앱의 알람 목록화면 - 테이블뷰
C. 👻 😆 궁금한 점
-
컬렉션뷰에서 다 되는데 왜 테이블뷰랑 나누어져있을까?
-
테이블 형태가 편하고 많이 쓰여서 만들어놓은 거 아닐까?
-
차이점: 레이아웃
-
컬렉션 뷰는 열과 행을 만들 수 있기 때문에 꼭 행의 모습이 아니더라도 다양한 모습으로 셀을 디자인할 수 있다.
-
테이블뷰를 쓰다가 불편한 점이 있어서 컬렉션뷰를 만든 게 아닌가? (디자인적 요구 업그레이드)
-
컬렉션뷰로 다 할 수 있는데 테이블뷰가 왜 있을까요?- 원래는 테이블뷰만 있었는데, 그 이후 컬렉션뷰를 만든 게 아닌가? 차이점을 알고 싶다.
- 컬렉션 뷰도 세로로 하면 테이블 뷰가 아닌가? 그럼 무엇을 사용해야 하나?
- 귀찮은 건 싫으니까 편한걸로?
- Human Interface Guidelines/switches 에 따르면 스위치는 테이블뷰에서만 사용하라고 하던데?
- (야곰) 기능에 따라 적절하게 선택하면 될 것 같네요~ 😱
Disadvantages of UICollectionView
Major disadvantages of using UICollectionView is auto sizing of your cells, we don not really need auto sizing that much so it’s not that big of a problem. It takes a lot of trial and error to get auto sizing to work correctly ( not saying I’m good at it ). UITableView wins here as all you have to do is return UITableView automatic dimensions for the height of your row in each one of your cells.
So to sum this up, if you need something standard like most table views in iOS I will choose the UITableView, but if you need more control over your layout, go with UICollectionView.
https://medium.com/@nitpaxy/swift-3-uicollectionview-vs-uitableview-9909bbc0ec66
-
-
테이블뷰를 기본으로 알고, 컬렉션뷰를 가면 좋다.
-
테이블뷰 많이 만들어 보면서 연습해보면 좋다.
-
이번 프로젝트에서 컬렉션뷰를 꼭 써보지 않아도 괜찮다.
-
[참고자료]:
[iOS] CollectionView의 이해 - TableView와 다른 점
