Previous to iOS 16, if it is advisable to show a photograph picker for customers to decide on pictures from Photograph library, it’s important to depend on PHPickerViewController or the older UIImagePickerController of UIKit. It’s not troublesome to make use of it as you possibly can combine UIKit parts with UIViewControllerRepresentable. That mentioned, it could be nice if the SwiftUI framework comes with a local view for picture picker.
In iOS 16, Apple lastly brings PhotosPicker to SwiftUI that it has the identical functionalities as its UIKit counterpart. In case your app will solely assist machine working iOS 16 or up, you should use this new view for dealing with picture picks.
Let’s see the way it works with some pattern code. Please observe that it is advisable to use Xcode 14 beta 4 to observe this tutorial.
Utilizing PhotosPicker in SwiftUI
The PhotosPicker view is bundled within the PhotosUI framework. Earlier than utilizing it, it’s important to first import the framework:
Subsequent, we declare a state variable to carry the chosen picture:
|
@State personal var selectedItem: PhotosPickerItem? |
It’s fairly straightforward to carry up the pictures picker. Right here is the essential utilization of PhotosPicker:
|
PhotosPicker(choice: $selectedItem, matching: .photographs)) { Â Â Â Â Label(“Choose a photograph”, systemImage: “picture”) } .tint(.purple) .controlSize(.giant) .buttonStyle(.borderedProminent) |
You instantiate PhotosPicker by passing it a binding to the chosen merchandise and a photograph filter. Within the closure, you describe the looks of the button. With a number of strains of code, Xcode ought to present you a button within the preview.
In the event you click on the button, it shows a Photographs picker for selecting photographs from the picture library. If you select a photograph, the picture picker routinely dismisses and the chosen picture merchandise is saved within the selectedItem variable.
Filtering the Photographs
The matching parameter allows you to specify the picture filter to use to the picture library. Within the code above, we set its worth to .photographs to point out photographs solely. If you wish to show each photographs and movies, set the worth of the parameter to the next:
|
.any(of: [.images, .videos]) |
The .photographs filter consists of all photographs within the person’s picture library. What if you wish to exclude reside pictures from the picture set? You may set the worth like this:
|
.any(of: [.images, .not(.livePhotos)]) |
You utilize the .not filter to exclude Stay Photographs.
Dealing with the Photograph Choice
As talked about earlier, the chosen picture is routinely saved within the selectedItem variable, which has a sort of PhotoPickerItem. So, how can we load the picture and show it on display screen?
First, we connect the onChange modifier to hearken to the replace of the selectedItem variable. At any time when there’s a change, we name the loadTransferable technique to load the asset knowledge.
|
.onChange(of: selectedItem) { newItem in     Activity {         if let knowledge = strive? await newItem?.loadTransferable(kind: Knowledge.self) {             selectedPhotoData = knowledge         }     } } |
Within the WWDC22 session (What’s new within the Photographs picker), Apple’s engineer confirmed us to specify the kind as Picture.self. That is to instruct loadTransferable to return an occasion of Picture. Nevertheless, I couldn’t make it work on Xcode 14 beta 4. That is why I used Knowledge.self as a substitute. Later, we will convert the info into an UIImage object for displaying in an Picture view.
The selectedPhotoData variable is one other state variable that’s used to carry the info object:
|
@State personal var selectedPhotoData: Knowledge? |
To show the chosen picture in a picture view, we create an occasion of UIImage utilizing the picture knowledge after which cross it to the Picture view:
|
if let selectedPhotoData, Â Â Â Â let picture = UIImage(knowledge: selectedPhotoData) { Â Â Â Â Â Picture(uiImage: picture) Â Â Â Â Â Â Â Â .resizable() Â Â Â Â Â Â Â Â .scaledToFill() Â Â Â Â Â Â Â Â .clipped() Â } |
That is the way you deal with the picture choice. To recap, we retrieve the picture knowledge when a person selects a picture from the built-in Photographs library. We save the picture knowledge to a state variable (i.e. selectedPhotoData). SwiftUI detects the worth change and triggers a UI replace to render the picture on display screen.
Deciding on A number of Photographs
The PhotosPicker view may assist a number of picture choice. Let’s construct one other fast demo to see the way it works. Once more, we’ve got two state variables to carry the PhotosPickerItem objects and Knowledge object. Because the person could choose multiple pictures, each variables develop into an array:
|
@State personal var selectedItems: [PhotosPickerItem] = [] @State personal var selectedPhotosData: [Data] = [] |
To assist a number of picture choice, the trick is to make use of one other initialization technique of PhotosPicker:
|
PhotosPicker(choice: $selectedItems, maxSelectionCount: 5, matching: .photographs) {     Picture(systemName: “picture.on.rectangle.angled”) } .onChange(of: selectedItems) { newItems in     for newItem in newItems {          Activity {             if let knowledge = strive? await newItem.loadTransferable(kind: Knowledge.self) {                 selectedPhotosData.append(knowledge)             }         }      } } |
This technique has a further parameter named maxSelection. We set the worth to 5, which suggests the person is allowed to assist as much as 5 pictures. On this case, we could seize multiple pictures within the onChange closure. What we did is to load every of the picture objects and add it to the info array (i.e. selectedPhotosData).
For this demo view, as a substitute of making a button on the centre of the display screen, we put the button within the navigation bar. Right here is the complete code snippet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
NavigationStack {      ScrollView {         VStack {             ForEach(selectedPhotosData, id: .self) { photoData in                 if let picture = UIImage(knowledge: photoData) {                     Picture(uiImage: picture)                         .resizable()                         .scaledToFit()                         .cornerRadius(10.0)                         .padding(.horizontal)                 }             }         }     }       .navigationTitle(“Photographs”)     .toolbar {         ToolbarItem(placement: .navigationBarTrailing) {             PhotosPicker(choice: $selectedItems, maxSelectionCount: 5, matching: .photographs) {                 Picture(systemName: “picture.on.rectangle.angled”)             }             .onChange(of: selectedItems) { newItems in                 for newItem in newItems {                      Activity {                         if let knowledge = strive? await newItem.loadTransferable(kind: Knowledge.self) {                             selectedPhotosData.append(knowledge)                         }                     }                  }             }         }     } } |
When there’s any adjustments of the selectedPhotosData variable, SwiftUI will refresh the UI and show the pictures within the scroll view.
In the event you get pleasure from this text and need to dive deeper into SwiftUI, you could try our Mastering SwiftUI ebook.