[iOS] UICollectionViewLayout

https://developer.apple.com/tutorials/app-dev-training/creating-a-list-view

Apple Developer Documentation

 

iOS App Dev Tutorials 를 보면서 배운 내용을 정리하였습니다.

 

Creating a List View

이전 튜토리얼에서는 리스트 뷰를 테이블뷰로 생성했었는데 이번 강의에서는 콜렉션뷰를 사용했습니다.

똑같이 Reminder 이라는 Model 을 생성하는데 달라진 점은

#if DEBUG, #endif
이 플래그는 realse 용 앱을 빌드할 때 코드가 컴파일되지 않도록 하는 컴파일 지시문입니다.
디버그 빌드에서 코드를 테스트하거나 샘플 테스트 데이터 제공을 위해 이 플래그를 사용할 수 있습니다.

import Foundation

struct Reminder {
    var title: String
    var dueDate: Date
    var notes: String? = nil
    var isComplete: Bool = false
}

#if DEBUG
extension Reminder {
    static var sampleData = [
        Reminder(title: "Submit reimbursement report", dueDate: Date().addingTimeInterval(800.0), notes: "Don't forget about taxi receipts"),
        Reminder(title: "Code review", dueDate: Date().addingTimeInterval(14000.0), notes: "Check tech specs in shared folder", isComplete: true),
        Reminder(title: "Pick up new contacts", dueDate: Date().addingTimeInterval(24000.0), notes: "Optometrist closes at 6:00PM"),
        Reminder(title: "Add notes to retrospective", dueDate: Date().addingTimeInterval(3200.0), notes: "Collaborate with project manager", isComplete: true),
        Reminder(title: "Interview new project manager candidate", dueDate: Date().addingTimeInterval(60000.0), notes: "Review portfolio"),
        Reminder(title: "Mock up onboarding experience", dueDate: Date().addingTimeInterval(72000.0), notes: "Think different"),
        Reminder(title: "Review usage analytics", dueDate: Date().addingTimeInterval(83000.0), notes: "Discuss trends with management"),
        Reminder(title: "Confirm group reservation", dueDate: Date().addingTimeInterval(92500.0), notes: "Ask about space heaters"),
        Reminder(title: "Add beta testers to TestFlight", dueDate: Date().addingTimeInterval(101000.0),  notes: "v0.9 out on Friday")
    ]
}
#endif

 

이렇게 Model 을 생성하고 다음은 UICollectionViewController 를 상속받는 view controller 를 생성하였습니다.

애플에서 제공하는 collection view 의 Section, Group, Item 의 모습입니다.

 

 

collectionViewLayout

우선, viewDidLoad() 함수에 collection view 의 layout 을 설정해줍니다.

let listLayout = listLayout()
collectionView.collectionViewLayout = listLayout

 

collection view 의 레이아웃을 설정해줄 listLayout 함수입니다.

private func listLayout() -> UICollectionViewCompositionalLayout {
    var listConfiguration = UICollectionLayoutListConfiguration(appearance: .grouped)
    listConfiguration.showsSeparators = false
    listConfiguration.backgroundColor = .clear

    return UICollectionViewCompositionalLayout.list(using: listConfiguration)
}

UICollectionViewCompositionalLayout
A layout object that lets you combine items in highly adaptive and flexible visual arrangements.

아무튼 레이아웃 객체라네요.

 

UICollectionLayoutListConfiguration
A configuration for creating a list layout.

리스트 레이아웃을 만들기 위해 필요한 configuration 이라고 합니다.

Quick Help 를 살펴보면 이 configuration 을 사용하여 compositional layout 에 대한 list section 을 생성할 수 있다고 합니다.

또한 list section 만을 포함하는 compositional layout 을 만들 수 있다고 합니다.

 

예시)

let configuration = UICollectionLayoutListConfiguration(appearance: .sidebar)
let layout = UICollectionViewCompositionalLayout.list(using: configuration)

 

이 예시를 보니 튜토리얼에서 사용한 listLayout() 함수는 list section 만을 포함하는 compositional layout 을 만드는 함수였네요.

 

사실  list section 만을 포함한다는 말이 살짝 이해가 가지 않는데,

완성한 collection view 의 모습을 보면 title 만 포함하여 list 를 만든다.. 정도로 생각하면 될 것 같습니다.

 

 

 

다음은 어려웠던 diffable data source..