swift 실습 - 5 : Photo Gallery App

오늘 한건 갤러리에서 사진을 가져와서 보여주는 것에 대해서 배웠다.

 

 

 

 

완성된 앱의 실행화면이다.

 

1. UICollectionView, UICollectionViewCell로 레이아웃 만들기

2. 네비게이션바에 버튼 추가

3. 갤러리 접근 권한 주기

4. 가져온 사진 표시 및 로딩하기

 

이 순서대로 배운 내용을 정리해보려고 한다.

 

 

 

 

 

 

 

1. 레이아웃 만들기

스토리보드에서 UICollectionView를 추가해서 화면에 꽉 차도록 설정해두고

UICollectionViewCell을 추가한다.

 

그럼 이런 모양이 된다.

 

뷰 셀은 뷰만 설정해도 하나가 새로 생기고, 그 안에 이미지뷰를 넣어서 그 셀 안에 꽉 차도록 설정을 하면 된다.

셀에 대해서는 PhotoCell.swift 파일을 새로 생성하고, identifier와 class모두 PhotoCell로 설정해둔다.

 

 

2. 네비게이션바에 버튼 추가

Editor > Embed In > Navigation Controller 

를 눌러서 네비게이션 컨트롤러를 추가한다.

 

그 안에 타이틀과 버튼에 대한 설정은 

메인 ViewController의 viewDidLoad에서

 override func viewDidLoad() {
        super.viewDidLoad()
        
        self.title = "Photo Gallery App"
        makeNavigationItem()
    }

이렇게 설정해둔다.

 

버튼을 생성하는 코드는 길어져서

makeNavigationItem() 함수로 빼놨다.

 

func makeNavigationItem(){
        let photoItem = UIBarButtonItem(image: UIImage(systemName: "photo"), style: .done, target: self, action: #selector(checkPermission))
        
        let refreshItem = UIBarButtonItem(image: UIImage(systemName: "arrow.clockwise"), style: .done, target: self, action: #selector(refresh))
        
        photoItem.tintColor = .black.withAlphaComponent(0.7)
        
        self.navigationItem.rightBarButtonItem = photoItem
        
        self.navigationItem.leftBarButtonItem = refreshItem
    }

photoItem이 사진 모양 아이콘 버튼이고 refreshItem이 새로고침을 하는 버튼이다.

 

둘다 사진 아이콘인데, SF Symbols를 사용하여 시스템 이미지를 가져온다.

photoItem은 withAlphaComponent를 사용하여 회색으로 설정해뒀다.

 

그리고 각각의 버튼이 하는 일은 UIBarButtonItem을 사용할때 #selector로 objc 런타임 함수를 넣어줬다.

 

refresh 버튼에 대해서는 그냥 데이터를 reload 해오는 것이기 때문에

@objc func refresh(){
        self.photoCollectionView.reloadData()
    }

이렇게 설정을 해줬고,

사진 이미지 버튼에 대해서는 먼저 갤러리의 접근권한이 필요하기 때문에

이를 체크하고 각각 권한 허용 설정 상태에 따라 처리해야 할 일을 코딩해준다.

 

 

3. 갤러리 접근 권한 주기

갤러리 접근권한에 대한 상태는 크게 5가지가 있다.

 

• .authorized : 허용된 상태
• .limited : 부분 허용된 상태
• .denied : 거부된 상태
• .notDetermined : 권한 설정을 요청받지 않은 상태
• .restricted : 어떤 요인에서든지 권한 설정을 할 수 없는 상태

 

여기서 마지막 restricted는 개발 단계에서 어떻게 해결할 수 없는 문제이기 때문에 제외하고,

나머지 4가지에 대해서 설정한다.

 

@objc func checkPermission() {
        
        if PHPhotoLibrary.authorizationStatus() == .authorized || PHPhotoLibrary.authorizationStatus() == .limited {
            DispatchQueue.main.async {
                self.showGallery()
            }
            
        }else if PHPhotoLibrary.authorizationStatus() == .denied{
            DispatchQueue.main.async {
                self.showAuthorizationAlert()
            }
            
        }else if PHPhotoLibrary.authorizationStatus() == .notDetermined{
            PHPhotoLibrary.requestAuthorization { status in
                print(status)
                self.checkPermission()
            }
        }
    }

네비게이션바에 사진 아이콘 버튼에서 사용할 함수이기 때문에 object-c runtime으로 선언해준다.

 

첫번째로 authorized랑 limited의 경우에는 권한이 허용된 것이므로 showGallery() 함수를 호출해서 갤러리를 보여주면 된다.

두번째 denied에서는 권한이 거절된 것이므로, 권한을 활성화 할 것을 요구하는 showAuthorizationAlert 함수를 호출한다.

마지막 notDetermined에서는 권한 설정을 묻지도 않은 상태이기 때문에 권한 설정을 하는 함수 checkPermission을 다시 호출한다.

 

여기서 사용하는 함수 showGallery와 showAuthorizationAlert을 살펴보면

 

func showAuthorizationAlert(){
        let alert = UIAlertController(title: "포토 라이브러리 접근 권한을 활성화 해주세요.", message: nil, preferredStyle: .alert)
        
        alert.addAction(UIAlertAction(title: "닫기", style: .cancel, handler: nil))
        
        alert.addAction(UIAlertAction(title: "설정으로 가기", style: .default, handler: {
            action in
            guard let url = URL(string: UIApplication.openSettingsURLString) else{
                return
            }
            if UIApplication.shared.canOpenURL(url){
                UIApplication.shared.open(url, options: [:], completionHandler: nil)
            }
        }))
        
        self.present(alert, animated: true, completion: nil)
    }

 

권한 설정을 위해서 alert창을 띄우기 위해 UIAlertController로 생성한다.

설정으로 가도록 하기 위해서 URL로 설정해준다.

 

여기서 갤러리 사용을 위해 뜨는 경고창에

사진들이 왜 필요한지 적어놓아야 나중에 앱을 출시할 때 심사에 통과할 수 있다고 한다.

 

그걸 설정하려면 Info.plist 파일에 들어가서

이렇게 설정해주어야 한다.

 

그럼 Alert에 이렇게 뜬다.

 

 

4. 가져온 사진 표시 및 로딩하기

(여기가 조금 어렵다,,, 제대로 이해했는지도 모르겠다. 그냥 이해한 만큼 정리해놓는 걸로^^)

 

먼저 PhotosUI를 import 해야한다.

 

그리고 갤러리에서 사진을 선택하고 난 뒤 일어나야 할 일들에 대해서는 PHPickerViewControllerDelegate를 구현해야한다.

 

extension ViewController: PHPickerViewControllerDelegate {
    func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
        
        let identifiers = results.map{
            $0.assetIdentifier ?? ""
            
        }
        
        self.fetchResults = PHAsset.fetchAssets(withLocalIdentifiers: identifiers, options: nil)
        
        self.photoCollectionView.reloadData()
        
        self.dismiss(animated: true, completion: nil)
    }

구현해야할 함수는 이렇게 생겼는데, 중요한건 photo data들이 사진 파일 그 자체로 전달되는 것이 아니라 

디버깅 부분을 보면

 

assetIdentifier라고 저 코드로 전달이 된다. 그래서 저 코드를 가져와서 저장해서

asset 형태로 저장하고 화면에 뿌려줘야 한다.

 

identifier 상수에 0번째 파라미터로부터 가져온 assetIdentifier를 저장하고,

전역변수로 저장된 PHFetchResult<PHAsset> 형태의 배열인 fetchResults에 PHAsset.fetchAssets를 사용하여 identifier를 변환하여 넣어주고 collectionView를 reload하게 한 뒤, dismiss하여 메인으로 돌아간다.

 

화면에 뿌려주는 부분은 마찬가지로 

CollectionView에서 꼭 구현해야 하는 UICollectionViewDataSource 안의 두가지 함수에서 진행한다.

 

extension ViewController: UICollectionViewDataSource {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.fetchResults?.count ?? 0
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "PhotoCell", for: indexPath) as! PhotoCell
        
        if let asset = self.fetchResults?[indexPath.row]{
            cell.loadImage(asset: asset)
        }
        return cell
    }
}

 

첫번째 함수에서는 fetchResults의 길이를 계산하여 몇개의 셀을 보여줄건지 결저하고,

 

두번쟤 함수에서는 asset에서 요소들을 가져와서 PhotoCell에 선언한 loadImage함수에 파라미터로 보내 화면에 뿌려주게 한다.

 

PhotoCell의 loadImage 함수는

 

func loadImage(asset: PHAsset){
        
        let imageManager = PHImageManager()
        
        let scale = UIScreen.main.scale
        let imageSize = CGSize(width: 150 * scale, height: 150 * scale)
        
        let options = PHImageRequestOptions()
        options.deliveryMode = .opportunistic
        
        self.photoImageView.image = nil
        
        imageManager.requestImage(for: asset, targetSize: imageSize, contentMode: .aspectFill, options: options, resultHandler: {
            image, info in
//            if (info?[PHImageResultIsDegradedKey] as? Bool) == true {
//                //저화질
//            }else{
//                //고화질
//            }
            self.photoImageView.image = image
        })
    }

 

이렇게 생겼다.

PHImageManager를 인스턴스화 하고, 사진의 사이즈를 설정하기 위한 여러가지 작업들을 한다,

imageManager.requestImage를 사용하여, 전달받은 asset을 사이즈, 화질에 맞게 설정을 해주고

이미지를 반환하여 이미지 뷰에 뿌린다.

 

 

이렇게 하면 끝~~~~~~