[swift] IGListKit에서 셀의 세로 스크롤 설정하는 방법

15 Nov 2023

swift

IGListKit은 iOS 애플리케이션에서 컬렉션 뷰를 구현하는 데 도움을 주는 유용한 프레임워크입니다. IGListKit을 사용하여 셀의 세로 스크롤을 설정하는 방법에 대해 알아보겠습니다.

IGListKit의 컬렉션 뷰 셀은 UICollectionViewCell을 상속한 클래스입니다. 따라서 세로 스크롤을 설정하려면 해당 셀의 컬렉션 뷰에 적절한 설정을 해주어야 합니다.

먼저 IGListKit의 UICollectionViewCell을 상속한 사용자 정의 셀을 만들어야 합니다. 예를 들어 CustomCell이라는 클래스를 만들어 보겠습니다.

class CustomCell: UICollectionViewCell {
    let scrollView = UIScrollView()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        setupScrollView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        
        setupScrollView()
    }

    private func setupScrollView() {
        addSubview(scrollView)
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        scrollView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
        scrollView.topAnchor.constraint(equalTo: topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
        
        // 세로 스크롤 활성화
        scrollView.isScrollEnabled = true
        scrollView.alwaysBounceVertical = true
    }
}

위의 예제에서는 UIScrollView를 사용하여 세로 스크롤을 구현하였습니다. scrollView를 CustomCell의 서브뷰로 추가하고, 오토레이아웃을 설정하여 셀 전체 영역을 차지하도록 합니다. 마지막으로 scrollView.isScrollEnabled와 scrollView.alwaysBounceVertical 속성을 true로 설정하여 세로 스크롤을 활성화합니다.

이제 IGListKit에서 이 사용자 정의 셀을 사용하기 위해, IGListSectionController를 상속한 클래스에서 해당 셀을 리턴해주어야 합니다. 예를 들어 CustomSectionController라는 클래스를 만들어 보겠습니다.

class CustomSectionController: IGListSectionController {
    var data: String?

    override func cellForItem(at index: Int) -> UICollectionViewCell {
        guard let context = collectionContext, let cell = context.dequeueReusableCell(of: CustomCell.self, for: self, at: index) as? CustomCell else {
            fatalError()
        }

        // 셀의 데이터 처리

        return cell
    }

    override func sizeForItem(at index: Int) -> CGSize {
        let width = collectionContext?.containerSize.width ?? 0
        let height: CGFloat = 100 // 셀의 높이 지정

        return CGSize(width: width, height: height)
    }

    override func didUpdate(to object: Any) {
        data = object as? String
    }
}

위의 예제에서는 didUpdate(to object: Any) 메서드를 통해 데이터를 받아옵니다. cellForItem(at index: Int) 메서드에서는 서브클래스에서 구현한 사용자 정의 셀을 반환합니다. 여기서는 CustomCell을 반환하도록 하였습니다. sizeForItem(at index: Int) 메서드는 셀의 크기를 지정하는 메서드입니다. 여기에서는 셀의 너비는 컬렉션 뷰의 너비와 동일하게 설정하였고, 높이는 100으로 고정하였습니다.

위와 같이 사용자 정의 셀을 만들고 IGListKit의 IGListSectionController에서 이 셀을 사용하면, 셀의 세로 스크롤을 손쉽게 구현할 수 있습니다.

참고 자료

IGListKit 공식 문서: https://instagram.github.io/IGListKit/
UIScrollView 클래스 문서: https://developer.apple.com/documentation/uikit/uiscrollview