오늘은 UICollectionViewListCell의 accessory 기능에 대해 알아볼 것입니다.

구현 계기 🤷🏻‍♀️

진행하는 프로젝트에서 쭉 나열되어있는 list 중 몇가지를 선택하는 것을 구현해야했습니다.

요런 느낌으로 진행하고 싶었습니다.

일단 List자체를 collectionView로 구현을 하였습니다.

다른 어플에서 버튼을 눌렀을 때 저 선택버튼이 나타나도록하는 부분이 있었던 것 같아, 방법을 찾아보기로 하였습니다.

찾아보니 tableView를 통해 구현하는 방법도 있더라구요..

하지만 그러던 중..

이 글을 발견하게 되었습니다!

구현 방법 😊

일단 해당 글에서는 UICollectionViewListCell의 UICellAccessory 에 대해서만 자세하게 다루고 있습니다.

제가 필요했던 accessory는

바로 이것입니다!

해당 accessory는 displayed의 기본값이 .whenEditing으로 따로 파라미터 없이 생성할 시 collectionView.isEditing = true 편집모드를 true로 바꿔주어야 보이게 됩니다.

제가 딱 원하던… 것을 발견한 것입니다!!

따라서 저는

let cellRegistration = UICollectionView.CellRegistration<UICollectionViewListCell, ListModel> {
    (cell, indexPath, list) in
    var content = cell.defaultContentConfiguration()

    content.image = UIImage(systemName: "star")
    content.text = "Favorites"

    cell.contentConfiguration = content
    cell.accessories = [.multiselect()]
}

self.dataSource = UICollectionViewDiffableDataSource<Section, ListModel>(collectionView: self.clothListCollectionView) {
    (collectionView, indexPath, list) -> UICollectionViewListCell? in
    return self.clothListCollectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: list)
}

평소 셀을 등록할 때 사용하던 register(_, forCellWithReuseIdentifier:)가 아닌 CellRegistration을 사용하였습니다.

collectionView diffableDataSource로 구현하였고, .multiselect() 하나의 accessory만을 사용하였습니다.

여러 개의 accessory를 동시에 사용해도 된다고 하네요!

예시로 구현해보았습니다.

제가 원하던대로 버튼을 클릭하면, 미끄러지듯이! 원래의 요소들이 살짝 슬라이드되면서 select 버튼이 나타나네요 👍🏻

아직 공부 중에 있어 .. UICollectionViewListCell에 대해서는 차차 업데이트 하도록 하겠습니다!

참고 📄

https://sujinnaljin.medium.com/ios-uicellaccessory-종류-알아보기-335d3f4a1f3c