072_UICollectionLayoutListConfiguration(테이블뷰스타일 컬렉션뷰)
2022. 10. 18. 21:39ㆍSeSAC/수업정리
iOS 13에서 나온 CollectionView API(DiffableDataSource, Compositional Layout)를 기반으로 iOS14에서 Section Snapshot, List Configuration이 새로 나왔다. 이를 사용하여 테이블뷰처럼 생긴 컬렉션뷰를 만들 수 있다.
#.테이블뷰 스타일 컬렉션뷰 흐름
1. 레이아웃 설정: 테이블뷰처럼 생긴 컬렉션뷰 레이아웃을 만든다.(레이아웃 스타일을 만들고->레이아웃을 생성하고->레이아웃을 화면에 표시)
2. 재사용셀 설정: 데이터를 가진 셀을 재사용할 수 있도록 설정한다.
3. 셀컨텐츠 설정: 재사용에 사용할 셀이 데이터를 가질 수 있도록 하고 셀속성도 적용한다.
*테이블뷰처럼 생긴 컬렉션뷰는 컬렉션뷰에 테이블뷰속성을 가진 셀을 얹는 느낌.
1. 레이아웃 설정: 테이블뷰처럼 생긴 컬렉션뷰 레이아웃을 만든다.(레이아웃 스타일을 만들고->레이아웃을 생성하고->레이아웃을 화면에 표시)
//MARK: - 1. 레이아웃 설정: 테이블뷰처럼 생긴 컬렉션뷰 레이아웃을 만든다.(레이아웃 스타일을 만들고->레이아웃을 생성하고->레이아웃을 화면에 표시)
var configuation = UICollectionLayoutListConfiguration(appearance: .insetGrouped) //리스트 스타일 타입 설정
configuation.showsSeparators = false
configuation.backgroundColor = .brown
let layout = UICollectionViewCompositionalLayout.list(using: configuation) //레이아웃 생성
collectionView.collectionViewLayout = layout //레이아웃을 화면에 표시
2. 재사용셀 설정: 데이터를 가진 셀을 재사용할 수 있도록 설정한다.
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
//MARK: - 2. 재사용셀 설정: 데이터를 가진 셀을 재사용할 수 있도록 설정한다.
let item = list[indexPath.item] //재사용할 데이터 설정
//기존 dequeueReusableCell 대신 dequeueConfiguredReusableCell에 셀재사용에 사용할 셀등록객체, 인덱스, 데이터를 등록
//CellRegistration: 컬렉션뷰 등록할때 사용(셀타입, 데이터타입 정보 전달) *데이터를 가질 수 있는 셀로 생각하자.
let cell = collectionView.dequeueConfiguredReusableCell(using: CellRegistration, for: indexPath, item: item)
return cell
}
3. 셀컨텐츠 설정: 재사용에 사용할 셀이 데이터를 가질 수 있도록 하고 셀속성도 적용한다.
//MARK: - 3. 셀컨텐츠 설정: 재사용에 사용할 셀이 데이터를 가질 수 있도록 하고 셀속성도 적용한다.
CellRegistration = UICollectionView.CellRegistration { cell, indexPath, itemIdentifier in
//var content = cell.defaultContentConfiguration()
var content = UIListContentConfiguration.valueCell()
content.text = itemIdentifier.name //indexPath로 전달된 내용이기 때문에 indexPath로 구분하지 않아도 됨
content.image = itemIdentifier.age < 8 ? UIImage(systemName: "person.fill") : UIImage(systemName: "star")
content.textProperties.color = .red
content.imageProperties.tintColor = .yellow
content.secondaryText = "\(itemIdentifier.age)살"
content.prefersSideBySideTextAndSecondaryText = false
content.textToSecondaryTextVerticalPadding = 20
cell.contentConfiguration = content
}
'SeSAC > 수업정리' 카테고리의 다른 글
43_Login, Lotto Examples(Observable+MVVM) (0) | 2022.10.25 |
---|---|
074_MVVM+DiffableDataSource(숫자입력, 검색이미지) (0) | 2022.10.21 |
032_for-in, foreach 알아보기 (0) | 2022.08.17 |
017_Property (0) | 2022.07.26 |
Optional, Function(2022-07-07 수업4) (0) | 2022.07.08 |