How to resize the image displayed when selecting an item in a Picker view

Question

fsdolphin OP

Created Sep ’23

Replies 4

Boosts 0

Views 1.5k

Participants 3

Is there a way to remove or resize the image from the tag in the Picker view?

 Picker("", selection: $selectedCategory) {
    ForEach(categorySM.categories, id: \.self) { category in
        HStack {
            if let inputImage = UIImage(data: category.image ?? Data()) {
                Image(uiImage: inputImage)
                    .resizable()
                    .scaledToFit()
            }
            Text(category.name ?? "")
        }
        .tag(category as CategoryItem?)
    }
}
.font(.callout)
.pickerStyle(.menu)

As you can see in images 1 and 2 below, the image in the tag from the Beverages category is huge and covers almost the entire screen, it also covers the category name (Beverages). Is there a way to remove or resize the image when displaying it on the tag? Basically to make it look like image #3.

Image Link:
https://i.stack.imgur.com/4XpjI.jpg

Answered by fsdolphin in 765385022

@Claude31 - Thank you very much for your reply. For some reason resizing the UIImage directly solves the issue.

     if let inputImage = UIImage(data: category.image ?? Data()) {
        let resizeImage = inputImage.scalePreservingAspectRatio(targetSize: CGSize(width: 25, height: 25))
        Image(uiImage: resizeImage)
        .resizable()
        .scaledToFit()
    }

Code for resizing the UIImage

     extension UIImage {
        func scalePreservingAspectRatio(targetSize: CGSize) -> UIImage {
            // Determine the scale factor that preserves aspect ratio
            let widthRatio = targetSize.width / size.width
            let heightRatio = targetSize.height / size.height
            
            let scaleFactor = min(widthRatio, heightRatio)
            
            // Compute the new image size that preserves aspect ratio
            let scaledImageSize = CGSize(
                width: size.width * scaleFactor,
                height: size.height * scaleFactor
            )
 
            // Draw and return the resized UIImage
            let renderer = UIGraphicsImageRenderer(
                size: scaledImageSize
            )
 
            let scaledImage = renderer.image { _ in
                self.draw(in: CGRect(
                    origin: .zero,
                    size: scaledImageSize
                ))
            }
            return scaledImage
        }
    }

Boost

Answer 1

Claude31 OP

Sep ’23

I could not yet make it work with .menu. Bizarrely, the selected image appears full size when selection is done. I've tried to set a frame on the picker, no avail.

I tried solution from here, to no avail: https://developer.apple.com/forums/thread/132023

So, I concluded that problem comes from .menu style.

You could try to change as described here with Menu: https://arkhyp.medium.com/swiftui-pickers-and-menu-build-a-modern-native-ios-application-90e82a4b521f

1

Answer 2

fsdolphin OP

Sep ’23

Accepted Answer

@Claude31 - Thank you very much for your reply. For some reason resizing the UIImage directly solves the issue.

     if let inputImage = UIImage(data: category.image ?? Data()) {
        let resizeImage = inputImage.scalePreservingAspectRatio(targetSize: CGSize(width: 25, height: 25))
        Image(uiImage: resizeImage)
        .resizable()
        .scaledToFit()
    }

Code for resizing the UIImage

     extension UIImage {
        func scalePreservingAspectRatio(targetSize: CGSize) -> UIImage {
            // Determine the scale factor that preserves aspect ratio
            let widthRatio = targetSize.width / size.width
            let heightRatio = targetSize.height / size.height
            
            let scaleFactor = min(widthRatio, heightRatio)
            
            // Compute the new image size that preserves aspect ratio
            let scaledImageSize = CGSize(
                width: size.width * scaleFactor,
                height: size.height * scaleFactor
            )
 
            // Draw and return the resized UIImage
            let renderer = UIGraphicsImageRenderer(
                size: scaledImageSize
            )
 
            let scaledImage = renderer.image { _ in
                self.draw(in: CGRect(
                    origin: .zero,
                    size: scaledImageSize
                ))
            }
            return scaledImage
        }
    }

1

Answer 3

Claude31 OP

Sep ’23

Thanks for feedback. When we know, that's logical. The image is now at the new size. That's equivalent to calling directly an image of the correct size.

When Picker has to display the selection, it does not apply the modifiers but uses directly the image…

I'll keep a copy of your finding. Good continuation.

1

Answer 4

MilanVarady OP

Jan ’24

For anyone looking for a macOS (App Kit) solution.

NSImage extension

 import Foundation
import AppKit
 
extension NSImage {
    func scalePreservingAspectRatio(targetSize: NSSize) -> NSImage {
        let widthRatio = targetSize.width / size.width
        let heightRatio = targetSize.height / size.height
        
        let scaleFactor = min(widthRatio, heightRatio)
        
        let scaledImageSize = NSSize(
            width: size.width * scaleFactor,
            height: size.height * scaleFactor
        )
        
        let newImage = NSImage(size: scaledImageSize)
        newImage.lockFocus()
        self.draw(in: NSRect(origin: .zero, size: scaledImageSize), from: NSRect(origin: .zero, size: self.size), operation: .copy, fraction: 1.0)
        newImage.unlockFocus()
        
        return newImage
    }
}

ResizedImage View

 import SwiftUI
 
/// Image resized to a specific size
struct ResizedImage: View {
    let resourceName: String
    let width: Int
    let height: Int
    
    init(_ resourceName: String, width: Int, height: Int) {
        self.resourceName = resourceName
        self.width = width
        self.height = height
    }
    
    var body: some View {
        if let image = NSImage(named: resourceName) {
            let imageResized = image.scalePreservingAspectRatio(targetSize: NSSize(width: 20, height: 20))
            Image(nsImage: imageResized)
        } else {
            // Default questionmark if image is not found
            Image(systemName: "questionmark.square")
        }
    }
}

0

	Picker("", selection: $selectedCategory) {
	ForEach(categorySM.categories, id: \.self) { category in
	HStack {
	if let inputImage = UIImage(data: category.image ?? Data()) {
	Image(uiImage: inputImage)
	.resizable()
	.scaledToFit()
	}
	Text(category.name ?? "")
	}
	.tag(category as CategoryItem?)
	}
	}
	.font(.callout)
	.pickerStyle(.menu)

	if let inputImage = UIImage(data: category.image ?? Data()) {
	let resizeImage = inputImage.scalePreservingAspectRatio(targetSize: CGSize(width: 25, height: 25))
	Image(uiImage: resizeImage)
	.resizable()
	.scaledToFit()
	}

	extension UIImage {
	func scalePreservingAspectRatio(targetSize: CGSize) -> UIImage {
	// Determine the scale factor that preserves aspect ratio
	let widthRatio = targetSize.width / size.width
	let heightRatio = targetSize.height / size.height

	let scaleFactor = min(widthRatio, heightRatio)

	// Compute the new image size that preserves aspect ratio
	let scaledImageSize = CGSize(
	width: size.width * scaleFactor,
	height: size.height * scaleFactor
	)

	// Draw and return the resized UIImage
	let renderer = UIGraphicsImageRenderer(
	size: scaledImageSize
	)

	let scaledImage = renderer.image { _ in
	self.draw(in: CGRect(
	origin: .zero,
	size: scaledImageSize
	))
	}
	return scaledImage
	}
	}

	import Foundation
	import AppKit

	extension NSImage {
	func scalePreservingAspectRatio(targetSize: NSSize) -> NSImage {
	let widthRatio = targetSize.width / size.width
	let heightRatio = targetSize.height / size.height

	let scaleFactor = min(widthRatio, heightRatio)

	let scaledImageSize = NSSize(
	width: size.width * scaleFactor,
	height: size.height * scaleFactor
	)

	let newImage = NSImage(size: scaledImageSize)
	newImage.lockFocus()
	self.draw(in: NSRect(origin: .zero, size: scaledImageSize), from: NSRect(origin: .zero, size: self.size), operation: .copy, fraction: 1.0)
	newImage.unlockFocus()

	return newImage
	}
	}

	import SwiftUI

	/// Image resized to a specific size
	struct ResizedImage: View {
	let resourceName: String
	let width: Int
	let height: Int

	init(_ resourceName: String, width: Int, height: Int) {
	self.resourceName = resourceName
	self.width = width
	self.height = height
	}

	var body: some View {
	if let image = NSImage(named: resourceName) {
	let imageResized = image.scalePreservingAspectRatio(targetSize: NSSize(width: 20, height: 20))
	Image(nsImage: imageResized)
	} else {
	// Default questionmark if image is not found
	Image(systemName: "questionmark.square")
	}
	}
	}