Swiftui image not getting rendered in sharesheet - unless you click twice - swiftui

I create a view that will become a snapshot to send to the Share Sheet. Unfortunately, I get a nil image the first time I click share. The second time, the snapshot image shows up fine.
struct AffirmationSharingView: View {
//saving this view to send to shareSheet
var viewToShare: some View {
ZStack{
Image("night4")
.resizable()
Text("affirmation here")
.foregroundColor(.white)
}
}
#State private var showShareSheet = false
#State var myImage: UIImage! = UIImage(named: "test")
var body: some View {
GeometryReader{gp in
ZStack{
Image("night4")
.resizable()
.frame(width: gp.size.width*0.9, height: gp.size.height*0.5 , alignment: .top)
Text("affirmation here")
Spacer()
HStack{
VStack{
Image("wigshareIcon")
.resizable()
.aspectRatio(1, contentMode:.fit)
.frame(width: gp.size.width*0.2, height: 60, alignment: .top)
Text("Share To Other Social Media")
}
.onTapGesture {
//save the image/affirmation combo to a UIImage to be sent to the share sheet
myImage = viewToShare.snapshot()
self.showShareSheet = true
}
}
.padding()
}
}
}
.onAppear(perform: getImage)
.sheet(isPresented: $showShareSheet, content: {
// let myImage3 = viewToShare.snapshot()
ShareView(activityItems: ["Rest Rise Grow App!",myImage]) //myImage!]) //[myImage as! Any]) //[data])
}
func getImage(){
self.myImage = viewToShare.snapshot()
if self.myImage != nil {
print("1sharesheet has some value")
print("1sharesheet equals \(myImage)")
} else {
print("Did not set 1screenshot")
}
}
extension View {
func snapshot() -> UIImage {
let controller = UIHostingController(rootView: self)
let view = controller.view
let targetSize = controller.view.intrinsicContentSize
view?.bounds = CGRect(origin: .zero, size: targetSize)
view?.backgroundColor = .clear
let renderer = UIGraphicsImageRenderer(size: targetSize)
return renderer.image { _ in
view?.drawHierarchy(in: controller.view.bounds, afterScreenUpdates: true)
}
}
}
Here are the logs:
2021-12-27 20:20:44.389453-0500 Rest Rise Grow[1672:423870] [Snapshotting] View (0x102168800, _TtGC7SwiftUI14_UIHostingViewGVS_15ModifiedContentGS1_GVS_6ZStackGVS_9TupleViewTGS1_VS_14LinearGradientVS_12_FrameLayout_GS1_VS_5ImageGVS_16_OverlayModifierGVS_10_ShapeViewGVS_13_StrokedShapeVVS_16RoundedRectangle6_Inset_VS_5Color___GVS_19_ConditionalContentVS_4TextS14_____GVS_11_ClipEffectS10___GVS_19_BackgroundModifierS12____) drawing with afterScreenUpdates:YES inside CoreAnimation commit is not supported.
2021-12-27 20:20:45.865260-0500 Rest Rise Grow[1672:424205] Metal API Validation Enabled
sharesheet has some value
sharesheet equals Optional(<UIImage:0x280e48360 anonymous {786, 831}>)
Rest_Rise_Grow/SettingsViewController.swift:833: Fatal error: Unexpectedly found nil while unwrapping an Optional value
2021-12-27 20:20:46.296762-0500 Rest Rise Grow[1672:423870] Rest_Rise_Grow/SettingsViewController.swift:833: Fatal error: Unexpectedly found nil while unwrapping an Optional value

Related

SwiftUI: VideoPlayer to display different videos stored locally (back and forward buttons)

I'm still new to SwiftUI and have run into a problem. I need to use back and forward buttons to make the Video Player go to the previous/next video (stored locally). The following code works for one video only, the one declared into the init(), but I can't manage to change the video by clicking the back and forward buttons.
I'm using an array of String called videoNames to pass all the video names from the previous View.
Also, I'm using a custom Video Player for this and I'm gonna include the relevant parts of the code.
This is my View:
struct WorkingOutSessionView: View {
let videoNames: [String]
#State var customPlayer : AVPlayer
#State var isplaying = false
#State var showcontrols = false
init(videoNames: [String]) {
self.videoNames = videoNames
self._customPlayer = State(initialValue: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: videoNames[0], ofType: "mov")!)))
}
var body: some View {
VStack {
CustomVideoPlayer(player: $customPlayer)
.frame(width: 390, height: 219)
.onTapGesture {
self.showcontrols = true
}
GeometryReader {_ in
// BUTTONS
HStack {
// BACK BUTTON
Button(action: {
// code
}, label: {
Image(systemName: "lessthan")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60)
.foregroundColor((Color(red: 243/255, green: 189/255, blue: 126/255)))
.padding()
})
// FORWARD BUTTON
Button(action: {
// code
}, label: {
Image(systemName: "greaterthan")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60)
.foregroundColor((Color(red: 243/255, green: 189/255, blue: 126/255)))
.padding()
})
}
}
}
.offset(y: 35)
.edgesIgnoringSafeArea(.all)
}
This is my custom Video Player:
struct CustomVideoPlayer : UIViewControllerRepresentable {
#Binding var player: AVPlayer
func makeUIViewController(context: UIViewControllerRepresentableContext<CustomVideoPlayer>) -> AVPlayerViewController {
let controller = AVPlayerViewController()
controller.player = player
controller.showsPlaybackControls = false
return controller
}
func updateUIViewController(_ uiViewController: AVPlayerViewController, context: UIViewControllerRepresentableContext<CustomVideoPlayer>) {
}
}
I've researched for solutions but couldn't find anything relevant. I've tried to modify my CustomVideoPlayer and not pass a #Binding variable... As well, the init() gave me a lot of headaches as it comes back to errors every time I change something...
Any solution would help guys. I really appreciate your time.
The first thing that you'll need is something to keep track of your position in the video list. I'm using another #State variable for this.
Whenever that state variable changes, you'll need to update your player. I'm using the onChange modifier near the bottom of the code to do this work.
In your CustomVideoPlayer, you need to use updateUIViewController to make sure the player is up-to-date with the parameter being passed in.
Lastly, there's no need for AVPlayer to be a #Binding, since it's a class that is passed by reference, not a struct that is passed by value.
struct WorkingOutSessionView: View {
let videoNames: [String]
#State private var customPlayer : AVPlayer
#State private var currentItem = 0
#State var isplaying = false
#State var showcontrols = false
init(videoNames: [String]) {
self.videoNames = videoNames
self._customPlayer = State(initialValue: AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: videoNames[0], ofType: "mov")!)))
}
var body: some View {
VStack {
CustomVideoPlayer(player: customPlayer)
.frame(width: 390, height: 219)
.onTapGesture {
self.showcontrols = true
}
.onAppear {
self.customPlayer.play()
}
GeometryReader { _ in
// BUTTONS
HStack {
// BACK BUTTON
Button(action: {
currentItem = min(currentItem, currentItem - 1)
}) {
Image(systemName: "lessthan")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60)
.foregroundColor((Color(red: 243/255, green: 189/255, blue: 126/255)))
.padding()
}
// FORWARD BUTTON
Button(action: {
currentItem = min(videoNames.count - 1, currentItem + 1)
}) {
Image(systemName: "greaterthan")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60)
.foregroundColor((Color(red: 243/255, green: 189/255, blue: 126/255)))
.padding()
}
}
}
}
.offset(y: 35)
.edgesIgnoringSafeArea(.all)
.onChange(of: currentItem) { currentItem in
print("Going to:",currentItem)
self.customPlayer.pause()
self.customPlayer = AVPlayer(url: URL(fileURLWithPath: Bundle.main.path(forResource: videoNames[currentItem], ofType: "mov")!))
self.customPlayer.play()
}
}
}
struct CustomVideoPlayer : UIViewControllerRepresentable {
var player: AVPlayer
func makeUIViewController(context: UIViewControllerRepresentableContext<CustomVideoPlayer>) -> AVPlayerViewController {
let controller = AVPlayerViewController()
controller.player = player
controller.showsPlaybackControls = false
return controller
}
func updateUIViewController(_ uiViewController: AVPlayerViewController, context: UIViewControllerRepresentableContext<CustomVideoPlayer>) {
uiViewController.player = player
}
}
If this were my own project, I'd probably continue to do some refactoring -- maybe move some things to a view model, etc. Also, I'd probably avoid initializing an AVPlayer in a View's init as I mentioned in my last answer to you on your previous question. It works, but there's definitely a risk you'll end up doing too much heavy lifting if the view hierarchy re-renders.

Having user add multiple Images to SwiftUI view

I am practicing with SwiftUI and making a meme maker which has labels that are produced from a textField and can be moved and resized. I also want to be able to do this with images from the users Photo library. I am able to get one image, but if I try and get more it just replaces the first image. I tried having the images added to an array, but then the images will not show up on the memeImageView.
Image property
#State private var image = UIImage()
Button
Button {
self.isShowPhotoLibrary = true
} label: {
Text("Add Image")
.foregroundColor(Color.yellow)
}.sheet(isPresented: $isShowPhotoLibrary) {
ImagePicker(sourceType: .photoLibrary, selectedImage: self.$image)
}
MemeUmageView
var memeImageView: some View {
ZStack {
KFImage(URL(string: meme.url ?? ""))
.placeholder {
ProgressView()
}
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: UIScreen.main.bounds.height / 2.5)
ForEach(addedLabels, id:\.self) { label in
DraggableLabel(text: label)
}
DraggableImage(image: image)
}
.clipped()
}
Attempt with using an array. I also tried making three buttons to add up to three images, each as its own property thinking that the initial property was being overridden.
My image array
#State private var addedImages = [UIImage?]()
Button
Button {
self.isShowPhotoLibrary = true
addedImages.append(image)
} label: {
Text("Add Image")
.foregroundColor(Color.yellow)
}.sheet(isPresented: $isShowPhotoLibrary) {
ImagePicker(sourceType: .photoLibrary, selectedImage: self.$image)
}
var memeImageView: some View {
ZStack {
KFImage(URL(string: meme.url ?? ""))
.placeholder {
ProgressView()
}
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: UIScreen.main.bounds.height / 2.5)
ForEach(addedLabels, id:\.self) { label in
DraggableLabel(text: label)
}
ForEach(0..<addedImages.count) { index in
DraggableImage(image: addedImages[index]!)
}
}
.clipped()
}
Where I call MemeImageView.
var body: some View {
VStack(spacing: 12) {
memeImageView
ForEach(0..<(meme.boxCount ?? 0)) { i in
TextField("Statement \(i + 1)", text: $addedLabels[i])
.padding(.horizontal, 8)
.padding(.vertical, 4)
.background(Color.gray.opacity(0.25))
.cornerRadius(5)
.onTapGesture {
self.endEditing()
}
}
.padding(.horizontal)
}.onTapGesture {
self.endEditing()
}
// Gets a new Image
Button {
self.isShowPhotoLibrary = true
addedImages.append(image)
} label: {
Text("Add Image")
.foregroundColor(Color.yellow)
}.sheet(isPresented: $isShowPhotoLibrary) {
ImagePicker(sourceType: .photoLibrary, selectedImage: self.$image)
}
Spacer()
// Saves Image
Button {
// takes a screenshot and crops it
if let image = memeImageView.takeScreenshot(origin: CGPoint(x: 0, y: UIApplication.shared.windows[0].safeAreaInsets.top + navBarHeight + 1), size: CGSize(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height / 2.5)) {
UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
presentationMode.wrappedValue.dismiss() // dismisses the view
}
}
label: {
Text("Save image")
.foregroundColor(Color.yellow)
}.frame( width: 150, height: 50)
.overlay(
RoundedRectangle(cornerRadius: 25)
.stroke(Color.red, lineWidth: 3)
)
.navigationBarTitle(meme.name ?? "Meme", displayMode: .inline)
.background(NavBarAccessor { navBar in
self.navBarHeight = navBar.bounds.height
})
}
For Reproducing(as close to how mine actual project is setup):
Content View
import SwiftUI
struct ContentView: View {
var body: some View {
DragImageView()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
DragImageView:
import SwiftUI
struct DragImageView: View {
//===================
// MARK: Properties
//===================
#State private var addedImages = [UIImage?]()
#State private var isShowPhotoLibrary = false
#State private var image = UIImage()
var body: some View {
VStack(spacing: 12) {
imageView
}
// Gets a new Image
Button {
self.isShowPhotoLibrary = true
addedImages.append(image)
} label: {
Text("Add Image")
.foregroundColor(Color.yellow)
}.sheet(isPresented: $isShowPhotoLibrary) {
ImagePicker(sourceType: .photoLibrary, selectedImage: self.$image)
}
Spacer()
}
var imageView: some View {
ZStack {
DraggableImage(image: image)
}
//.clipped()
}
// This will dismiss the keyboard
private func endEditing() {
UIApplication.shared.endEditing()
}
}
// Allows fot the keyboard to be dismissed
extension UIApplication {
func endEditing() {
sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}
}
DraggableImage:
import SwiftUI
struct DraggableImage: View {
// Drag Gesture
#State private var currentPosition: CGSize = .zero
#State private var newPosition: CGSize = .zero
// Roation Gesture
#State private var rotation: Double = 0.0
// Scale Gesture
#State private var scale: CGFloat = 1.0
// The different states the frame of the label could be
private enum WidthState: Int {
case full, half, third, fourth
}
#State private var widthState: WidthState = .full
#State private var currentWidth: CGFloat = 100 //UIScreen.main.bounds.width
var image: UIImage
var body: some View {
VStack {
Image(uiImage: self.image)
.resizable()
.scaledToFill()
.frame(width: self.currentWidth)
.lineLimit(nil)
}
.scaleEffect(scale) // Scale based on our state
.rotationEffect(Angle.degrees(rotation)) // Rotate based on the state
.offset(x: self.currentPosition.width, // Offset from the drag difference from it's current position
y: self.currentPosition.height)
.gesture(
// Two finger rotation
RotationGesture()
.onChanged { angle in
self.rotation = angle.degrees // keep track of the angle for state
}
// We want it to work with the scale effect, so they could either scale and rotate at the same time
.simultaneously(with:
MagnificationGesture()
.onChanged { scale in
self.scale = scale.magnitude // Keep track of the scale
})
// Update the drags new position to be wherever it was last dragged to. (we don't want to reset it back to it's current position)
.simultaneously(with: DragGesture()
.onChanged { value in
self.currentPosition = CGSize(width: value.translation.width + self.newPosition.width,
height: value.translation.height + self.newPosition.height)
}
.onEnded { value in
self.newPosition = self.currentPosition
})
)
/// Have to do double tap first or else it will never work with the single tap
.onTapGesture(count: 2) {
// Update our widthState to be the next on in the 'enum', or start back at .full
self.widthState = WidthState(rawValue: self.widthState.rawValue + 1) ?? .full
self.currentWidth = UIScreen.main.bounds.width / CGFloat(self.widthState.rawValue)
}
}
}
ImagePicker:
import UIKit
import SwiftUI
struct ImagePicker: UIViewControllerRepresentable {
var sourceType: UIImagePickerController.SourceType = .photoLibrary
#Binding var selectedImage: UIImage
#Environment(\.presentationMode) private var presentationMode
func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePicker>) -> UIImagePickerController {
let imagePicker = UIImagePickerController()
imagePicker.allowsEditing = false
imagePicker.sourceType = sourceType
imagePicker.delegate = context.coordinator
return imagePicker
}
func updateUIViewController(_ uiViewController: UIImagePickerController, context: UIViewControllerRepresentableContext<ImagePicker>) {
}
func makeCoordinator() -> Coordinator {
Coordinator(self)
}
final class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
var parent: ImagePicker
init(_ parent: ImagePicker) {
self.parent = parent
}
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
if let image = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
parent.selectedImage = image
}
parent.presentationMode.wrappedValue.dismiss()
}
}
}
I should add this is to make memes, so the user picked images go on top the view that I save to the camera roll.
I'm not 100% clear on what the exact desired output should be, but this should get you started (explained below):
struct DragImageView: View {
//===================
// MARK: Properties
//===================
#State private var addedImages = [UIImage]()
#State private var isShowPhotoLibrary = false
var bindingForImage: Binding<UIImage> {
Binding<UIImage> { () -> UIImage in
return addedImages.last ?? UIImage()
} set: { (newImage) in
addedImages.append(newImage)
print("Images: \(addedImages.count)")
}
}
var body: some View {
VStack(spacing: 12) {
imageView
}
// Gets a new Image
Button {
self.isShowPhotoLibrary = true
} label: {
Text("Add Image")
.foregroundColor(Color.yellow)
}.sheet(isPresented: $isShowPhotoLibrary) {
ImagePicker(sourceType: .photoLibrary, selectedImage: bindingForImage)
}
Spacer()
}
var imageView: some View {
VStack {
ForEach(addedImages, id: \.self) { image in
DraggableImage(image: image)
}
}
}
// This will dismiss the keyboard
private func endEditing() {
UIApplication.shared.endEditing()
}
}
addedImages is now an array of non-optional UIImages
There's a custom Binding for the image picker. When it receives a new image, it appends it to the end of the array.
In var imageView, there's a VStack instead of a ZStack so that multiple images can get displayed (instead of stacked on top of each other) and a ForEach loop to iterate through the images.

ViewState does not changing with MapView

I'm currently trying to display an Mapview inside a sheet. The weird thing is, that the MapView is shown in the canvas. However in the Simulator it isn't updating the view. Can someone explain to me, what I'm doing wrong?
Here is my MapViewModel
class MapViewModel: ObservableObject {
enum ViewState {
case failed
case loading
case value([Checkpoint])
}
#Published var viewState: ViewState = .loading
#Published var region = MKCoordinateRegion()
func initMap(name: String, address: String) {
self.viewState = .loading
getLocation(from: address) { coordinate in
if let coordinate = coordinate {
let checkpoint = Checkpoint(title: name, coordinate: coordinate)
self.region = MKCoordinateRegion(center: coordinate, span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1))
var checkpoints: [Checkpoint] = []
checkpoints.append(checkpoint)
DispatchQueue.main.async {
withAnimation(.easeInOut) {
self.viewState = .value(checkpoints)
print("Done")
}
}
} else {
DispatchQueue.main.async {
self.viewState = .failed
}
}
}
}
func getLocation(from address: String, completion: #escaping (_ location: CLLocationCoordinate2D?)-> Void) {
let geocoder = CLGeocoder()
geocoder.geocodeAddressString(address) { (placemarks, error) in
guard let placemarks = placemarks,
let location = placemarks.first?.location?.coordinate else {
completion(nil)
return
}
completion(location)
}
}
}
And here is my View
struct MapView: View {
#ObservedObject var mapVM = MapViewModel()
var name: String
var address: String
var body: some View {
switch mapVM.viewState {
case .loading:
VStack(alignment: .center) {
ProgressView()
}
.onAppear() {
mapVM.initMap(name: name, address: address)
}
case .value(let checkpoints):
VStack {
Map(coordinateRegion: $mapVM.region, annotationItems: checkpoints) { item in
MapAnnotation(coordinate: item.coordinate) {
VStack(spacing: 0) {
Image(systemName: "mappin.circle.fill")
.renderingMode(.original)
.font(.title)
Text(name)
.font(.caption)
.shadow(color: Color.systemBackground.opacity(0.5), radius: 1)
.frame(minWidth: 0, maxWidth: 150)
}
}
}
}
case .failed:
Text("Failed")
}
}
}
And here is how I implemented the MapView in my MainView
VStack(alignment: .center) {
MapView(name: tickerDetails.name, address: tickerDetails.hqAddress)
.frame(width: UIScreen.main.bounds.width - 30, height: 220)
.border(Color.systemGray4, cornerRadius: 10)
.padding(.leading)
}
Last but not least, here are two Screenshots how its displayed in the canvas and in the simulator:
The data for the preview is coming from an local stored JSON-File. The data for the simulator is fetched from the internet. However the data is loaded correctly, because the print statement is executed in MapViewModel (and the coordinates are also correct). It's just simply not updating the view with the data.
Edit
I implemented the MapView in a "normal" view and it works fine there. It seems to be, that the presented sheet can't work with view states...

How to save a finished image from a SwiftUI 2.0 scroll view after it's been resized and repositioned by the user

Using Swift 2.0 I am hoping to find a way to capture the resized image after the user has selected how they want to see it in the frame from the scroll view (ZoomScrollView).
I know there are complex examples out there from Swift but was hoping to find a simpler way to capture this in Swift 2.0. In all my searching I've heard references to using ZStack and some masks or overlays but can't find a simple good example.
I am hoping someone can update my example with the ZStack, masks, etc and how to extract the image for saving or provide a better example.
import SwiftUI
struct ContentView: View {
#Environment(\.presentationMode) var presentationMode
#State var isAccepted: Bool = false
#State var isShowingImagePicker = false
#State var isShowingActionPicker = false
#State var sourceType:UIImagePickerController.SourceType = .camera
#State var image:UIImage?
var body: some View {
HStack {
Color(UIColor.systemYellow).frame(width: 8)
VStack(alignment: .leading) {
HStack {
Spacer()
VStack {
if image != nil {
ZoomScrollView {
Image(uiImage: image!)
.resizable()
.scaledToFit()
}
.frame(width: 300, height: 300, alignment: .center)
.clipShape(Circle())
} else {
Image(systemName: "person.crop.circle")
.resizable()
.font(.system(size: 32, weight: .light))
.frame(width: 300, height: 300, alignment: .center)
.cornerRadius(180)
.foregroundColor(Color(.systemGray))
.clipShape(Circle())
}
}
Spacer()
}
Spacer()
HStack {
Button(action: {
self.isShowingActionPicker = true
}, label: {
Text("Select Image")
.foregroundColor(.blue)
})
.frame(width: 130)
.actionSheet(isPresented: $isShowingActionPicker, content: {
ActionSheet(title: Text("Select a profile avatar picture"), message: nil, buttons: [
.default(Text("Camera"), action: {
self.isShowingImagePicker = true
self.sourceType = .camera
}),
.default(Text("Photo Library"), action: {
self.isShowingImagePicker = true
self.sourceType = .photoLibrary
}),
.cancel()
])
})
.sheet(isPresented: $isShowingImagePicker) {
imagePicker(image: $image, isShowingImagePicker: $isShowingImagePicker ,sourceType: self.sourceType)
}
Spacer()
// Save button
Button(action: {
// Save Image here... print for now just see if file dimensions are the right size
print("saved: ", image!)
self.presentationMode.wrappedValue.dismiss()
}
) {
HStack {
Text("Save").foregroundColor(isAccepted ? .gray : .blue)
}
}
.frame(width: 102)
.padding(.top)
.padding(.bottom)
//.buttonStyle(RoundedCorners())
.disabled(isAccepted) // Disable if if already isAccepted is true
}
}
Spacer()
Color(UIColor.systemYellow).frame(width: 8)
}
.padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top)
.background(Color(UIColor.systemYellow))
}
}
struct ZoomScrollView<Content: View>: UIViewRepresentable {
private var content: Content
init(#ViewBuilder content: () -> Content) {
self.content = content()
}
func makeUIView(context: Context) -> UIScrollView {
// set up the UIScrollView
let scrollView = UIScrollView()
scrollView.delegate = context.coordinator // for viewForZooming(in:)
scrollView.maximumZoomScale = 20
scrollView.minimumZoomScale = 1
scrollView.bouncesZoom = true
// create a UIHostingController to hold our SwiftUI content
let hostedView = context.coordinator.hostingController.view!
hostedView.translatesAutoresizingMaskIntoConstraints = true
hostedView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
hostedView.frame = scrollView.bounds
scrollView.addSubview(hostedView)
return scrollView
}
func makeCoordinator() -> Coordinator {
return Coordinator(hostingController: UIHostingController(rootView: self.content))
}
func updateUIView(_ uiView: UIScrollView, context: Context) {
// update the hosting controller's SwiftUI content
context.coordinator.hostingController.rootView = self.content
assert(context.coordinator.hostingController.view.superview == uiView)
}
// MARK: - Coordinator
class Coordinator: NSObject, UIScrollViewDelegate {
var hostingController: UIHostingController<Content>
init(hostingController: UIHostingController<Content>) {
self.hostingController = hostingController
}
func viewForZooming(in scrollView: UIScrollView) -> UIView? {
return hostingController.view
}
}
}
struct imagePicker:UIViewControllerRepresentable {
#Binding var image: UIImage?
#Binding var isShowingImagePicker: Bool
typealias UIViewControllerType = UIImagePickerController
typealias Coordinator = imagePickerCoordinator
var sourceType:UIImagePickerController.SourceType = .camera
func makeUIViewController(context: Context) -> UIImagePickerController {
let picker = UIImagePickerController()
picker.sourceType = sourceType
picker.delegate = context.coordinator
return picker
}
func makeCoordinator() -> imagePickerCoordinator {
return imagePickerCoordinator(image: $image, isShowingImagePicker: $isShowingImagePicker)
}
func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}
}
class imagePickerCoordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
#Binding var image: UIImage?
#Binding var isShowingImagePicker: Bool
init(image:Binding<UIImage?>, isShowingImagePicker: Binding<Bool>) {
_image = image
_isShowingImagePicker = isShowingImagePicker
}
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
if let uiimage = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
image = uiimage
isShowingImagePicker = false
}
}
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
isShowingImagePicker = false
}
}
Just want to return the image that's zoomed in the circle. The image can be square (re: the 300x300 frame), that's fine just need the zoomed image not whole screen or the original image.
the following changes were successful based the comments:
Add the following State variables:
#State private var rect: CGRect = .zero
#State private var uiimage: UIImage? = nil // resized image
Added "RectGetter" to the picked image frame after image selected selected
if image != nil {
ZoomScrollView {
Image(uiImage: image!)
.resizable()
.scaledToFit()
}
.frame(width: 300, height: 300, alignment: .center)
.clipShape(Circle())
.background(RectGetter(rect: $rect))
Here is the struct and extension I added
extension UIView {
func asImage(rect: CGRect) -> UIImage {
let renderer = UIGraphicsImageRenderer(bounds: rect)
return renderer.image { rendererContext in
layer.render(in: rendererContext.cgContext)
}
}
}
struct RectGetter: View {
#Binding var rect: CGRect
var body: some View {
GeometryReader { proxy in
self.createView(proxy: proxy)
}
}
func createView(proxy: GeometryProxy) -> some View {
DispatchQueue.main.async {
self.rect = proxy.frame(in: .global)
}
return Rectangle().fill(Color.clear)
}
}
Last I set the image to save
self.uiimage = UIApplication.shared.windows[0].rootViewController?.view.asImage(rect: self.rect)
This assumes the root controller. However, in my production app I had to point to self
self.uiimage = UIApplication.shared.windows[0].self.asImage(rect: self.rect)
Then I was able to save that image.
A couple of notes. The image returned is the rectangle which is fine. However due to the way the image is captured the rest of the rectangle outside the cropShape of a circle has the background color. In this case yellow at the for corners outside the circle. There is probably a way to have some sort of ZOrder mask that overlays the image for display when you are resizing the image but then this accesses the right layer and saves the full rectangle picture. If anyone wants to suggest further that would be a cleaner solution but this works assuming you will always display the picture in the same crop shape it was saved in.

How to fill a list using Completion Handlers [SWIFT UI]

I want to fill a list using a completion handler, the problem is that it's loading nil in the first execution and marks errors when I try to consume my View where I have my list that it's filled by completion handler... Any suggestions to fix this?
this is how I try to fill my list
let invitationService: InvitationService = InvitationService()
#State private var invitationsList : [Appointment]?
init() {
let defaults = UserDefaults.standard
let userId = defaults.integer(forKey: "userId")
var appointmentList : [Appointment]?
invitationService.getInvitations(id: userId, completionHandler: { (appointment) in
if appointment != nil{
appointmentList = appointment
}
})
_invitationsList = State<[Appointment]?>.init(initialValue: (appointmentList))
}
as you can see I would need to fill my list until InvitationService Request ends but If I try to put it inside the code I got a
Escaping closure captures mutating 'self' parameter
error
I mean
invitationService.getInvitations(id: userId, completionHandler: { (appointment) in
if appointment != nil{
appointmentList = appointment
self._invitationsList = State<[Appointment]?>.init(initialValue: (appointmentList))
}
})
My VIEW
var body: some View {
NavigationView{
ZStack{
colors["LightGray"]?.edgesIgnoringSafeArea(.all)
Text("Hey").onAppear(){
let defaults = UserDefaults.standard
let userId = defaults.integer(forKey: "userId")
self.invitationService.getInvitations(id: userId) { (appointment) in
self.invitationsList = appointment
}
}
List {
ForEach(invitationsList!, id: \.self){invitation in
NavigationLink(destination: InvitationDetailView(invitation: invitation)){
HStack{
VStack(alignment: .center){
Text(invitation.startDate.prefix(2))
.font(.largeTitle)
Text(invitation.startDate[2..<6]).font(.subheadline)
}.padding()
Spacer().frame(width:UIScreen.main.bounds.width/15, alignment: .leading)
ImageView(withURL: invitation.imageProfile,widthValue: 80, heightValue: 80)
.aspectRatio(contentMode: .fit)
.clipShape(Circle())
Spacer()
VStack(alignment: .leading){
Text(invitation.titleVisit)
.font(.headline)
.frame(width: UIScreen.main.bounds.width/3, alignment: .leading)
Text(invitation.typeVisit)
.font(.footnote)
Text(invitation.startDate.suffix(9))
.font(.caption)
}.padding()
}
.background(self.colors["White"])
.cornerRadius(25)
.foregroundColor(self.colors["Black"])
.shadow(radius: 2, x: 0, y: 0)
}
}.onDelete(perform: delete)
}
}.hideNavigationBar(text: "back".localized)
}
}
I'm trying to execute and when I do that invitationsList is nil
I recommend do not put such things into View.init, because SwiftUI view is struct, value, and can be re-created several times during layout/rendering. The better approach is to do this after view appeared (or, what is better, outside view hierarchy at all).
Anyway being in view here is possible approach
...
let invitationService: InvitationService = InvitationService()
#State private var invitationsList : [Appointment]? = nil
// nothing for init in this case
var body: some View {
Text("Any subview here")
.onAppear {
let defaults = UserDefaults.standard
let userId = defaults.integer(forKey: "userId")
self.invitationService.getInvitations(id: userId) { (appointment) in
self.invitationsList = appointment
}
}
}