[NUI] Fix FlexLayout size calculation with Padding
authorJaehyun Cho <jae_hyun.cho@samsung.com>
Mon, 7 Feb 2022 08:16:48 +0000 (17:16 +0900)
committerdongsug-song <35130733+dongsug-song@users.noreply.github.com>
Tue, 8 Feb 2022 04:41:28 +0000 (13:41 +0900)
Previously, if FlexLayout had Padding, then child's and grand child's sizes
were calculated incorrectly.
Because in FlexLayout's OnLayout(), child's size was given with applying
Padding. But Padding was applied in FlexLayout's OnLayout() again.
As a result, child's size became smaller by Padding size than it had to be.

Now, if FlexLayout has Padding, then child's and grand child's sizes are
calculated correctly.
The Padding is not applied duplicately while child's size is calculated.

src/Tizen.NUI/src/public/Layouting/FlexLayout.cs
test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/FlexLayoutTest.cs [new file with mode: 0755]

index fec7233..3fe2c18 100755 (executable)
@@ -825,7 +825,7 @@ namespace Tizen.NUI
                     // To resolve the above issue, child layout's measured size is set with the child view's size calculated by dali-toolkit's YOGA APIs.
                     MeasureSpecification widthSpec = new MeasureSpecification(new LayoutLength(frame.Z - frame.X), MeasureSpecification.ModeType.Exactly);
                     MeasureSpecification heightSpec = new MeasureSpecification(new LayoutLength(frame.W - frame.Y), MeasureSpecification.ModeType.Exactly);
-                    MeasureChildWithMargins(childLayout, widthSpec, new LayoutLength(0), heightSpec, new LayoutLength(0));
+                    MeasureChildWithoutPadding(childLayout, widthSpec, heightSpec);
 
                     childLayout.Layout(new LayoutLength(frame.X), new LayoutLength(frame.Y), new LayoutLength(frame.Z), new LayoutLength(frame.W));
                     frame.Dispose();
diff --git a/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/FlexLayoutTest.cs b/test/Tizen.NUI.Samples/Tizen.NUI.Samples/Samples/FlexLayoutTest.cs
new file mode 100755 (executable)
index 0000000..7b89ef9
--- /dev/null
@@ -0,0 +1,202 @@
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace Tizen.NUI.Samples
+{
+    public class FlexLayoutTest : IExample
+    {
+        private Window window;
+        private ScrollableBase rootView;
+
+        public void Activate()
+        {
+            window = NUIApplication.GetDefaultWindow();
+
+            rootView = new ScrollableBase()
+            {
+                ScrollingDirection = ScrollableBase.Direction.Vertical,
+                HideScrollbar = false,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            window.Add(rootView);
+
+            var mainView = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    CellPadding = new Size2D(0, 20),
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Black,
+            };
+            rootView.Add(mainView);
+
+            var flexRowViewTitle = new TextLabel()
+            {
+                Text = "Row with MatchParent",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(flexRowViewTitle);
+
+            var flexRowView = new View()
+            {
+                Layout = new FlexLayout()
+                {
+                    Direction = FlexLayout.FlexDirection.Row,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = 400,
+                Margin = new Extents(20, 20, 20, 20),
+                Padding = new Extents(20, 20, 20, 20),
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(flexRowView);
+
+            var rowChild = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Horizontal,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Black,
+            };
+            flexRowView.Add(rowChild);
+
+            var rowGrandChild = new View()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            rowChild.Add(rowGrandChild);
+
+            var rowGrandChild2 = new View()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Green,
+            };
+            rowChild.Add(rowGrandChild2);
+
+            var rowChild2 = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Horizontal,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Black,
+            };
+            flexRowView.Add(rowChild2);
+
+            var rowGrandChild3 = new View()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Blue,
+            };
+            rowChild2.Add(rowGrandChild3);
+
+            var rowGrandChild4 = new View()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Yellow,
+            };
+            rowChild2.Add(rowGrandChild4);
+
+            var flexColViewTitle = new TextLabel()
+            {
+                Text = "Column with MatchParent",
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(flexColViewTitle);
+
+            var flexColView = new View()
+            {
+                Layout = new FlexLayout()
+                {
+                    Direction = FlexLayout.FlexDirection.Column,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = 400,
+                Margin = new Extents(20, 20, 20, 20),
+                Padding = new Extents(20, 20, 20, 20),
+                BackgroundColor = Color.White,
+            };
+            mainView.Add(flexColView);
+
+            var colChild = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Black,
+            };
+            flexColView.Add(colChild);
+
+            var colGrandChild = new View()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Red,
+            };
+            colChild.Add(colGrandChild);
+
+            var colGrandChild2 = new View()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Green,
+            };
+            colChild.Add(colGrandChild2);
+
+            var colChild2 = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                },
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Black,
+            };
+            flexColView.Add(colChild2);
+
+            var colGrandChild3 = new View()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Blue,
+            };
+            colChild2.Add(colGrandChild3);
+
+            var colGrandChild4 = new View()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+                BackgroundColor = Color.Yellow,
+            };
+            colChild2.Add(colGrandChild4);
+        }
+
+        public void Deactivate()
+        {
+            window.Remove(rootView);
+            rootView.Dispose();
+            rootView = null;
+            window = null;
+        }
+    }
+}