[ios] UICollectionView + UILongPressGestureRecognizer

[ios] UICollectionView + UILongPressGestureRecognizer

안녕하세요. 오늘은 UICollectionView에 UILongPressGestureRecognizer를 적용시켜보는 법을 알아보도록 하겠습니다.

UICollectionView의 Cell들의 터치에 대한 액션은 didSelectedItemAt 메소드를 사용하실 겁니다. 이는 단순히 touchUpInside에 의한 액션에 해당하는 메소드입니다. 

하지만 오늘은 UILongPressGestureRecognizer를 이용해 사용자가 Cell을 길게 누르는 액션을 통해 Cell을 지워보도록 하겠습니다. 그럼 바로 시작해보도록 하겠습니다.

---

기본 세팅

먼저 오늘 예제를 위한 기본 세팅을 해보도록 하겠습니다. 저는 CollectionCell이라는 이름으로 UICollectionViewCell을 상속받는 파일을 .xib파일과 함께 만들었습니다. 그리고 .xib파일 안의 Cell위에 하나의 UILabel을 올려주시고 CollectionCell에 @IBOutlet으로 연결을 해줍니다.

다음으로는 예제를 위한 UICollectionView도 세팅해보도록 하겠습니다.

세팅한 것에 대해 간략히 말씀드리자면 Cell들의 줄 간격인 16이고 UICollectionView 뷰 안의 요소들의 인셋은 UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)입니다. 그리고 Cell의 너비와 높이는 한 줄에 두 개의 Cell만 들어갈 수 있는 크기로 설정한 것입니다.

마지막으로 셀의 배경색은 .darkGray이며 총 5개의 Cell을 생성한 것입니다. 그럼 이제 본격적으로 viewDidLoad메소드 안에서 UILongPressGestureRecognizer를 등록하는 것을 시작으로 본격적으로 코드를 작성해보도록 하겠습니다.

---

UILongPressGestureRecognizer

1. addGestureRecognizer 메소드를 통해 collectionView에 UILongPressGestureRecognizer를 등록해주었습니다. 그리고 이런 제스처가 일어나면 호출되는 메소드로 handleLongPressGesture를 선언하였습니다.

그럼 이제 handleLongPressGesture를 작성해보도록 하겠습니다.

위에서부터 하나씩 설명해드리도록 하겠습니다.

• 매개변수로 UIGestureRecognizer타입의 gesture를 받습니다. 이 매개변수에는 제스처 이벤트가 발생하면 해당 이벤트 정보가 담겨집니다. 이벤트 정보라하면 어떤 뷰에서 해당 제스처 이벤트가 발생했는지 등의 내용이 담깁니다.
• 위에서 언급한 이벤트 내용으로 해당 제스처가 일어난 화면의 좌표도 담깁니다. collectionView좌표계에 해당하는 좌표를 반환합니다.
• 그리고 collectionView에 해당하는 좌표에 존재하는 Cell을 알 수 있습니다. 만약 해당 좌표에 어떤 Cell도 존재하지 않는다면 nil이 반환되고 guard-let으로 인해 return되어 함수를 벗어납니다. 그리고 해당 위치에 Cell이 존재한다면에 Cell의 정보는 IndexPath에 담겨 반환됩니다.
• 위에서 반환된 indexPath 를 통해 이벤트가 발생한 Cell의 item에 대한 정보도 알 수 있습니다.
• UILongPressGesture가 발생하게 되면 UIAlertController를 띄어줍니다. .actionSheet은 팝업 형식이 아닌 밑에서 올라오는 형식의 Alert 스타일을 의미합니다.
• 만약 Yes 버튼이 눌렸으면 이제 아이템을 지워주어야 합니다. 하지만 여기서 주의하셔야할 것이 있습니다. 반드시 사용하고 있는 데이터(items)의 요소를 삭제한 후 해당 데이터에 대한 Cell을 삭제해주어야 합니다. 그렇지 않으면 데이터가 존재하는데 셀을 지우려하기 때문에 런타임오류를 발생시킵니다.

---

마무리

완성된 예제의 화면입니다. 오늘은 이렇게 UICollectionView에 UILongPressGesture를 추가하여 Cell을 지우는 법에 대해 알아보았습니다. 다음에는 더욱 유용한 정보로 찾아뵙도록 하겠습니다. 감사합니다.