[iOS - swift] 2. 갤러리 화면 만들기, 사진 첨부 - 사진 가져오기 (PHCachingImageManager, PHImageRequestOptions)

1. 갤러리 화면 만들기, 사진 첨부 - 앨범 가져오기 (PHFetchResult, PHAsset)

2. 갤러리 화면 만들기, 사진 첨부 - 사진 가져오기 (PHCachingImageManager, PHImageRequestOptions)

3. 갤러리 화면 만들기, 사진 첨부 - 갤러리 화면 UI 구현 방법

직접 구현한 사진 선택 화면

앨범과 사진 가져오는 방법

(이전글에 있는 내용 복습)

• Photos 모듈에서 제공하는 API를 사용
  • 디바이스의 앨범을 먼저 가져오기 (PHFetchResult가 앨범을 의미)
  • 앨범에 담긴 이미지 정보 가져오기 (PHAsset이 이미지나 비디오 정보를 의미)
  • PHAsset을 가지고 UIImage 이미지 가져오기 (PHCachingImageManager가 요청한 크기에 맞추어 PHAsset으로부터 이미지를 가져옴)
  • 쿼리는 모두 PHImageRequestOptions를 작성
• 위에서 얻은 이미지(UIImage)를 UICollectionView와 UICollectionViewFlowLayout으로 쉽게 구현이 가능

사진 가져오기

• 이전 포스팅 글에서 albumService를 구현하여 앨범을 가져오는것까지 진행했고, 이 앨범에서 PHAssets을 가져온 후 사진 가져오기 기능 구현이 필요

// PhotoViewController.swift

private let albumService: AlbumService = MyAlbumService()
private var albums = [PHFetchResult<PHAsset>]()

override func viewDidLoad() {
    super.viewDidLoad()
    
    setupUI()
    loadAlbums(completion: { [weak self] in
        self?.loadImages()
    })
}

private func loadAlbums(completion: @escaping () -> Void) {
    albumService.getAlbums(mediaType: .image) { [weak self] albumInfos in
        self?.albums = albumInfos.map(\.album)
        completion()
    }
}

private func loadPHAssetsFromAlbums() {
	// TODO...
}

 

• 사진 가져오기 기능 구현
  • 사진 가져오는 기능은 여러곳에서 사용될 기능이기 때문에 앨범 가져오기와 유사하게 service 레이어로 나누어 구현
  • convertAlbumToPHAsset(): 앨범을 이미지나 비디오 정보들의 데이터인 PHAsset으로 바꾸는 메소드
  • fetchImage(): PHAsset으로부터 이미지(UIImage)를 가져오는 메소드

protocol PhotoService {
    func convertAlbumToPHAssets(album: PHFetchResult<PHAsset>, completion: @escaping ([PHAsset]) -> Void)
    func fetchImage(phAsset: PHAsset, size: CGSize, contentMode: PHImageContentMode, completion: @escaping (UIImage) -> Void)
}

• 구현체 선언 MyPhotoService

final class MyPhotoService: NSObject, PhotoService {

}

• 앨범 정보(PHFetchResult)를 PHAsset으로 변경하기
  • PHFetchResult를 enumerateObjects로 루프를 돌면서 phAsset 값을 획득

func convertAlbumToPHAssets(album: PHFetchResult<PHAsset>, completion: @escaping ([PHAsset]) -> Void) {
    var phAssets = [PHAsset]()
    defer { completion(phAssets) }
    
    guard 0 < album.count else { return }
    album.enumerateObjects { asset, index, stopPointer in
        guard index <= album.count - 1 else {
            stopPointer.pointee = true
            return
        }
        phAssets.append(asset)
    }
}

• PHAsset에서 UIImage 가져오기
  • PHCachingImageManager를 이용하여 요청한 크기에 맞게 이미지를 로드하여 캐싱까지 수행하도록 구현

private let imageManager = PHCachingImageManager()

func fetchImage(
    phAsset: PHAsset,
    size: CGSize,
    contentMode: PHImageContentMode,
    completion: @escaping (UIImage) -> Void
) {
    let options = PHImageRequestOptions().then {
        $0.isNetworkAccessAllowed = true // iCloud
        $0.deliveryMode = .highQualityFormat
    }
    
    imageManager.requestImage(
        for: phAsset,
        targetSize: size,
        contentMode: contentMode,
        options: options,
        resultHandler: { image, _ in
            guard let image else { return }
            completion(image)
        }
    )
}

사용하는 쪽

• 앨범 가져오기 -> 앨범으로부터 PHAssets 획득

// PhotoViewController.swift

private let albumService: AlbumService = MyAlbumService()
private let photoService: PhotoService = MyPhotoService()
private var albums = [PHFetchResult<PHAsset>]()

override func viewDidLoad() {
    super.viewDidLoad()
    
    setupUI()
    loadAlbums(completion: { [weak self] in
        self?.loadImages()
    })
}

private func loadAlbums(completion: @escaping () -> Void) {
    albumService.getAlbums(mediaType: .image) { [weak self] albumInfos in
        self?.albums = albumInfos.map(\.album)
        completion()
    }
}

private func loadPHAssetsFromAlbums() {
    let album = albums[currentAlbumIndex]
    photoService.convertAlbumToPHAssets(album: album) { [weak self] phAssets in
        print(phAssets)
    }
}

 

• phAssets 정보가 있으면 UIImage를 가져올 수 있으므로 UICollectionView를 사용한다면 cellForItemAt에서 이미지를 가져와서 사용하도록 구현
  • 구체적인 내용은 다음 포스팅 글에서 계속

func collectionView(.. cellForItemAt ..) -> UICollectionViewCell {
   ...
    photoService.fetchImage(
        phAsset: phAsset,
        size: imageSize,
        contentMode: .aspectFit,
        completion: { [weak cell] image in
            cell?.prepare(info: .init(phAsset: phAsset, image: image, selectedOrder: imageInfo.selectedOrder))
        }
    )
    
    return cell
}

* 전체 코드: https://github.com/JK0369/ExPhoto.git