[iOS] Fix for Shell custom FlyoutIcon display problem

[Tamilarasan-Paranthaman]

Issue: The flyout icon is aligned to the center instead of the left, causing the title to extend beyond the view.

Root Cause of the issue

• The custom image size is too large, causing it to render in the center and leaving extra space on the left.

Description of Change

• I resized the custom image to match the hamburger size using the UIGraphics concept and implemented caching to prevent redundant image rendering.

Reference for icon size: https://github.com/dotnet/maui/blob/main/src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs#L450

Issues Fixed

Fixes #25920

Tested the behaviour in the following platforms

• Android
• Windows
• iOS
• Mac

Screenshot

iOS

Before Issue Fix	After Issue Fix

[jsuarezruiz]

/azp run

[jsuarezruiz]

Is iOS the only one that doesn't resize?
Is this size correct under all the screen options? (@2x etc) https://developer.apple.com/design/human-interface-guidelines/toolbars

[Tamilarasan-Paranthaman]

Is iOS the only one that doesn't resize? Is this size correct under all the screen options? (@2x etc) https://developer.apple.com/design/human-interface-guidelines/toolbars

@jsuarezruiz, I have tested the icon under all device screen options, and it works properly on all devices. The size I am using for the custom icon is based on the default Hamburger icon size. Please refer to the code below for your reference

Reference for icon size:

maui/src/Controls/src/Core/Compatibility/Handlers/Shell/iOS/ShellPageRendererTracker.cs

Line 495 in c363191

var rect = new CGRect(0, 0, 23f, 23f);

[jsuarezruiz]

Windows is the only one having a different behavior, right?
Could you open a new issue and include the link in the comment.

[Tamilarasan-Paranthaman]

Windows is the only one having a different behavior, right? Could you open a new issue and include the link in the comment.

@jsuarezruiz, the new issue for the Windows platform has been logged and I have added a comment. Could you please check and provide your concerns if any?

maui/src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue25920.cs

Line 2 in c363191

// https://github.com/dotnet/maui/issues/26148

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[PureWeen]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[PureWeen]

Can you split the android change out from this PR?

I think the resizing parts of this for the iOS Icon is going to need a little bit deeper of an analysis.

Like, I'm curious if users have an icon that's 30x30, or just slightly bigger than 40x40 if we want to resize.

Playing with the sandbox here's a few sizes

I don't know if we can force an opinion here on the size of that icon for users. If this is an issue in our template we should generate an image at the size it should be

30x30

23x23

40x40

[Ahamed-Ali]

Can you split the android change out from this PR?

I think the resizing parts of this for the iOS Icon is going to need a little bit deeper of an analysis.

Like, I'm curious if users have an icon that's 30x30, or just slightly bigger than 40x40 if we want to resize.

Playing with the sandbox here's a few sizes

I don't know if we can force an opinion here on the size of that icon for users. If this is an issue in our template we should generate an image at the size it should be

30x30

23x23

40x40

Hi @PureWeen , I have created a separate PR 27502 for Android changes. Please review it and share your concerns.

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

UIImage.FromImage creates a new instance of UIImage with the specified parameters. Could modify the implementation to just transform the current one?

internal static UIImage ResizeImageSource(this UIImage sourceImage, nfloat maxWidth, nfloat maxHeight, CGSize originalImageSize, bool shouldScaleUp = false)
{
	if (sourceImage?.CGImage is null)
		return null;

	maxWidth = (nfloat)Math.Min(maxWidth, originalImageSize.Width);
	maxHeight = (nfloat)Math.Min(maxHeight, originalImageSize.Height);

	var sourceSize = sourceImage.Size;
	var maxResizeFactor = (nfloat)Math.Min(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);

	if (maxResizeFactor > 1 && !shouldScaleUp)
		return sourceImage;

	var newSize = new CGSize(sourceSize.Width * maxResizeFactor, sourceSize.Height * maxResizeFactor);

	UIGraphics.BeginImageContextWithOptions(newSize, false, 0.0f);
	sourceImage.Draw(new CGRect(0, 0, newSize.Width, newSize.Height));
	var resizedImage = UIGraphics.GetImageFromCurrentImageContext();
	UIGraphics.EndImageContext();

	return resizedImage;
}

This approach uses the image context to resize the image, should be more efficient than creating a new instance.

[Tamilarasan-Paranthaman]

@jsuarezruiz, previously, I used a similar drawing code without scaling in this PR. As per @mattleibow
suggestion, I utilized the ResizeImageSource method from Button.iOS and have now moved it to the UIImageExtensions class as discussed.

Do I need to modify the existing code as you suggested?

please check the previous discussion and share the details:
#26016 (comment)

[rmarinho]

yeah for now we can just keep this as is, but maybe create a issue to in another PR try refactor the code to what @jsuarezruiz says

[jsuarezruiz]

@PureWeen Should these changes be a Platform Specific similar to #28046? In that case, should target to the net10.0 branch?

[jsuarezruiz]

/rebase

[rmarinho]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[rmarinho]

Address some review feedback and suggestions

[rmarinho]

its adding spaces instead of tabs

[Tamilarasan-Paranthaman]

its adding spaces instead of tabs

@rmarinho, Even though I copied the file content from the base branch to my branch and there were no actual changes to push, it's showing as a difference only in the PR, even though there are no real changes locally.

[rmarinho]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[rmarinho]

I saw some issues that I don t think are related to this PR, but seems .svg doesn t work as icon source, and changing the image to avatar.png produce this.

[rmarinho]

And cover1.jpg

[rmarinho]

I saw some issues, but they also reproduce on main, the size/resize of the icon works well this this PR .