Previous to iOS 16, if it’s good 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 tough to make use of it as you’ll be able to combine UIKit elements with UIViewControllerRepresentable
. That mentioned, it might 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 gadget 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 notice that it’s good to use Xcode 14 beta 4 to comply with 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: .pictures)) { Â Â Â Â 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 just a few traces of code, Xcode ought to present you a button within the preview.
In the event you click on the button, it shows a Images picker for selecting pictures from the picture library. While you select a photograph, the picture picker mechanically dismisses and the chosen picture merchandise is saved within the selectedItem
variable.
Filtering the Images
The matching
parameter helps you to specify the picture filter to use to the picture library. Within the code above, we set its worth to .pictures
to point out pictures solely. If you wish to show each pictures and movies, set the worth of the parameter to the next:
.any(of: [.images, .videos]) |
The .pictures
filter consists of all pictures within the consumer’s picture library. What if you wish to exclude reside pictures from the picture set? You’ll be able to set the worth like this:
.any(of: [.images, .not(.livePhotos)]) |
You employ the .not
filter to exclude Stay Images.
Dealing with the Photograph Choice
As talked about earlier, the chosen picture is mechanically saved within the selectedItem
variable, which has a kind of PhotoPickerItem
. So, how can we load the picture and show it on display?
First, we connect the onChange
modifier to hearken to the replace of the selectedItem
variable. Each time there’s a change, we name the loadTransferable
methodology to load the asset knowledge.
.onChange(of: selectedItem) { newItem in     Process {         if let knowledge = strive? await newItem?.loadTransferable(sort: Knowledge.self) {             selectedPhotoData = knowledge         }     } } |
Within the WWDC22 session (What’s new within the Images picker), Apple’s engineer confirmed us to specify the sort as Picture.self
. That is to instruct loadTransferable
to return an occasion of Picture
. Nonetheless, I couldn’t make it work on Xcode 14 beta 4. This is the reason 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 move it to the Picture
view:
Picture(uiImage: picture)
.resizable()
.scaledToFill()
.clipped()
}
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 consumer selects a picture from the built-in Images 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.
Choosing A number of Images
The PhotosPicker
view may also assist a number of picture choice. Let’s construct one other fast demo to see the way it works. Once more, now we have two state variables to carry the PhotosPickerItem
objects and Knowledge
object. Because the consumer might choose a couple of 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 methodology of PhotosPicker
:
Process {
if let knowledge = strive? await newItem.loadTransferable(sort: Knowledge.self) {
selectedPhotosData.append(knowledge)
}
}
}
}
PhotosPicker(choice: $selectedItems, maxSelectionCount: 5, matching: .pictures) {     Picture(systemName: “picture.on.rectangle.angled”) } .onChange(of: selectedItems) { newItems in     for newItem in newItems {          Process {             if let knowledge = strive? await newItem.loadTransferable(sort: Knowledge.self) {                 selectedPhotosData.append(knowledge)             }         }      } } |
This methodology has an extra parameter named maxSelection
. We set the worth to 5
, which implies the consumer is allowed to assist as much as 5 pictures. On this case, we might seize a couple of pictures within the onChange
closure. What we did is to load every of the picture gadgets 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, we put the button within the navigation bar. Right here is the total code snippet:
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(“Images”)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
PhotosPicker(choice: $selectedItems, maxSelectionCount: 5, matching: .pictures) {
Picture(systemName: “picture.on.rectangle.angled”)
}
.onChange(of: selectedItems) { newItems in
for newItem in newItems {
Process {
if let knowledge = strive? await newItem.loadTransferable(sort: Knowledge.self) {
selectedPhotosData.append(knowledge)
}
}
}
}
}
}
}
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(“Images”)     .toolbar {         ToolbarItem(placement: .navigationBarTrailing) {             PhotosPicker(choice: $selectedItems, maxSelectionCount: 5, matching: .pictures) {                 Picture(systemName: “picture.on.rectangle.angled”)             }             .onChange(of: selectedItems) { newItems in                 for newItem in newItems {                      Process {                         if let knowledge = strive? await newItem.loadTransferable(sort: Knowledge.self) {                             selectedPhotosData.append(knowledge)                         }                     }                  }             }         }     } } |
When there may be any adjustments of the selectedPhotosData
variable, SwiftUI will refresh the UI and show the pictures within the scroll view.
In the event you take pleasure in this text and need to dive deeper into SwiftUI, it’s possible you’ll try our Mastering SwiftUI e-book.