Skip to content

Commit 9eae09c

Browse files
kubafloPureWeen
kubaflo
authored and
PureWeen
committed
[iOS] ScrollView content offset RTL - fix (#29469)
* [iOS] ScrollView content offset RTL fix * Added a UITest
1 parent d02a592 commit 9eae09c

File tree

4 files changed

+161
-0
lines changed

4 files changed

+161
-0
lines changed

‎src/Controls/tests/TestCases.HostApp/Issues/Issue29458.xaml‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:Maui.Controls.Sample.Issues"
5+
x:Class="Maui.Controls.Sample.Issues.Issue29458">
6+
<VerticalStackLayout>
7+
8+
<ScrollView
9+
AutomationId="RTLScrollView"
10+
x:Name="RTLScrollView"
11+
Orientation="Horizontal"
12+
FlowDirection="RightToLeft">
13+
<HorizontalStackLayout>
14+
15+
<Border BackgroundColor="Red"
16+
HeightRequest="48"
17+
WidthRequest="200">
18+
<Label Text="Tab1"
19+
HorizontalOptions="Center"
20+
VerticalOptions="Center"/>
21+
</Border>
22+
23+
<Border BackgroundColor="Blue"
24+
HeightRequest="48"
25+
WidthRequest="200">
26+
<Label Text="Tab2"
27+
HorizontalOptions="Center"
28+
VerticalOptions="Center"/>
29+
</Border>
30+
31+
<Border BackgroundColor="Red"
32+
HeightRequest="48"
33+
WidthRequest="200">
34+
<Label Text="Tab3"
35+
HorizontalOptions="Center"
36+
VerticalOptions="Center"/>
37+
</Border>
38+
39+
<Border BackgroundColor="Blue"
40+
HeightRequest="48"
41+
WidthRequest="200">
42+
<Label Text="Tab4"
43+
HorizontalOptions="Center"
44+
VerticalOptions="Center"/>
45+
</Border>
46+
47+
48+
<Border BackgroundColor="Red"
49+
HeightRequest="48"
50+
WidthRequest="200">
51+
<Label Text="Tab5"
52+
AutomationId="Tab5RTL"
53+
HorizontalOptions="Center"
54+
VerticalOptions="Center"/>
55+
</Border>
56+
</HorizontalStackLayout>
57+
</ScrollView>
58+
59+
<ScrollView
60+
AutomationId="LTRScrollView"
61+
x:Name="LTRScrollView"
62+
Orientation="Horizontal"
63+
FlowDirection="LeftToRight">
64+
<HorizontalStackLayout>
65+
66+
<Border BackgroundColor="Red"
67+
HeightRequest="48"
68+
WidthRequest="200">
69+
<Label Text="Tab1"
70+
HorizontalOptions="Center"
71+
VerticalOptions="Center"/>
72+
</Border>
73+
74+
<Border BackgroundColor="Blue"
75+
HeightRequest="48"
76+
WidthRequest="200">
77+
<Label Text="Tab2"
78+
HorizontalOptions="Center"
79+
VerticalOptions="Center"/>
80+
</Border>
81+
82+
<Border BackgroundColor="Red"
83+
HeightRequest="48"
84+
WidthRequest="200">
85+
<Label Text="Tab3"
86+
HorizontalOptions="Center"
87+
VerticalOptions="Center"/>
88+
</Border>
89+
90+
<Border BackgroundColor="Blue"
91+
HeightRequest="48"
92+
WidthRequest="200">
93+
<Label Text="Tab4"
94+
HorizontalOptions="Center"
95+
VerticalOptions="Center"/>
96+
</Border>
97+
98+
<Border BackgroundColor="Red"
99+
HeightRequest="48"
100+
WidthRequest="200">
101+
<Label Text="Tab5"
102+
AutomationId="Tab5LTR"
103+
HorizontalOptions="Center"
104+
VerticalOptions="Center"/>
105+
</Border>
106+
</HorizontalStackLayout>
107+
</ScrollView>
108+
</VerticalStackLayout>
109+
</ContentPage>

‎src/Controls/tests/TestCases.HostApp/Issues/Issue29458.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace Maui.Controls.Sample.Issues;
2+
3+
[Issue(IssueTracker.Github, 29458, "ScrollView content offset shifts unexpectedly when FlowDirection is set to RightToLeft")]
4+
public partial class Issue29458 : ContentPage
5+
{
6+
public Issue29458()
7+
{
8+
InitializeComponent();
9+
}
10+
}

‎src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue29458.cs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
using NUnit.Framework;
2+
using UITest.Appium;
3+
using UITest.Core;
4+
5+
namespace Microsoft.Maui.TestCases.Tests.Issues;
6+
7+
public class Issue29458 : _IssuesUITest
8+
{
9+
public Issue29458(TestDevice testDevice) : base(testDevice)
10+
{
11+
}
12+
13+
public override string Issue => "ScrollView content offset shifts unexpectedly when FlowDirection is set to RightToLeft";
14+
15+
[Test]
16+
[Category(UITestCategories.ScrollView)]
17+
public void ScrollViewShouldWorkInRTL()
18+
{
19+
App.WaitForElement("RTLScrollView");
20+
for (int i = 0; i < 3; i++)
21+
{
22+
App.ScrollLeft("RTLScrollView");
23+
App.ScrollRight("LTRScrollView");
24+
}
25+
App.WaitForElement("Tab5RTL");
26+
App.WaitForElement("Tab5LTR");
27+
}
28+
}

‎src/Core/src/Platform/iOS/MauiScrollView.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,20 @@ public override void LayoutSubviews()
5151
var crossPlatformContentSize = crossPlatformLayout.CrossPlatformArrange(new Rect(new Point(), crossPlatformBounds));
5252
var contentSize = crossPlatformContentSize.ToCGSize();
5353

54+
// For Right-To-Left (RTL) layouts, we need to adjust the content arrangement and offset
55+
// to ensure the content is correctly aligned and scrolled. This involves a second layout
56+
// arrangement with an adjusted starting point and recalculating the content offset.
57+
if (EffectiveUserInterfaceLayoutDirection == UIUserInterfaceLayoutDirection.RightToLeft)
58+
{
59+
var horizontalOffset = contentSize.Width - crossPlatformBounds.Width;
60+
crossPlatformLayout.CrossPlatformArrange(new Rect(new Point(-horizontalOffset, 0), crossPlatformBounds));
61+
ContentOffset = new CGPoint(horizontalOffset, 0);
62+
}
63+
else
64+
{
65+
ContentOffset = CGPoint.Empty;
66+
}
67+
5468
// When the content size changes, we need to adjust the scrollable area size so that the content can fit in it.
5569
if (ContentSize != contentSize)
5670
{

0 commit comments

Comments
 (0)