이미지 선택한 갯수 표시 및 최대치 도달시 알림창 띄우기

구현 내용

 

• 최대 선택가능한 이미지 갯수는 5장 입니다. 
• 사진을 선택할 경우, 선택한 이미지 갯수 / 최대 선택 가능한 이미지 갯수로 표시됩니다. 
• 만약에 선택한 이미지 갯수가 5개로 도달하면, 자동으로 이미지 선택 창이 닫힙니다. 
• 다시 이미지 선택 버튼을 누를 경우 경고창이 뜹니다. 

 

구현 방법 

• 선택된 이미지 갯수를 할당할 변수 선언 
• 최대 선택 가능한 이미지 갯수를 할당할 변수 선언 
• presentImagePicker() 메서드 내에 if 조건문을 통해 조건 별 상황 부여 
• 선택한 이미지 갯수에 따라, 최대 선택가능한 이미지 개수를 조절

 

변수 선언

    var selectedImagesCount: Int = 0
    var selectedMaxImage: Int = 5

 

 

이미지 선택을 완료한 후 각 변수에 결과를 할당 -> picker()

if 구문을 통해 상황 통제 -> presentImagePicker()

// MARK: - extension PHPickerViewControllerDelegate
extension FeedViewController: PHPickerViewControllerDelegate {
    
    /// 갤러리 창을 띄워 이미지를 선택할 수 있도록 해주는 함수
    private func presentImagePicker() {
  
        var configuration = PHPickerConfiguration()
        configuration.filter = .any(of: [.images])   // 이미지 선택 가능
        configuration.selection = .ordered    // 순서 보장
        
        configuration.preferredAssetRepresentationMode = .automatic
        
        /* 선택가능한 사진 수를 채운 뒤에도 버튼을 누를 경우 경고창 띄움 */
        
        if self.selectedImagesCount == 0 {
            configuration.selectionLimit = selectedMaxImage
            
            let picker = PHPickerViewController(configuration: configuration)
            picker.delegate = self
            present(picker, animated: true)
        } else if self.selectedImagesCount != 0 && self.selectedImagesCount < selectedMaxImage {
            configuration.selectionLimit = selectedMaxImage - self.selectedImagesCount
            let picker = PHPickerViewController(configuration: configuration)
            picker.delegate = self
            present(picker, animated: true)
        } else {
            let alert = UIAlertController(title: "알림", message: "선택할 수 있는 사진 수를 넘기셨어요 😅", preferredStyle: .alert)
            let confirm = UIAlertAction(title: "확인", style: .default)
            let close = UIAlertAction(title: "닫기", style: .destructive)
            
            alert.addAction(confirm)
            alert.addAction(close)
            self.present(alert, animated: true)
        }
    }
    
    func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
        picker.dismiss(animated: true)
        
        for item in results {
            // itemProvider로 이미지를 로드
            item.itemProvider.loadObject(ofClass: UIImage.self) { [weak self] (image, error) in
                guard let self = self else { return }
                
                if let image = image as? UIImage {
                    // 이미지를 로드한 경우
                    DispatchQueue.main.async {
                        print("Selected image: \(image)")
                        self.selectedImages.append(image)
                        self.selectedImagesCount = self.selectedImages.count
                        self.feedView.imageCounts = self.selectedImagesCount
                        self.feedView.updateButtonSubtitle()
                        
                        if self.selectedImages.count <= 5 {
                            self.feedView.selectedImageCollectionView.reloadData()
                        }
                    }
                } else if let error = error {
                    print("Error loading image: \(error.localizedDescription)")
                }
            }
        }
    }
}

 

 

FeedView 내의 selectedButton의 subTitle 문구 업데이트

    /// 이미지 선택하는 버튼 아래에 SubTitle 설정하는 함수 
    func updateButtonSubtitle() {
        var updatedConfig = selectedButton.configuration
        updatedConfig?.subtitle = "\(self.imageCounts) / 5"
        selectedButton.configuration = updatedConfig
    }

 

 

🔥 self.feedView.selectedButton.subtitleLabel?.text = "\(self.selectedImages.count) / 5 왜 이건 안될까?

 

버튼의 subtitle을 이미지 선택 수에 맞게 업데이트하는 코드를 수정 및 추가할 수 있습니다.

문제는 UIButton.Configuration에서 subtitle은 버튼 생성 시에는 설정 가능하지만, 이후 업데이트하려면 configuration을 다시 설정해야 한다는 점입니다.

 

/// 이미지를 선택한 수를 버튼 subtitle에 업데이트하는 메서드
func updateButtonSubtitle() {
    var updatedConfig = selectedButton.configuration
    updatedConfig?.subtitle = "\(imageCounts) / 5"
    selectedButton.configuration = updatedConfig
}

// ... 초기화 부분에서 selectedButton subtitle 업데이트 ...
override init(frame: CGRect) {
    super.init(frame: frame)
    backgroundColor = .systemOrange
	...
    // 초기 subtitle 설정
    updateButtonSubtitle()
}