[Xcode] 새로운 방법으로 컬렉션뷰 만들기(2) - UICollectionViewDataSource + List Configuration 코드 개선

이전 게시글에서
UICollectionViewDataSource + List Configuration 조합으로
새로운 방식으로 컬렉션뷰를 만들어 보았다.

여기에서 코드를 더 개선해보자

[Xcode] 새로운 방법으로 컬렉션뷰 만들기(1) - UICollectionViewDataSource + List Configuration

[Xcode] 새로운 방법으로 컬렉션뷰 만들기(1) - UICollectionViewDataSource + List Configuration

 

개선할 수 있는 부분

1. collectionViewLayout 관련 코드를 줄인다.

    - Extension 생성 후 UICollectionViewLayout를 리턴하는 메서드 생성

    - 메서드가 반환하는 layout의 타입은 UICollectionViewCompositionalLayout이지만 

    - collectionViewLayout의 타입이 UICollectionViewLayout이기 때문에 더 적합

    - (UICollectionViewCompositionalLayout은 UICollectionViewLayout로부터 상속)

2. Configuration에서 셀 백그라운드 UI 설정

    - UIContentConfiguration 프로토콜은 Cell의 ContentView에 대한 타입

    - 여기에서 contentConfiguration와 backgroundConfiguration이 UIContentConfiguration을 채택

    - contentConfiguration은 Label, Image와 같은 셀 내부 UI 속성을 관리

    - backgroundConfiguration은 셀 배경과 관련된 UI 속성을 관리

 

 

전역변수로 cellRegistration를 선언하고 viewDidLoad에서 List Configuration와 View Configuration를 다룬다.

// 컨트롤러 클래스 내부

// cellForItemAt 전에 생성되어야 함 => register 코드와 유사한 역할
// CellRegistration의 두번째 제네릭 인자에는 각 cell에서 다룰 데이터를 대입
var cellRegistration: UICollectionView.CellRegistration<UICollectionViewListCell, User>!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 개선 01
        collectionView.collectionViewLayout = createLayout()
        
        // View Configuration(셀 내부 관리)
        // cellForItem 메서드에서 실행될 클로져 설정
        cellRegistration = UICollectionView.CellRegistration { cell, indexPath, itemIdentifier in
            
            // 개선 02
            // UIContentConfiguration 프로토콜 => Cell ContentView

            // contentConfiguration 채택 => label/img 관리
            var content = UIListContentConfiguration.valueCell() //cell.defaultContentConfiguration()

            content.text = itemIdentifier.name
            content.textProperties.color = .red
            content.secondaryText = "\(itemIdentifier.age)살"
            content.prefersSideBySideTextAndSecondaryText = false
            content.textToSecondaryTextVerticalPadding = 20
            content.image = itemIdentifier.age < 8 ? UIImage(systemName: "person.fill") : UIImage(systemName: "star")
            content.imageProperties.tintColor = .yellow

            cell.contentConfiguration = content

            // backgroundConfiguration 채택 => 그림자/배경 관리
            var backgroundConfig = UIBackgroundConfiguration.listPlainCell()

            backgroundConfig.backgroundColor = .lightGray
            backgroundConfig.cornerRadius = 10
            backgroundConfig.strokeWidth = 2
            backgroundConfig.strokeColor = .systemPink

            cell.backgroundConfiguration = backgroundConfig
            }
    	}
 
 
 extension SimpleCollectionViewController {
    
    private func createLayout() -> UICollectionViewLayout {
    	// List Configuration(컬렉션뷰 레이아웃)
        // appearance 매개변수를 통해 테이블뷰에서만 사용 가능하던 레이아웃 기본 설정 가능
        var configuration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
        configuration.showsSeparators = false
        configuration.backgroundColor = .brown
        
        let layout = UICollectionViewCompositionalLayout.list(using: configuration)
        return layout
    }
}

 

 

[애플 공식 문서] Modern CollectionView 샘플 코드