How to Use the SwiftUI PhotosPicker | by Lee Kah Seng

No extra utilizing UIViewControllerRepresentable and PHPickerViewController

How to Use the SwiftUI PhotosPicker

On this yr’s WWDC, Apple brings in tons of enhancements to SwiftUI, one explicit that catches my consideration is the PhotosPicker view. Sure, you’re proper! SwiftUI is lastly getting its personal native picture picker view in iOS 16.

The PhotosPicker view helps all of the frequent functionalities that PHPickerViewController has. Functionalities similar to single and a number of picks, asset kind filtering, and album switching are all included.

The way in which of utilizing the PhotosPicker view is definitely fairly simple. Let me present you the way.

First issues first, let’s first import the SwiftUI and PhotosUI module. After that, outline a state named selectedItem of kind PhotosPickerItem.

For higher reminiscence effectivity, the asset chosen by the person can be given to us within the type of PhotosPickerItem. We’ll use it to retrieve the underlying asset in a while.

With that in thoughts, we are able to add the PhotosPicker view to the content material view’s physique like so:

For simplicity’s sake, I’ve configured the PhotosPicker view to point out a single choice images picker that solely shows pictures. Be at liberty to take a look at the official documentation for extra configuration choices.

Primarily based on my private expertise, I discover that it’s necessary to set photoLibraryto .shared() when initializing the PhotosPicker view. If we omit it, the binding of $selectedItem is not going to work. I’m not positive why is it so, possibly it’s a bug within the beta launch that can be fastened within the close to future. If anybody is aware of the rationale behind it, do hit me up on Twitter.

Now, in case you go forward and run the pattern code, you will note the PhotosPicker view labeled as “Choose a photograph” on the heart of the display. Tapping on it can carry up the iOS native images picker.

Using the SwiftUI PhotosPicker view introduced in iOS 16

We’re going to retrieve the user-selected asset within the type of Information. Thus let’s go forward and outline the state for that:

@State personal var selectedImageData: Information? = nil

The way in which to deal with asset choice is fairly simple. The idea is to make use of the PhotosPicker view’s onChange() modifier to detect the change of selectedItem. After that, we are going to use the selectedItem‘s loadTransferable()technique to get the underlying asset.

Lastly, let’s present the chosen picture proper under the PhotosPicker view.

That’s it for dealing with asset choice. Run the pattern code once more to see all the pieces in motion.

Selecting image in the iOS photos picker

Right here’s the total pattern code:

When you have watched the WWDC session about the PhotosPicker view, you’ll discover that the way in which we retrieve the chosen picture is slightly bit totally different from what we noticed within the video. As an alternative of loading it within the type of Picture, we’re loading it within the type of Information.

Retrieving selected image from photos picker in SwiftUI

As defined on this forum post, the Picture kind solely helps public.png as its content material kind. If the images picker incorporates property of kind aside from png, similar to jpeg or heic, we won’t be able to retrieve it. Till Apple provides extra content material kind help to Picture, it’s nonetheless advisable to make use of Information when retrieving pictures from the images picker.

All through this text, I’ve been operating the pattern code on iOS, however in actual fact, the pattern code will run completely tremendous on macOS, iPadOS, and watchOS.

Based on Apple, the images picker will mechanically select the perfect format relying on the platform and the obtainable display area. This can positively come out fairly useful for many who have to help a number of platforms.

If you happen to take pleasure in studying this text, be happy to take a look at my different iOS development-related articles. You can too observe me on Twitter.

Thanks for studying.

More Posts