SALE: Save 50% on all my books and bundles >>

Image View becoming stretched along x-axis

Forums > SwiftUI

In the app I'm working on the user can select an image from their library and add it to an event. The code is written entirely in SwiftUI but I am using a UIViewControllerRepresentable for the ImagePicker. That piece of code was directy from the 100DaysOfSwiftUI "Instafilter" project.

If the user has already selected an image its uuid is stored in CoreData and returned from this method as a small thumbnail view. And now that I write this I see I need to fix that force-unwrap. I'll do it!

Thumbnail

loadUserImage(uuid: savedRunEvent.imageID!)
                                .resizable()
                                .scaledToFill()
                                .frame(width: 90, height: 90, alignment: .center)
                                .cornerRadius(20)
                                .shadow(radius: 2)
                                .onTapGesture { self.showImagePopup = true }

If the user taps the thumbnail image they are presented with a popup view with a large-scale version of the image. That image is displayed inside a .frame()

VStack {
            // The popup
            if willShowImagePopUp {
                ZStack {
                    Color.secondary
                        .opacity(0.5)
                        .edgesIgnoringSafeArea(.all)
                    VStack(spacing: 15) {
                        Spacer()
                        image
                            .resizable()
                            .scaledToFit()
                            .cornerRadius(20)
                            .shadow(radius: 2)
                        Button("Change Photo") {
                            self.showImagePicker = true
                        }
                        .font(.headline)
                        .padding(.bottom)
                        .frame(maxWidth: .infinity)
                    }
                    .shadow(radius: 10)
                    .background(Color.white)
                    .cornerRadius(20)
                    .padding(.horizontal, 25)
                    .frame(height: 500)

                    .offset(dragOffset)
                    .rotationEffect(Angle(degrees: Double(dragOffset.width / 2)), anchor: .bottom)
                    .gesture(DragGesture(minimumDistance: 25).updating($dragOffset, body: { (value, popupOffset, transaction) in
                        popupOffset = value.translation
                    }).onEnded({ value in
                        self.willShowImagePopUp = false
                    }))
                }.animation(.default)

            }
            Spacer()
        }

Full

Most pictures display properly but some become stretched along the x-axis. I cannot find a rhyme or reason behind which images display properly and which do not. One theory I have is lower quality images become stretched, but I am not certain. Any insights are appreciated.

Here is an example of a distorted image.

Distorted

1      

Use GeometryReader (https://developer.apple.com/documentation/swiftui/geometryreader) maybe?

The original images are not the same size, are they?

   

I have tried using GeometryReader with the same results, but perhaps I'll tinker with it some more. I cannot find a relationship between the size of an image that works and one that doesn't work. For example an image that doesn't work was taken with the back camera of my iPhone 8+, is 3032 x 4032 and is 1.1mb. While an image that does work is exactly the same dimensions, taken with the back camera of my iPhone 8+ but is 1.7mb. This leads me to belive it is simply a SwiftUI bug, but I just don't know.

   

Best place to start troubleshooting is to give the image its own frame modifier.

2      

Any luck with this Dan?

   

No luck. The more I play with it the more I think it's a bug. I litterally have two photos in my library taken a half second apart of the same subject. One displays correctly, the other gets squished and stretched. Perhaps someone will run across a similar issue and find a solution, but for now I'm moving on to other areas of the app. Thank you for checking and I'll keep an eye on this of course in case anyone has more suggestions.

   

Update: After the Xcode 11.4 update it appears most photos now display correctly. Photos which definitely resized improperly before, now have no issues. However I can still occasionally select a photo from the library which resizes improperly. It might have something to do with whether or not the photo was offloaded from the phone, which then needs to be redownloaded from iCloud. But I can't be sure.

   

Hacking with Swift is sponsored by RevenueCat

SPONSORED Building in-app subscriptions are hard. RevenueCat makes it simple. With their open source SDKs, you can painlessly implement subscriptions for your app in hours, not months.

Explore the docs to learn more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

Snapthread is a casual video editor and slideshow maker that makes discovering, compiling and sharing your favorite memories effortless.

 
Unknown user

Not logged in

Log in