CollectionView Custom Layout

📱iOS

CollectionView Custom Layout

akwlak 2022. 12. 5. 22:40

CollectionView를 사용하다 보면, Flow나 Compositional로는 구현하기 복잡한 레이아웃을 만들어야 하거나,

혹은 여러 방향으로 스크롤해야 하는 레이아웃을 만들어야 할 때도 있습니다.

이럴 때는 Layout을 Custom 하는 게 더 쉽거나 유일한 방법인데요,

UICollectionViewLayout을 Subclassing해서 구현할 수 있습니다.

그러면 우리는 이 안에서 두가지 작업을 해주면 됩니다.

1. 스크롤 가능한 content 영역 지정하기

2. 셀과 뷰들에 대한 attribute objects 제공하기

attribute object는 셀이나 보충 뷰의 레이아웃을 처리할 때 필요한 속성들을 가지고 있습니다.

frame, bounds, center, alpha 등

이를 이용해서 셀이나 보충 뷰를 그리는 것이죠.

그러면 이런 작업들을 어떻게 할 수 있을까요?

특정 메서드들을 override해서 구현할 수 있습니다.

1. prepare()

여기서 레이아웃 정보를 제공하는데 필요한 선행 계산을 수행할 수 있습니다.

2. collectionViewContentSize

스크롤 가능한 영역을 return 하면 됩니다. 위 prepare에서 수행해주면 됩니다.

3. layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]?

여기서 특정 rect안에 있어야 하는 셀들이나 보충 뷰에 대한 attributes를 넘겨주면 됩니다.

이 rect가 꼭 화면에 보이는 rect는 아닙니다.

CollectionView가 레이아웃 작업을 할 때 위 메서드들을 호출하고 순서도 지켜서 실행됩니다.

그림으로 보면 아래와 같습니다.

이렇게만 보니 잘 감이 안 잡히는 것 같네요.

직접 레이아웃을 만들면서 이해해 보겠습니다.

복잡합 레이아웃을 만들기 위해 사용하는 것이지만, 이해를 위해 쉬운 레이아웃을 사용하겠습니다.

코드는 Layout과 DataSource에 집중하겠습니다.

우선 DataSource를 만들겠습니다.

final class CustomDataSource: NSObject, UICollectionViewDataSource {
    
    // 데이터
    private var messages: [Message] = []
    
    // 데이터가 위치할 offset들
    private(set) var offsets: [CGFloat] = []
    
    // 각 셀이 가질 높이, 데이터로부터 미리 계산
    var heights: [CGFloat] {
        return messages.map { $0.height }
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return messages.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        
        let message = messages[indexPath.item]
        
        return MessageCell.dequeue(from: collectionView, at: indexPath, with: message)
    }
    
    // 데이터 추가, offset들을 계산해준다.
    func append(_ data: [Message]) {
        messages += data
        for message in data {
            offsets.append((offsets.last ?? 0) + message.height)
        }
    }
}

여기서는 기본적으로 UICollectionViewDataSource를 채택하고

Layout에 필요한 정보들을 가지고 있습니다.

공식문서에 보면 이렇게 나와있네요

The layout object uses information provided by its data source to create the collection view’s layout. Your layout communicates with the data source by calling methods on the collectionView property, which is accessible in all of the layout’s methods.

번역하면 레이아웃 오브젝트는 data source로부터 제공받은 정보를 이용해 레이아웃을 만든다.

레이아웃은 collectionView 프로퍼티를 통해 data source에 접근할 수 있다.

위 코드에서는 셀이 위치할 offset과 높이를 제공해주고 있습니다.

이제 레이아웃을 만들겠습니다.

우선 prepare부터 구현해보겠습니다.

final class CustomLayout: UICollectionViewLayout {
    
    // 셀 Attributes 캐싱
    private var cellAttributes = [UICollectionViewLayoutAttributes]()
    private var computedContentSize: CGSize = .zero
    
    override var collectionViewContentSize: CGSize {
    	// prepare에서 계산한 크기 리턴
        return computedContentSize
    }
    
    override func prepare() {
        guard let collectionView, let dataSource = collectionView.dataSource as? CustomDataSource else { return }
        
        // data source로 부터 필요한 정보 가져오기
        let heights = dataSource.heights
        let yOffsets = dataSource.offsets
        
        // 셀 배치
        for section in 0..<collectionView.numberOfSections {
            for item in 0..<collectionView.numberOfItems(inSection: section) {
                
                let indexPath = IndexPath(item: item, section: section)
                
                let cellHeight = heights[item]
                let cellWidth = collectionView.bounds.size.width
                let cellOffset = yOffsets[item] - cellHeight
                
                let itemFrame = CGRect(x: 0, y: cellOffset, width: cellWidth, height: cellHeight)
                
                let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
                attributes.frame = itemFrame
                
                // attributes 저장
                cellAttributes.append(attributes)
            }
        }
        
        // contentSize 계산
        let contentWidth = collectionView.bounds.size.width
        let contentHeight = max(collectionView.bounds.size.height, dataSource.offsets.last ?? 0)
        
        computedContentSize = CGSize(width: contentWidth, height: contentHeight)
    }
}

위에서 만든 data source로부터 정보를 가져와 셀들을 배치시키고 크기를 정하는 코드입니다.

prepare는 공식문서를 보면

Layout updates occur the first time the collection view presents its content and whenever the layout is invalidated explicitly or implicitly because of a change to the view. During each layout update, the collection view calls this method first to give your layout object a chance to prepare for the upcoming layout operation.

라고 하는데요, 번역하면

처음 present 될 때, layout이 invalidate 될 때 불린다.

여기서 앞으로 레이아웃 작업에 필요한 선행 계산을 할 수 있다.라고 합니다.

그러니까 우리가 많이 쓰는 reloadData()나 invalidateLayout()등을 호출하면 prepare 한다는 것인데요,

여기서 하는 작업의 무게에 따라 reloadData()가 굉장히 비효율적인 동작이 될 수도 있겠네요.

잘 커스텀해서 사용해야겠습니다.

이제 layoutAttributesForElements를 구현하겠습니다.

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    
    var attributeList = [UICollectionViewLayoutAttributes]()
    
    let index: Int? = binarySearch(cellAttributes) { (attribute) -> ComparisonResult in
        if attribute.frame.intersects(rect) {
            return .orderedSame
        }
        if attribute.frame.minY > rect.maxY {
            return .orderedDescending
        }
        return .orderedAscending
    }
    
    guard let index else { return [] }
    
    for attributes in cellAttributes[..<index].reversed() {
        guard attributes.frame.maxY >= rect.minY else { break }
        attributeList.append(attributes)
    }
    
    for attributes in cellAttributes[index...] {
        guard attributes.frame.minY <= rect.maxY else { break }
        attributeList.append(attributes)
    }
    
    return attributeList
}

private func binarySearch<T: Any>(_ a: [T], where compare: ((T)-> ComparisonResult)) -> Int? {
    
    var lowerBound = 0
    var upperBound = a.count
    
    while lowerBound < upperBound {
        
        let midIndex = lowerBound + (upperBound - lowerBound) / 2
        
        if compare(a[midIndex]) == .orderedSame {
            return midIndex
        } else if compare(a[midIndex]) == .orderedAscending {
            lowerBound = midIndex + 1
        } else {
            upperBound = midIndex
        }
    }
    
    return nil
}