Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed Extra Padding on iOS buttons required when image on top or bottom #26018

Merged
merged 11 commits into from
Jan 5, 2025
39 changes: 20 additions & 19 deletions src/Controls/src/Core/Button/Button.iOS.cs
Original file line number Diff line number Diff line change
Expand Up @@ -142,19 +142,6 @@ Size ICrossPlatformLayout.CrossPlatformMeasure(double widthConstraint, double he
}
}

// if the image is on top or bottom, let's make sure the title is not cut off by ensuring we have enough padding for the image and title.
if (image is not null
&& (layout.Position == ButtonContentLayout.ImagePosition.Top || layout.Position == ButtonContentLayout.ImagePosition.Bottom))
{
var maxTitleRect = ComputeTitleRect(platformButton, button, image, double.PositiveInfinity, double.PositiveInfinity, borderWidth, padding, true);

var smallerWidth = (nfloat)Math.Min(maxTitleRect.Width, platformButton.CurrentImage?.Size.Width ?? 0);
if (padding.HorizontalThickness < smallerWidth)
{
buttonContentWidth += (nfloat)(smallerWidth - padding.HorizontalThickness);
}
}

var returnSize = new Size(Math.Min(buttonContentWidth, widthConstraint),
Math.Min(buttonContentHeight, heightConstraint));

Expand Down Expand Up @@ -213,27 +200,40 @@ void LayoutButton(UIButton platformButton, Button button, Rect size)
var sharedSpacing = spacing / 2;

// These are just used to shift the image and title to center
// Which makes the later math easier to follow
imageInsets.Left += titleWidth / 2;
imageInsets.Right -= titleWidth / 2;
titleInsets.Left -= imageWidth / 2;
titleInsets.Right += imageWidth / 2;
// Which makes the later math easier to follow
if (layout.Position == ButtonContentLayout.ImagePosition.Left || layout.Position == ButtonContentLayout.ImagePosition.Right)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change will impact to several tests:
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes in the screenshot tests should be expected if this is working correctly so that is not necessarily a bad thing :)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tj-devel709 , @jsuarezruiz I have attached the button failure images also. Could you please check it?

{
imageInsets.Left += titleWidth / 2;
imageInsets.Right -= titleWidth / 2;
titleInsets.Left -= imageWidth / 2;
titleInsets.Right += imageWidth / 2;
}

if (layout.Position == ButtonContentLayout.ImagePosition.Top)
{
imageInsets.Top -= (titleHeight / 2) + sharedSpacing;
imageInsets.Bottom += (titleHeight / 2) + sharedSpacing;
imageInsets.Left += (float)(((size.Width - imageWidth) / 2) - borderWidth);
imageInsets.Right += (float)(((size.Width - imageWidth) / 2) - borderWidth);

titleInsets.Top += (imageHeight / 2) + sharedSpacing;
titleInsets.Bottom -= (imageHeight / 2) + sharedSpacing;
titleInsets.Left -= (nfloat)(imageWidth - padding.Left);
titleInsets.Right += (nfloat)padding.Right;
}
else if (layout.Position == ButtonContentLayout.ImagePosition.Bottom)
{
imageInsets.Top += (titleHeight / 2) + sharedSpacing;
imageInsets.Bottom -= (titleHeight / 2) + sharedSpacing;
imageInsets.Left += (float)(((size.Width - imageWidth) / 2) - borderWidth);
imageInsets.Right += (float)(((size.Width - imageWidth) / 2) - borderWidth);

titleInsets.Top -= (imageHeight / 2) + sharedSpacing;
titleInsets.Bottom += (imageHeight / 2) + sharedSpacing;

titleInsets.Left -= (nfloat)(imageWidth - padding.Left);
titleInsets.Right += (nfloat)padding.Right;

}
else if (layout.Position == ButtonContentLayout.ImagePosition.Left)
{
Expand Down Expand Up @@ -286,7 +286,8 @@ CGRect ComputeTitleRect(UIButton platformButton, Button button, UIImage image, d
var titleWidthConstraint = widthConstraint - ((nfloat)borderWidth * 2);
var titleHeightConstraint = heightConstraint - ((nfloat)borderWidth * 2);

if (image is not null && !string.IsNullOrEmpty(platformButton.CurrentTitle) && titleWidthConstraint != double.PositiveInfinity)
if (image is not null && !string.IsNullOrEmpty(platformButton.CurrentTitle) && titleWidthConstraint != double.PositiveInfinity
&& (button.ContentLayout.Position == ButtonContentLayout.ImagePosition.Left || button.ContentLayout.Position == ButtonContentLayout.ImagePosition.Right))
{
// In non-UIButtonConfiguration setups, the title will always be truncated by the image's width
// even when the image is on top or bottom.
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 64 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue25489.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Maui.Controls.Sample.Issues.Issue25489"
Title="Issue25489">

<VerticalStackLayout>
<HorizontalStackLayout>
<Button Text="Hello, longer world!"
ImageSource="dotnet_bot_resized2.png"
Background="lightgray"
ContentLayout="Top,0"/>
</HorizontalStackLayout>

<HorizontalStackLayout>
<Button Text="Hello, longer world!"
ImageSource="dotnet_bot_resized2.png"
Background="lightgreen"
ContentLayout="Bottom,0"/>
</HorizontalStackLayout>

<HorizontalStackLayout>
<Button Text="Hello, longer world!"
ImageSource="dotnet_bot_resized2.png"
Background="lightblue"
ContentLayout="Left,0"/>
</HorizontalStackLayout>

<HorizontalStackLayout>
<Button Text="Hello, longer world!"
ImageSource="dotnet_bot_resized2.png"
Background="purple"
ContentLayout="Right,0"/>
</HorizontalStackLayout>

<Button Text="Hello, longer world!"
ImageSource="dotnet_bot_resized2.png"
Background="lightgray"
ContentLayout="Bottom,0"
HorizontalOptions="Center"/>

<Button Text="Hello, longer world!"
ImageSource="dotnet_bot_resized2.png"
Padding="0"
Background="lightgreen"
ContentLayout="Bottom,0"
HorizontalOptions="Center"/>

<Button Text="Hello, longer world!"
ImageSource="dotnet_bot_resized2.png"
Padding="5"
Background="lightblue"
ContentLayout="Bottom,0"
HorizontalOptions="Center"/>

<Button Text="Hello, longer world!"
ImageSource="dotnet_bot_resized2.png"
Padding="50,10"
Background="purple"
ContentLayout="Bottom,0"
HorizontalOptions="Center"/>

</VerticalStackLayout>
</ContentPage>
10 changes: 10 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue25489.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
namespace Maui.Controls.Sample.Issues;

[Issue(IssueTracker.Github, 25489, "Remove extra padding from the iOS button", PlatformAffected.All)]
public partial class Issue25489 : ContentPage
{
public Issue25489()
{
InitializeComponent();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues
{
public class Issue25489 : _IssuesUITest
{
public Issue25489(TestDevice testDevice) : base(testDevice)
{
}

public override string Issue => "Remove extra padding from the iOS button";

[Test]
[Category(UITestCategories.Button)]
public void RemoveExtraPaddingFromButton()
{
VerifyScreenshot();
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading