CollectionView Cell 사진 꾸욱 눌러 흔들기 애니메이션 및 삭제 기능 구현

 

오늘은 갤러리 컬렉션 뷰 중에서 사진을 꾸욱 누르면 사진이 흔들리고 안보이던 삭제 버튼이 보이면서 개별적으로 사진을 삭제할 수 있는 기능을 구현하여 해당 내용을 기록으로 남겨두려고 한다.

 

먼저 컬렉션 뷰 셀에 꾸욱 눌러 애니메이션을 넣기위해 코드를 구현해주자

let longPressGesture = UILongPressGestureRecognizer(target: self, action: #selector(handleLongPressGesture(_:)))
galleryCollectionView.addGestureRecognizer(longPressGesture)

애플에서 제공해주는 UILongPressGestureRecognizer를 사용해서 구현을 할 예정이다.

구현 방법은 우리가 많이 사용하는 addTargat과 거의 동일하다.

@objc func handleLongPressGesture(_ gesture: UILongPressGestureRecognizer) {
    let point = gesture.location(in: galleryCollectionView)
    guard let indexPath = galleryCollectionView.indexPathForItem(at: point), !selectedImages.isEmpty else { return }

    if gesture.state == .began {
        isEditingPhotos = true
        startShakingCells()
    }
}

이렇게 꾸욱 눌렀을때 사진 편집 모드가 true로 바뀌고 흔드는 애니메이션이 들어갈 수 있도록 구현하면 된다.

그럼 이제 저기에 들어있는 startShakingCells() 을 한번 살펴보자

func showDeleteButton(_ show: Bool) {
        deleteButton.isHidden = !show
    }
    
func startShaking() {
    let animation = CABasicAnimation(keyPath: "transform.rotation")
    animation.fromValue = -0.05
    animation.toValue = 0.05
    animation.duration = 0.1
    animation.repeatCount = .greatestFiniteMagnitude
    animation.autoreverses = true
    layer.add(animation, forKey: "shake")
}

func stopShaking() {
    layer.removeAllAnimations()
}

이렇게 특정 애니메이션을 넣고 흔들기를 넣어줄 수 있다. 여기서 꾸욱 눌러 메서드가 실행되면 안보이는 삭제 버튼도 보이도록 구현한 것을 볼 수 있다.

 

그리고 빈공간 아무곳이나 누르면 편집 모드가 꺼지게 된다.

@objc func deletePhoto(_ sender: UIButton) {
    guard let cell = sender.superview?.superview as? GallaryInPutCollectionViewCell,
          let indexPath = galleryCollectionView.indexPath(for: cell) else { return }
    
    selectedImages.remove(at: indexPath.row)
    if selectedImages.isEmpty {
        isEditingPhotos = false
        galleryCollectionView.reloadData()
        updateGalleryCountButton()
    } else {
        galleryCollectionView.performBatchUpdates({
            galleryCollectionView.deleteItems(at: [indexPath])
        }) { _ in
            self.updateGalleryCountButton()
        }
    }
}

이렇게 편집모드에 들어와서 버튼을 활성화시키면 나오는 삭제버튼을 누르면 개별적으로 특정 사진을 지울 수 있도록 구현하면 된다.

 

여기서 모든 사진을 다지웠을때 컴파일 에러가 나는 문제가 있었는데 이것은 selectedImages가 .isEmpty일 때를 명시해주지 않아 생기는 오류였다.

 

선택한 사진이 모두 없어지면 이전에 사진을 선택하기 전의 상태와 동일해지도록 설정해주면 구현이 완료된다.