[swift] Swift IGListKit에서 컬렉션 뷰 다중 선택 처리하기

27 Nov 2023

swift

IGListKit은 iOS 앱에서 콘텐츠를 표시해주는 데 사용되는 강력한 라이브러리입니다. IGListKit을 사용하면 컬렉션 뷰를 쉽게 설정하고 관리할 수 있습니다.

여기에서는 IGListKit을 사용하여 컬렉션 뷰에서 다중 선택을 처리하는 방법에 대해 알아보겠습니다. 다중 선택은 사용자가 여러 항목을 동시에 선택할 수 있는 기능입니다.

IGListKit을 사용하여 컬렉션 뷰 설정하기

먼저, IGListKit을 사용하여 컬렉션 뷰를 설정해야 합니다. IGListKit에 대한 자세한 내용은 공식 문서를 참조하세요.

import IGListKit

class CollectionViewController: UIViewController, UICollectionViewDelegate, ListAdapterDataSource {

    @IBOutlet weak var collectionView: UICollectionView!

    private var items: [String] = []
    private var selectedItems: [String] = []

    private lazy var adapter: ListAdapter = {
        return ListAdapter(updater: ListAdapterUpdater(), viewController: self)
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.delegate = self
        adapter.collectionView = collectionView
        adapter.dataSource = self

        // 컬렉션 뷰에 항목들을 추가합니다.
        items.append("Item 1")
        items.append("Item 2")
        items.append("Item 3")
        
        //...
    }

    func objects(for listAdapter: ListAdapter) -> [ListDiffable] {
        return items as [ListDiffable]
    }

    func listAdapter(_ listAdapter: ListAdapter, sectionControllerFor object: Any) -> ListSectionController {
        return ItemSectionController()
    }

    //...
}

위 코드에서는 CollectionViewController 클래스가 IGListKit의 ListAdapterDataSource 프로토콜을 구현하고 있습니다. objects(for:) 메서드에서는 컬렉션 뷰에 표시할 데이터를 반환하고, listAdapter(_:sectionControllerFor:) 메서드에서는 각 섹션 컨트롤러를 반환합니다.

다중 선택 처리

이제 다중 선택을 처리해보겠습니다. 사용자가 셀을 선택할 때마다 선택된 항목을 관리해야 합니다.

class CollectionViewController: UIViewController, UICollectionViewDelegate, ListAdapterDataSource {

    //...

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        guard let object = adapter.object(atSectionController: indexPath.section) as? String else {
            return
        }
        
        if let index = selectedItems.firstIndex(of: object) {
            selectedItems.remove(at: index)
        } else {
            selectedItems.append(object)
        }
        
        collectionView.reloadItems(at: [indexPath])
    }

    func collectionView(_ collectionView: UICollectionView, shouldSelectItemAt indexPath: IndexPath) -> Bool {
        // 사용자가 셀을 선택할 수 있는지 여부를 반환합니다.
        return true
    }

    //...
}

위 코드에서는 collectionView(_:didSelectItemAt:) 메서드를 사용하여 사용자가 셀을 선택할 때마다 선택된 항목을 관리합니다. 선택된 항목이 selectedItems 배열에 이미 존재하는 경우에는 해당 항목을 배열에서 제거하고, 그렇지 않은 경우에는 배열에 추가합니다. 마지막으로, 선택된 셀을 업데이트하기 위해 collectionView.reloadItems(at:) 메서드를 호출합니다.

사용자 인터페이스 업데이트

사용자에게 선택된 항목을 시각적으로 나타내기 위해 UI를 업데이트해야 합니다.

class ItemCell: UICollectionViewCell {
    
    //...

    override var isSelected: Bool {
        didSet {
            // 선택된 상태에 따라 셀의 스타일을 변경합니다.
            if isSelected {
                self.contentView.backgroundColor = .blue
            } else {
                self.contentView.backgroundColor = .white
            }
        }
    }
}

class ItemSectionController: ListSectionController {
    
    //...

    override func didUpdate(to object: Any) {
        super.didUpdate(to: object)
        
        setInset()
    }

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

        //...

        // 셀의 선택 상태를 업데이트합니다.
        cell.isSelected = selectedItems.contains(object)
        
        return cell
    }

    //...
}

위 코드에서는 ItemCell 클래스의 isSelected 속성을 오버라이드하여 선택된 상태에 따라 셀의 스타일을 변경합니다. ItemSectionController 클래스의 cellForItem(at:) 메서드에서는 해당 셀의 선택 상태를 업데이트합니다.

이제 IGListKit을 사용하여 컬렉션 뷰의 다중 선택을 처리하는 방법을 알게 되었습니다. IGListKit은 강력한 라이브러리이며, 더욱 복잡한 컬렉션 뷰의 요구 사항을 쉽게 처리할 수 있도록 도와줍니다.