[Cheliz] UICollectionView leading/trailingSwipeActions - Realm Read/Delete

 

  문제  

홈 화면에서 추후 grid 형태로도 볼 수 있도록 구현하기 위해, 리스트처럼 보이지만 UICollectionView로 구현했었다. 밀어서 삭제 기능은 당연히 넣을 것이라고 생각하고 계속 컬렉션 뷰로 개발 중,, 아뿔싸.. 깨달았다.. UICollectionView에는 trailingSwipeAction 기능이 UITableView처럼 기본적으로 프로토콜 메서드가 제공되지 않음을,,,,,,

 

 

 

 

  해결  

private func setCollectionViewCompositionalLayout() {
    var configuration = UICollectionLayoutListConfiguration(appearance: .plain)
    configuration.showsSeparators = true
    configuration.trailingSwipeActionsConfigurationProvider = { [unowned self] indexPath in
        let delete = UIContextualAction(style: .normal, title: nil) { action, view, actionPerformed in
            if let deleteCompletion = self.deleteCompletion {
                deleteCompletion(indexPath.row)
            }
            actionPerformed(true)
        }
        delete.image = UIImage(systemName: "trash.fill")
        return .init(actions: [delete])
    }
    
    let layout = UICollectionViewCompositionalLayout.list(using: configuration)
    collectionView.setCollectionViewLayout(layout, animated: true)
}

 

우선 기존과 같이 리스트처럼 표현하기 위해, UICollectionLayoutListConfiguration과 UICollectionViewCompositionalLayout을 사용하여 Collection View를 Table View처럼 표현하였다.

 

 

그리고 이 configuration의 기본 프로퍼티를 사용하여, Table View처럼 separators를 보이게 하거나 leading/trailingSwipeActions을 지정할 수 있었다.

 

 

위와 같은 방법으로 아래처럼 밀어서 삭제 기능을 구현하는 데 성공했다..!!!

 

 

 

 

 

 

 

 

 

 

  +  

UICollectionViewCompositionalLayout으로는 sectionInset, minimumLineSpacing, minimumInteritemSpacing, itemSize 등을 지정할 수 없었다.

Collection View Cell 내부의 객체들의 크기에 따라 셀 크기가 지정되는 것 같았다.

 

posterImageView.snp.makeConstraints { make in
    make.leading.equalTo(checkButton.snp.trailing).offset(8)
    make.centerY.equalToSuperview()
    make.height.equalToSuperview().multipliedBy(0.8)
    make.width.equalTo(posterImageView.snp.height).multipliedBy(0.67)
}

기존 - UICollectionViewFlowLayout 적용 시 셀 내부 오브젝트 레이아웃 지정

 

 

 

posterImageView.snp.makeConstraints { make in
    make.leading.equalTo(checkButton.snp.trailing).offset(8)
    make.centerY.equalToSuperview()
    let screenHeight = UIScreen.main.bounds.height
    let imageHeight = screenHeight * 0.12
    make.height.equalTo(imageHeight)
    make.width.equalTo(posterImageView.snp.height).multipliedBy(0.67)
}

UICollectionViewCompositionalLayout 적용 시 셀 내부 오브젝트 레이아웃 

 

 

 

따라서, 셀 내부 객체의 크기 지정을 원할 경우, Superview에 의존하지 않도록 지정하는 방법으로 레이아웃 이슈를 해결하였는데, 맞는 방법인지 확인이 필요하다,,