Hi! I am having a bit of trouble with the Photos Picker. In my app, users are able to select photos to appear in a grid, right in the app. I am using the new Photos Picker with SwiftUI. I want to be able to have my users select the images after they have been added to the View. So I want there to be a select button in the top toolbar on the leading side, and then once the user hits the select button, they can select the photos they want to remove on the grid, just like in the photos app, and then where the button to add photos originally is, there will be a trash icon to remove the selected photos from the grid.
How would I do this? I have attached my code below for my view, as well as my PhotoPicker:
import PhotosUI
struct LifestyleImagePicker: View {
@StateObject var imagePicker = ImagePicker()
@State private var showingDetail = false
@State private var selectedIndex = 0
@State private var isSelecting = false
@State private var isAddingPhoto = false
let columns = [GridItem(.adaptive(minimum: 100))]
var body: some View {
NavigationSplitView {
VStack {
if !imagePicker.images.isEmpty {
ScrollView {
LazyVGrid(columns: columns, spacing: 3) {
ForEach(imagePicker.images.indices, id: \.self) { index in
imagePicker.images[index]
.resizable()
.scaledToFit()
.onTapGesture {
selectedIndex = index
showingDetail = true
}
}
}
}
} else {
Text("Tap the plus icon to add photos to your own Inspo Board.")
.multilineTextAlignment(.center)
}
}
.padding()
.navigationTitle("Lifestyle")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
PhotosPicker(selection: $imagePicker.imageSelections,
maxSelectionCount: 10,
matching: .images,
photoLibrary: .shared()) {
Image(systemName: "photo.badge.plus")
.imageScale(.large)
}
}
}
} detail: {
Text("Pick your lifestyle")
}
.sheet(isPresented: $showingDetail) {
DetailImageView(images: $imagePicker.images, selectedIndex: selectedIndex)
}
}
}
#Preview {
LifestyleImagePicker()
}
import PhotosUI
import Combine
import Foundation
@MainActor
class ImagePicker: ObservableObject {
@Published var image: Image?
@Published var images: [Image] = []
@Published var imageSelection: PhotosPickerItem? {
didSet {
if let imageSelection {
Task {
try await loadTransferable(from: imageSelection)
}
}
}
}
@Published var imageSelections: [PhotosPickerItem] = [] {
didSet {
Task {
if !imageSelections.isEmpty {
try await loadTransferable(from: imageSelections)
imageSelections = []
}
}
}
}
func loadTransferable(from imageSelections: [PhotosPickerItem]) async throws {
do {
for imageSelection in imageSelections {
if let data = try await imageSelection.loadTransferable(type: Data.self) {
if let uiImage = UIImage(data: data) {
self.images.append(Image(uiImage: uiImage))
}
}
}
} catch {
print(error.localizedDescription)
}
}
func loadTransferable(from imageSelection: PhotosPickerItem?) async throws {
do {
if let data = try await imageSelection?.loadTransferable(type: Data.self) {
if let uiImage = UIImage(data: data) {
self.image = Image(uiImage: uiImage)
}
}
} catch {
print(error.localizedDescription)
image = nil
}
}
}
Post
Replies
Boosts
Views
Activity
I have a question about what is going on here. How do I fix this? I am using an app with firebase. What does deployment target mean? I have already gone into my Xcode settings and picked deployment target to be iOS17. What is the next step? Is it something with my firebase?
Hello! I have been working on an app for quite some time now, and one of my views is of a bunch of different articles that my brand has written. The articles can be found on their website, and so as of late, I have just been copying and pasting all of the data from each article into a JSON file in my app; However, as the list of articles grow, I need to fetch the data directly from the website and have it integrated with my code, so every time a new article is published, users dont have to update their app. Is there any way someone could help with this? I've been struggling for a while now. Thanks!