Compositional Layout으로 가로 세로 둘 다 스크롤 되게 만드는 방법

Q. 가로와 세로 둘 다 스크롤 할 수 있는 컬렉션 뷰는 어떻게 만들까?

Ans) Compositional layout으로 만들 수 있을 것 같은데.. 한번 만들어 보자.

문제점:

Compositional Layout에서 Section을 가로로 스크롤링 되게 만들면 될 줄 알았는데 section이 계속 vertical로 쌓였음 ㅠㅠ

구글링 서치를 계속 해보다 아래 링크에서 section을 가로로 스크롤링 하는 방법을 찾아똬..!!

https://stackoverflow.com/questions/56963187/horizontally-scrolling-multiple-sections-with-uicollectionviewcompositionallayou

코드로 봐보자~

// 1. Configure layout section
private func testLayout() -> NSCollectionLayoutSection {
	let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .fractionalHeight(1))
	let item = NSCollectionLayoutItem(layoutSize: itemSize)
        
	let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), heightDimension: .estimated(145))
	let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
        
	let section: NSCollectionLayoutSection = NSCollectionLayoutSection(group: group)
	section.orthogonalScrollingBehavior = .continuous
        
	return section
}

private func createLayout() -> UICollectionViewLayout {
	// 2. Set scroll direction for layout section
	let config = UICollectionViewCompositionalLayoutConfiguration()
	config.scrollDirection = .horizontal
    
    // 3. My section provider
	let sectionProvider = { [weak self] (sectionIndex: Int, environment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
		return self?.testLayout()
	}
        
	let layout = UICollectionViewCompositionalLayout(
    	sectionProvider: sectionProvider, 
        configuration: config
	)
        
	return layout
}

UICollectionViewCompositionalLayoutConfiguration 에서 section layout 가로 스크롤링을 설정할 수 있다!

그러고 빌드 해보니 섹션이 horizontal로 잘 들어감!!

*** 한가지 더!

여기까지만 하면 섹션 스크롤링이 continuous하게 됨. paging 애니메이션은 어디서 넣는걸까!?
.
.
.
그냥 컬렉션 뷰 내에서 isPagingEnabled = true 로만 설정해 주면 끝~~ 😀

private lazy var collectionView = UICollectionView(frame: .zero, collectionViewLayout: createLayout()).then {
	...(생략)
	$0.isPagingEnabled = true
}

완성본: