[ iOS ] 사진 선택 시 번호 표기(넘버링) 구현 (+ collectionView)

공부한 내용을 정리한 글입니다.

 

 

 

문제

사진 선택 시 번호 표기(넘버링) 구현하기. 특정 사진 선택 해제 시 변경사항이 전체 번호 표기에 반영되어야 한다.

 

 

 

1. cell 내 버튼 선택 이벤트

2. 특정 사진 선택 목록에 추가하기

3. 특정 사진 선택 해제하기

4. 작업을 구현하면서 경험했던 오류

5. 개선할 만한 부분

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

 

 

1. cell 내 버튼 선택 이벤트

[ iOS ] cell 내 버튼 선택 이벤트 구현 (+ Delegate 패턴)

 

 

 

 

 

 

 

 

 

 

2. 특정 사진 선택 목록에 추가하기

클래스에 전체 사진이 든 배열과 선택된 사진이 담길 배열을 선언한다.

//ImagePickerViewController.swift

class ImagePickerViewController: UIViewController {
    ...
    var selectedImages: [UIImage] = []
    var images: [ImageData] = []
    ...
}

 

여기서 images 배열의 타입은 구조체를 사용해 만든 ImageData를 사용한다. 사진이 선택될 경우, 몇 번째로 선택되었는지 저장하기 위해 selectedNumber 변수를 선언한다. 번호를 저장하는 변수이므로 Int형이지만 선택 이벤트가 발생하기 전에는 값이 없으므로 옵셔널로 선언한다.

//ImageData.swift

struct ImageData {
    let image: UIImage
    var selectedNumber: Int?
}

 

사진 내 버튼 클릭 시 호출되는 메서드에서 특정 사진 선택 목록에 추가하기  작업을 구현하자. 

UICollectionViewControllerDataSource의 collectionView(_:cellForItemAt:) 메서드를 통해 cell을 구성할 때, ImageCollectionViewCell의 index 프로퍼티에 cell의 row 순서를 저장하여 해당 사진이 images 배열의 몇 번째에 위치하는지 확인하자. 만약 선택된 적이 없다면, 해당 사진을 selectedImages 배열에 추가하고 selectedNumber에 몇 번째로 추가되었는지 번호를 저장한다.

//ImagePickerViewController.swift

extension ImagePickerViewController: ImageCollectionViewCellDelegate {
    func didSelectCountButton(_ cell: ImageCollectionViewCell) {
        if images[cell.index].selectedNumber != nil {
            
        } else {
            let image = images[cell.index].image
            selectedImages.append(image)
            images[cell.index].selectedNumber = selectedImages.count //0번째부터 할당해도 된다
        }
        imageCollectionView.reloadData()
    }
}

 

 

 

 

 

 

 

 

3. 특정 사진 선택 해제하기

특정 사진을 배열에서 제거하는 작업은 간단하다. 하지만 우리는 선택이 해제되었을 시 이러한 변화가 번호 표기에 반영되어야 한다.

예) 가1-나2-다3-라4 => 다3 제거 => 가1-나2-라3

 

해당 사진이 선택된 적이 있다면 selectedImages 배열에서 해당 사진이 제거된다. 근데 만약 마지막 사진이 아닌 중간 순서의 사진이 삭제된다면 선택 해제된 사진의 번호 이상의 번호부터 표기 수정이 필요하다. A의 if문은 그러한 조건에 해당한 경우 그러한 작업을 수행하는 단락이다.

extension ImagePickerViewController: ImageCollectionViewCellDelegate {
    func didSelectCountButton(_ cell: ImageCollectionViewCell) {
        if images[cell.index].selectedNumber != nil {
            guard let selectedNumber = images[cell.index].selectedNumber else {return}
            selectedImages.remove(at: selectedNumber - 1)
            
            if selectedNumber <= selectedImages.count { //A
                images = images.map{
                    guard var number = $0.selectedNumber else {return ImageData(image: $0.image, selectedNumber: nil)}
                    if number > selectedNumber {
                        number -= 1
                    }
                    return ImageData(image: $0.image, selectedNumber: number)
                }
            }
            
            images[cell.index].selectedNumber = nil
        } else {
            ...
        }
        imageCollectionView.reloadData()
    }
}

 

 

 

 

 

 

 

 

 

4. 작업을 구현하면서 경험했던 오류

전체 사진이 담긴 images 배열과 선택된 사진이 담긴 selectesImages 배열을 가지고 사진 선택 시 번호 표기(넘버링) 구현하기 전, 각 cell의 ImageCollectionViewCell.swift에 선택된 순서를 selectedIndex에 담아 구현을 시도했었다.

처음엔 잘 작동한다 판단되었지만, 스크롤을 움직여 보니 선택하지 않은 사진이 선택되었다고 표시되거나 숫자가 섞이는 등 오류가 발생했다. 이러한 오류가 발생한 이유는 내 생각에 cell 생성 시 collectionView의 dequeueReusableCell(withReuseIdentifier:for:) 메서드를 사용해서 그런 것 같다.

dequeueReusableCell(withReuseIdentifier:for:)
identifier에서 찾은 재사용 가능한 cell 객체를 큐에서 뺀다.

 

dequeueReusableCell(withReuseIdentifier:for:)는 collectionView에서 새 cell을 요청할 때 DataSource로부터 호출된다. 예를 들어 스크롤을 이동시켜 다른 데이터를 확인할 때가 있다. 이 메서드는 새 cell을 요청받으면 새롭게 cell을 생성하거나, 존재하는 cell 중 사용 가능한 것을 collectionView에게 전달한다. 여기서 기존 cell을 전달할 경우 cell의 prepareForReuse() 메서드를 호출하는데, 바로 이 메서드에 의해 위와 같은 오류가 발생한 것 같다.

 

 

prepareForReuse()
뷰를 다시 사용할 수 있도록 준비하기 위해 필요한 모든 정리를 수행한다.  (any clean up necessary)

위 메서드는 cell을 재사용하기 위해 기존의 cell을 정리한다. 즉, 선택된 사진 cell이 스크롤이 되면서 정리돼 재사용되어서 스크롤을 하면 선택된 사진의 cell이 다른 사진의 cell이 되어버린 것이다.

따라서 사진을 각각의 상태를 구분하기 위해서는 따로 데이터 리스트를 만들어 저장해야 한다.

 

 

지금까지 공부하고 정리한 바로는 위와 같은 이유로 해당 오류가 발생한 것 같은데, 그렇다면 index 프로퍼티는 왜 영향이 없을까? 아직 더 공부해봐야 할 것 같다.

 

 

 

 

 

 

 

5. 개선할 만한 부분

현재 작업은 Swift에서 제공하는 Collection타입인 배열을 사용해 구현했다. 하지만 배열에서 insert, remove 등과 같은 작업은 O(n) 시간이 소요된다. 따라서 데이터가 많아질 경우 배열의 사용은 비효율적이다.

이러한 단점은 LinkedList 또는 다른 자료구조를 사용하면 해결할 수 있을 것 같다. 추후 수정을 통해 개선해보도록 하자.

 

그리고 선택 또는 선택 해제 시 CollectionView.reload()를 사용해 collectionView를 갱신했는데, 추가 또는 제거 시 사용되는 collectionView의 메서드가 있으므로 공부해 수정하자.

 

 

 

 

 

 

 

 

 

---