iOS 14+ ) PHPicker

 

안녕하세요 :) Zedd입니다,

WWDC를 보다가 정말정말..새로운것을 보게되어서 이렇게 공부하게 되었어요 :D

너무 재밌당

 

developer.apple.com/videos/play/wwdc2020/10652/

Meet the new Photos picker - WWDC 2020 - Videos - Apple Developer

기존에 빌트인된 Photo Picker는 UIPickerViewControler가 있었는데요,

iOS14에서 새로운 Photo Picker가 나왔습니다!!! 🎉

바로

PHPicker입니다. 

 

PHPicker

---

 

애플 : PHPicker는 UIImagePickerController를 모-던한 방식으로 대체한 것...이라고 할 수 있는 부분..

PHPicker가 어떻게 생겼는지 한번 살펴볼까요!?

 

보시다시피, multiselect / zoom in or out / search를 지원합니다.

대단하죠!?!?!

PHPicker의 더 대단한 점은, 따로 권한 요청 팝업이 뜨지 않는다는 점..입니다.

이 부분은 나중에 설명하도록 하고,

PHPicker의 configuration과 present하는 방법에 대해서 알아봅시다.

UIImagePickerController와 거의 흡사하며

전체적인 flow는 이렇게 됩니다.

그럼 시작해봅시다.

참고로 아직 문서에 정의가 없는 것들이 많아서 전부 WWDC를 참고했습니다. 

 

1. import PhotosUI 

위 그림에 나온 친구들은 PhotosUI 프레임워크 안에 있으므로 PhotosUI를 import해야합니다.

 

2. Create PHPickerConfiguration

먼저 PHPickerConfiguration을 만들어줘야합니다. 

이 configuration으로 하고싶은것들을 제어할 수 있습니다. 

 

- selectionLimit

이름에서 보실 수 있다시피, 선택할 수 있는 최대 asset 수를 지정하는 프로퍼티입니다. 

기본값은 1이며, 만약 unlimited selection을 지정하고 싶다면 0을 주면 됩니다. 

 

- filter

이 친구는 위 그림에 나와있는 PHPickerFilter타입입니다. 

표시하는 타입을 제한하기 위한 filter이며 기본값은 nil이에요.

 nil로 설정한다는 것은, 모든 asset의 타입을 표시 한다는 것입니다! 

들어갈 수 있는 값은 

 

이렇게 4개가 있습니다. images, videos, livePhotos는 딱 보시면 아시겠죠? any는 

 

 

이런식으로 사용하는 것입니다.

 

3. Initialize PHPicker

configuration을 만들었으면 이제 이 configuration을 가지고 Picker를 만들어야합니다.

이렇게요.

 

4. conform PHPickerViewControllerDelegate

UIImagePickerController도 선택하고 나면 didFinishPickingMediaWithInfo메소드로

선택한 미디어에 대한 정보를 가져왔잖아요? PHPicker도 똑같은게 있습니다.

먼저

PHPickerViewControllerDelegate를 채택해주시고, required method인

이 메소드를 정의해줘야합니다.

그리고 위에서 만든 picker의 delegate를 지정해주겠습니다.

 

5. Present Picker

그리고 present해줍시다.

그러면..!

PHPicker가 예쁘게 뜨게 됩니다.

그럼 picker까지 present하는 최종 코드입니다. configuration은 알아서 지정해주세요.

 

그럼 내가 선택한 asset들을 다루는 방법에 대해서 알아봅시다. 

위 메소드를 손보면 될 것 같아요. 딱봐도 results에 내가 선택한 asset들이 들어있겠네요.

최종코드를 봅시다. 코드의 출처는 wwdc..ㅋ

1. 먼저 picker를 dismiss시켜줍니다.

2. itemProvider를 가져옵니다. itemProvider는 선택된 asset의 Representation이라고 해요. 

3. provider가 내가 지정한 타입을 로드할 수 있는지 먼저 체크를 한 뒤

4. 로드 할 수 있으면 로드를 합니다.

5. loadObject는 completionHandler로 NSItemProviderReading과 error를 줍니다. 

 

imageView안의 image안에 넣으려면 UIImage타입이어야하잖아요?

근데 NSItemProviderReading타입이기때문에..UIImage로 캐스팅을 해서 넣어줘야합니다. 

참고로 itemProvider api는 background async이기 때문에,

저 안에서 UI관련된 업데이트를 하고싶으면 꼭 main에서 돌려줘야합니다.

실행해보면

잘 되는 것을 볼 수 있죠. 

 

 자..그럼 위에서 잠깐 언급했듯이..이것들이 어떻게 권한없이 작동할 수 있을까요? 

핵심은 PHPicker가 Limited Photo library access를 사용하기 때문입니다. 

기존 PhotoKit api를 이용하는 앱은

모든 사진 라이브러리에 접근이 가능했습니다. 사용자가 권한만 허용하면요.

Limited Photo library acesss는 간단하게 말하면

유저가 접근하도록 선택한!!!!! asset에만 접근을 할 수 있다는 소리입니다. 

 

이것이 iOS14에서 우리 앱에 어떤 영향을 미치는지 한번 보겠습니다. 

자..우리 앱은 기존에 사진 라이브러리에 접근 권한을 부여하라는 메세지가 뜹니다.

참고로 이 앱은 모든 사진을 가져오는 앱입니다. github에 있습니다. 

iOS14로 가면, 위 권한 요청이 

이렇게 뜹니다. 사실상 가장 위의 Select Photos 하나만 추가된 셈이죠.

Select Photos를 눌러보겠습니다.

그럼 PHPicker가 뜨게 되고, 미디어를 선택할 수 있게 됩니다. 

선택하고 오른쪽 상단의 Done을 눌러보겠습니다. 

자...그럼........제가 기대한.............거는....다시 실행하면

제가 선택한 asset만 나오는것을 기대했는데..WWDC에서도 그렇게 됐고...

근데

제가 선택한거 이외에도 다 나오네요..ㅋ..근데 뭔가 잘못된거는 맞아요! 콘솔창에 

2020-06-28 13:04:57.312383+0900 PhotoKitPractice[90675:3268303] [ImageManager] Failed to get sandbox extension for url: file:///Users/Zedd/Library/Developer/CoreSimulator/Devices/F83A429B-5A13-480F-880A-5BB060753A52/data/Media/PhotoData/Thumbnails/V2/DCIM/100APPLE/IMG_0019.PNG/5003.JPG, error: Error Domain=com.apple.photos.error Code=41008 "Invalid asset uuid for client" UserInfo={NSLocalizedDescription=Invalid asset uuid for client}

이렇게 뜹니다. 아무튼 자세한 내용은.. WWDC영상을 참고해주세요.

버그인건지..제가 뭘 잘못하는건지 모르겠네요. 근데 버그같은데...(의심..) 

아무튼 PHPicker가 나와서 저는 개인적으로...너무 좋고..그러네요..

multiselect하려면 꼭 custom Picker를 구현해야 했잖아요!? 

그런 작업을 안해줘도 되어서..좋네요.

 

애플 : 응 근데 iOS14부터야~

Zedd: ㅋ......!!!!!

 

참고로 기존에..

뭐 이런식ㅇ으로..권한 체크 및 요청을 하셨을텐데요, 

위에서 사용한 두 메소드에 deprecated딱지가 붙었으며

authorizationStatusForAccessLevel을 사용하라고 나옵니다. 

 

 

애플 : 아 물론 iOS 14부터~~~

Zedd:  ㅇㅋ...

 

새로나온 API를 사용하는 방법은

- 권한 요청

 

- 권한 체크

 

이렇게 하시면 됩니다. 

 limited는 위에서 말한 Limited Photo library access 상태겠죠!?

 

PHPicker를 띄우는 전체 소스코드는 github에 올려놨으니 참고하세요!

 

---

Related WWDC Video

developer.apple.com/videos/play/wwdc2020/10652

Meet the new Photos picker - WWDC 2020 - Videos - Apple Developer

developer.apple.com/videos/play/wwdc2020/10641/

Handle the Limited Photos Library in your app - WWDC 2020 - Videos - Apple Developer

---