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

[iOS] Fix for CollectionView with horizontal grid layout has extra space on right end #25825

Merged
merged 4 commits into from
Dec 5, 2024
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -204,13 +204,13 @@ int GetLayoutSpanCount()
internal UIEdgeInsets GetInsetForSection(ItemsViewLayout itemsViewLayout,
UICollectionView collectionView, nint section)
{
var uIEdgeInsets = itemsViewLayout.GetInsetForSection(collectionView, itemsViewLayout, section);

if (!ItemsView.IsGrouped)
{
return uIEdgeInsets;
return UIEdgeInsets.Zero;
}

var uIEdgeInsets = itemsViewLayout.GetInsetForSection(collectionView, itemsViewLayout, section);

// If we're grouping, we'll need to inset the sections to maintain the spacing between the
// groups and their group headers/footers

Expand All @@ -228,8 +228,11 @@ internal UIEdgeInsets GetInsetForSection(ItemsViewLayout itemsViewLayout,
top += spacing;
}

// If we're at the last section, we don't need to add the right inset
var resolvedRightInset = section >= (collectionView.NumberOfSections() - 1) ? 0 : uIEdgeInsets.Right;

return new UIEdgeInsets(top, left,
uIEdgeInsets.Bottom, uIEdgeInsets.Right);
uIEdgeInsets.Bottom, resolvedRightInset);
}

// These measurement methods are only necessary for iOS 10 and lower
Expand Down
4 changes: 2 additions & 2 deletions src/Controls/src/Core/Handlers/Items/iOS/ItemsViewLayout.cs
Original file line number Diff line number Diff line change
Expand Up @@ -137,10 +137,10 @@ public virtual UIEdgeInsets GetInsetForSection(UICollectionView collectionView,
{
if (ScrollDirection == UICollectionViewScrollDirection.Horizontal)
{
return new UIEdgeInsets(0, 0, 0, new nfloat(gridItemsLayout.HorizontalItemSpacing * collectionView.NumberOfItemsInSection(section)));
return new UIEdgeInsets(0, 0, 0, new nfloat(gridItemsLayout.HorizontalItemSpacing));
}

return new UIEdgeInsets(0, 0, new nfloat(gridItemsLayout.VerticalItemSpacing * collectionView.NumberOfItemsInSection(section)), 0);
return new UIEdgeInsets(0, 0, new nfloat(gridItemsLayout.VerticalItemSpacing), 0);
}

return UIEdgeInsets.Zero;
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue25433.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<?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.Issue25433"
xmlns:ns="clr-namespace:Maui.Controls.Sample.Issues">
<Grid RowDefinitions="*">
<CollectionView Grid.Row="0"
x:Name="collectionView"
AutomationId="collectionView"
Background="Red"
HorizontalOptions="Center">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Horizontal"
HorizontalItemSpacing="10"/>
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<Label BackgroundColor="Blue"
Text="Item"/>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</ContentPage>
25 changes: 25 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue25433.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
namespace Maui.Controls.Sample.Issues;

[Issue(IssueTracker.Github, 25433, "Collection view with horizontal grid layout has extra space on right end", PlatformAffected.iOS)]
public partial class Issue25433 : ContentPage
{
public IList<Issue25433TestItem> Items { get; set; }

public Issue25433()
{
InitializeComponent();
BindingContext = this;
Items =
[
new Issue25433TestItem() { Name = "Item 1" },
new Issue25433TestItem() { Name = "Item 2" },
new Issue25433TestItem() { Name = "Item 3" },
];
collectionView.ItemsSource = Items;
}

public class Issue25433TestItem
{
public string Name { get; set; }
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
#if !MACCATALYST || !WINDOWS
Copy link
Contributor

Choose a reason for hiding this comment

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

VerifyScreenshot is not implemented on Catalyst yet. Should not be necessary to avoid in that platform.
Why avoid it on Windows?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jsuarezruiz, It seems that item spacing on the Windows platform is still not functioning correctly, so I am skipping the Windows platform for now. For your reference, I have attached the related issue report #11320. How can we proceed with this? Please share your thoughts.

Copy link
Contributor

Choose a reason for hiding this comment

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

Could you include a comment in code with a reference to the issue #11320?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jsuarezruiz, I have added a comment. Could you please check and provide your concerns if any?

using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues
{
public class Issue25433 : _IssuesUITest
{
public override string Issue => "Collection view with horizontal grid layout has extra space on right end";

public Issue25433(TestDevice device)
: base(device)
{ }

[Test]
[Category(UITestCategories.CollectionView)]
public void CollectionViewHorizontalItemSpacing()
{
App.WaitForElement("collectionView");

VerifyScreenshot();
}
}
}
#endif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading