[NUI] Add FlexLayout sample (#309)
authordongsug-song <35130733+dongsug-song@users.noreply.github.com>
Fri, 22 Jun 2018 06:09:03 +0000 (15:09 +0900)
committerGitHub <noreply@github.com>
Fri, 22 Jun 2018 06:09:03 +0000 (15:09 +0900)
test/NUITestSample/NUITestSample/examples/layouting/CustomLayout.cs [deleted file]
test/NUITestSample/NUITestSample/examples/layouting/SimpleLayout.cs [deleted file]
test/NUITestSample/NUITestSample/examples/layouting/custom-layout-without-absoluteLayout-test.cs [new file with mode: 0755]
test/NUITestSample/NUITestSample/examples/layouting/flex-layout-test.cs [new file with mode: 0755]

diff --git a/test/NUITestSample/NUITestSample/examples/layouting/CustomLayout.cs b/test/NUITestSample/NUITestSample/examples/layouting/CustomLayout.cs
deleted file mode 100755 (executable)
index ac55ae3..0000000
+++ /dev/null
@@ -1,106 +0,0 @@
-
-using Tizen.NUI;
-using Tizen.NUI.BaseComponents;
-
-namespace SimpleLayout
-{
-    public class CustomLayout : LayoutGroup
-    {
-        protected override void OnMeasure( LayoutMeasureSpec widthMeasureSpec, LayoutMeasureSpec heightMeasureSpec )
-        {
-            var accumulatedWidth = new LayoutLength( 0 );
-            var maxHeight = 0;
-            var measuredWidth = new LayoutLength( 0 );
-            LayoutLength measuredHeight = new LayoutLength( 0) ;
-            LayoutMeasureSpec.ModeType widthMode = widthMeasureSpec.Mode;
-            LayoutMeasureSpec.ModeType heightMode = heightMeasureSpec.Mode;
-
-            bool isWidthExact = (widthMode == LayoutMeasureSpec.ModeType.EXACTLY);
-            bool isHeightExact = (heightMode == LayoutMeasureSpec.ModeType.EXACTLY);
-
-            // In this layout we will:
-            //  Measuring the layout with the children in a horizontal configuration, one after another
-            //  Set the required width to be the accumulated width of our children
-            //  Set the required height to be the maximum height of any of our children
-
-            for( uint i = 0; i < ChildCount; ++i )
-            {
-                var childLayout = GetChildAt( i );
-                if( childLayout )
-                {
-                    MeasureChild( childLayout, widthMeasureSpec, heightMeasureSpec );
-                    accumulatedWidth += childLayout.MeasuredWidth;
-                    maxHeight = System.Math.Max( childLayout.MeasuredHeight.Value, maxHeight );
-                }
-            }
-
-            measuredHeight.Value = maxHeight ;
-            measuredWidth = accumulatedWidth;
-
-            if( isWidthExact )
-            {
-                measuredWidth = new LayoutLength( widthMeasureSpec.Size );
-            }
-
-            if( isHeightExact )
-            {
-                measuredHeight = new LayoutLength( heightMeasureSpec.Size );
-            }
-
-            // Finally, call this method to set the dimensions we would like
-            SetMeasuredDimensions( new MeasuredSize( measuredWidth ), new MeasuredSize( measuredHeight ) );
-        }
-
-        protected override void OnLayout( bool changed, LayoutLength left, LayoutLength top, LayoutLength right, LayoutLength bottom )
-        {
-            LayoutLength childTop = new LayoutLength( 0 );
-            LayoutLength childLeft = new LayoutLength( 0 );
-
-            // We want to vertically align the children to the middle
-            var height = bottom - top;
-            var middle = height / 2;
-
-            // Horizontally align the children to the middle of the space they are given too
-            var width = right - left;
-            uint count = ChildCount;
-            var childIncrement = 0;
-            if (count > 0)
-            {
-                childIncrement = width.Value / System.Convert.ToInt32( count );
-            }
-            var center = childIncrement / 2;
-
-            // Check layout direction
-            var view = GetOwner();
-            ViewLayoutDirectionType layoutDirection = view.LayoutDirection;
-
-            for ( uint i = 0; i < count; i++ )
-            {
-                uint itemIndex;
-                // If RTL, then layout the last item first
-                if (layoutDirection == ViewLayoutDirectionType.RTL)
-                {
-                    itemIndex = count - 1 - i;
-                }
-                else
-                {
-                    itemIndex = i;
-                }
-
-                LayoutItem childLayout = GetChildAt( itemIndex );
-                if( childLayout )
-                {
-                    var childWidth = childLayout.MeasuredWidth;
-                    var childHeight = childLayout.MeasuredHeight;
-
-                    childTop = middle - (childHeight / 2);
-
-                    var leftPosition = childLeft + center - childWidth / 2;
-
-                    childLayout.Layout( leftPosition, childTop, leftPosition + childWidth, childTop + childHeight );
-                    childLeft += childIncrement;
-                }
-            }
-        }
-    }
-}
diff --git a/test/NUITestSample/NUITestSample/examples/layouting/SimpleLayout.cs b/test/NUITestSample/NUITestSample/examples/layouting/SimpleLayout.cs
deleted file mode 100755 (executable)
index 3f067e7..0000000
+++ /dev/null
@@ -1,88 +0,0 @@
-using System;
-using Tizen.NUI;
-using Tizen.NUI.BaseComponents;
-
-namespace SimpleLayout
-{
-    static class TestImages
-    {
-        private const string resources = "./res";
-
-        /// Child image filenames
-        public static readonly string[] s_images = new string[]
-        {
-            resources + "/images/application-icon-101.png",
-            resources + "/images/application-icon-102.png",
-            resources + "/images/application-icon-103.png",
-            resources + "/images/application-icon-104.png"
-        };
-    }
-
-    class SimpleLayout : NUIApplication
-    {
-        protected override void OnCreate()
-        {
-            base.OnCreate();
-            Initialize();
-        }
-
-        private void Initialize()
-        {
-            // Change the background color of Window to White
-            Window window = Window.Instance;
-            window.BackgroundColor = Color.White;
-
-            //Layer layer = new Layer();
-
-            //window.AddLayer(layer);
-
-            // Create a new view
-            View customLayoutView = new View();
-            customLayoutView.Name = "CustomLayoutView";
-            customLayoutView.ParentOrigin = ParentOrigin.Center;
-            customLayoutView.PivotPoint = PivotPoint.Center;
-            customLayoutView.PositionUsesPivotPoint = true;
-            // Set our Custom Layout on the view
-            var layout = new CustomLayout();
-            customLayoutView.Layout = layout;
-            customLayoutView.SetProperty( LayoutItemWrapper.ChildProperty.WIDTH_SPECIFICATION, new PropertyValue(-2) );  // -2 WRAP_CONTENT
-            customLayoutView.SetProperty( LayoutItemWrapper.ChildProperty.HEIGHT_SPECIFICATION, new PropertyValue(350) );
-            customLayoutView.BackgroundColor = Color.Blue;
-            window.Add( customLayoutView );
-
-            // Add child image-views to the created view
-            foreach (String image in TestImages.s_images)
-            {
-                customLayoutView.Add( CreateChildImageView( image, new Size2D( 100, 100 ) ) );
-            }
-        }
-
-        /// <summary>
-        /// Helper function to create ImageViews with given filename and size..<br />
-        /// </summary>
-        /// <param name="filename"> The filename of the image to use.</param>
-        /// <param name="size"> The size that the image should be loaded at.</param>
-        /// <returns>The created ImageView.</returns>
-        ImageView CreateChildImageView( String url, Size2D size )
-        {
-            ImageView imageView = new ImageView();
-            ImageVisual imageVisual = new ImageVisual();
-
-            imageVisual.URL = url;
-            imageVisual.DesiredHeight = size.Height;
-            imageVisual.DesiredWidth = size.Width;
-            imageView.Image = imageVisual.OutputVisualMap;
-
-            imageView.Name = "ImageView";
-            imageView.HeightResizePolicy = ResizePolicyType.Fixed;
-            imageView.WidthResizePolicy = ResizePolicyType.Fixed;
-            return imageView;
-        }
-
-        static void Main(string[] args)
-        {
-            SimpleLayout simpleLayout = new SimpleLayout();
-            simpleLayout.Run(args);
-        }
-    }
-}
diff --git a/test/NUITestSample/NUITestSample/examples/layouting/custom-layout-without-absoluteLayout-test.cs b/test/NUITestSample/NUITestSample/examples/layouting/custom-layout-without-absoluteLayout-test.cs
new file mode 100755 (executable)
index 0000000..a67ba21
--- /dev/null
@@ -0,0 +1,193 @@
+using System;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+
+namespace SimpleLayout
+{
+    public class CustomLayout : LayoutGroup
+    {
+        protected override void OnMeasure(LayoutMeasureSpec widthMeasureSpec, LayoutMeasureSpec heightMeasureSpec)
+        {
+            var accumulatedWidth = new LayoutLength(0);
+            var maxHeight = 0;
+            var measuredWidth = new LayoutLength(0);
+            LayoutLength measuredHeight = new LayoutLength(0);
+            LayoutMeasureSpec.ModeType widthMode = widthMeasureSpec.Mode;
+            LayoutMeasureSpec.ModeType heightMode = heightMeasureSpec.Mode;
+
+            bool isWidthExact = (widthMode == LayoutMeasureSpec.ModeType.EXACTLY);
+            bool isHeightExact = (heightMode == LayoutMeasureSpec.ModeType.EXACTLY);
+
+            // In this layout we will:
+            //  Measuring the layout with the children in a horizontal configuration, one after another
+            //  Set the required width to be the accumulated width of our children
+            //  Set the required height to be the maximum height of any of our children
+
+            for (uint i = 0; i < ChildCount; ++i)
+            {
+                var childLayout = GetChildAt(i);
+                if (childLayout)
+                {
+                    MeasureChild(childLayout, widthMeasureSpec, heightMeasureSpec);
+                    accumulatedWidth += childLayout.MeasuredWidth;
+                    maxHeight = System.Math.Max(childLayout.MeasuredHeight.Value, maxHeight);
+                }
+            }
+
+            measuredHeight.Value = maxHeight;
+            measuredWidth = accumulatedWidth;
+
+            if (isWidthExact)
+            {
+                measuredWidth = new LayoutLength(widthMeasureSpec.Size);
+            }
+
+            if (isHeightExact)
+            {
+                measuredHeight = new LayoutLength(heightMeasureSpec.Size);
+            }
+
+            // Finally, call this method to set the dimensions we would like
+            SetMeasuredDimensions(new MeasuredSize(measuredWidth), new MeasuredSize(measuredHeight));
+        }
+
+        protected override void OnLayout(bool changed, LayoutLength left, LayoutLength top, LayoutLength right, LayoutLength bottom)
+        {
+            LayoutLength childTop = new LayoutLength(0);
+            LayoutLength childLeft = new LayoutLength(0);
+
+            // We want to vertically align the children to the middle
+            var height = bottom - top;
+            var middle = height / 2;
+
+            // Horizontally align the children to the middle of the space they are given too
+            var width = right - left;
+            uint count = ChildCount;
+            var childIncrement = 0;
+            if (count > 0)
+            {
+                childIncrement = width.Value / System.Convert.ToInt32(count);
+            }
+            var center = childIncrement / 2;
+
+            // Check layout direction
+            var view = GetOwner();
+            ViewLayoutDirectionType layoutDirection = view.LayoutDirection;
+
+            for (uint i = 0; i < count; i++)
+            {
+                uint itemIndex;
+                // If RTL, then layout the last item first
+                if (layoutDirection == ViewLayoutDirectionType.RTL)
+                {
+                    itemIndex = count - 1 - i;
+                }
+                else
+                {
+                    itemIndex = i;
+                }
+
+                LayoutItem childLayout = GetChildAt(itemIndex);
+                if (childLayout)
+                {
+                    var childWidth = childLayout.MeasuredWidth;
+                    var childHeight = childLayout.MeasuredHeight;
+
+                    childTop = middle - (childHeight / 2);
+
+                    var leftPosition = childLeft + center - childWidth / 2;
+
+                    childLayout.Layout(leftPosition, childTop, leftPosition + childWidth, childTop + childHeight);
+                    childLeft += childIncrement;
+                }
+            }
+        }
+    }
+}
+
+namespace SimpleLayout
+{
+    static class TestImages
+    {
+        //private const string resources = "./res";
+        public static string resources = Tizen.Applications.Application.Current.DirectoryInfo.Resource;
+        /// Child image filenames
+        public static readonly string[] s_images = new string[]
+        {
+            resources + "/images/application-icon-101.png",
+            resources + "/images/application-icon-102.png",
+            resources + "/images/application-icon-103.png",
+            resources + "/images/application-icon-104.png"
+        };
+    }
+
+    class SimpleLayout : NUIApplication
+    {
+        protected override void OnCreate()
+        {
+            base.OnCreate();
+            Initialize();
+        }
+
+        private void Initialize()
+        {
+            // Change the background color of Window to White
+            Window window = Window.Instance;
+            window.BackgroundColor = Color.White;
+
+            //Layer layer = new Layer();
+
+            //window.AddLayer(layer);
+
+            // Create a new view
+            View customLayoutView = new View();
+            customLayoutView.Name = "CustomLayoutView";
+            customLayoutView.ParentOrigin = ParentOrigin.Center;
+            customLayoutView.PivotPoint = PivotPoint.Center;
+            customLayoutView.PositionUsesPivotPoint = true;
+            // Set our Custom Layout on the view
+            var layout = new CustomLayout();
+            customLayoutView.Layout = layout;
+            customLayoutView.SetProperty(LayoutItemWrapper.ChildProperty.WIDTH_SPECIFICATION, new PropertyValue(-2));  // -2 WRAP_CONTENT
+            customLayoutView.SetProperty(LayoutItemWrapper.ChildProperty.HEIGHT_SPECIFICATION, new PropertyValue(350));
+            customLayoutView.BackgroundColor = Color.Blue;
+            window.Add(customLayoutView);
+
+            // Add child image-views to the created view
+            foreach (String image in TestImages.s_images)
+            {
+                customLayoutView.Add(CreateChildImageView(image, new Size2D(100, 100)));
+            }
+        }
+
+        /// <summary>
+        /// Helper function to create ImageViews with given filename and size..<br />
+        /// </summary>
+        /// <param name="filename"> The filename of the image to use.</param>
+        /// <param name="size"> The size that the image should be loaded at.</param>
+        /// <returns>The created ImageView.</returns>
+        ImageView CreateChildImageView(String url, Size2D size)
+        {
+            ImageView imageView = new ImageView();
+            ImageVisual imageVisual = new ImageVisual();
+
+            imageVisual.URL = url;
+            imageVisual.DesiredHeight = size.Height;
+            imageVisual.DesiredWidth = size.Width;
+            imageView.Image = imageVisual.OutputVisualMap;
+
+            imageView.Name = "ImageView";
+            imageView.HeightResizePolicy = ResizePolicyType.Fixed;
+            imageView.WidthResizePolicy = ResizePolicyType.Fixed;
+            return imageView;
+        }
+
+        static void _Main(string[] args)
+        {
+            SimpleLayout simpleLayout = new SimpleLayout();
+            simpleLayout.Run(args);
+        }
+    }
+}
+
+
diff --git a/test/NUITestSample/NUITestSample/examples/layouting/flex-layout-test.cs b/test/NUITestSample/NUITestSample/examples/layouting/flex-layout-test.cs
new file mode 100755 (executable)
index 0000000..58d81c4
--- /dev/null
@@ -0,0 +1,141 @@
+using System;
+using System.Threading;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+
+namespace NUIFlexLayoutSample
+{
+    static class Images
+    {
+        public static string resources = Tizen.Applications.Application.Current.DirectoryInfo.Resource;
+        public static readonly string[] s_images = new string[]
+        {
+            resources + "images/application-icon-101.png",
+            resources + "images/application-icon-102.png",
+            resources + "images/application-icon-103.png",
+            resources + "images/application-icon-104.png",
+            resources + "images/image-1.jpg",
+            resources + "images/image-2.jpg",
+            resources + "images/image-3.jpg",
+        };
+    }
+
+    class Example : NUIApplication
+    {
+        public Example() : base()
+        {
+            Console.WriteLine("Example()!");
+        }
+
+        protected override void OnCreate()
+        {
+            base.OnCreate();
+            Initialize();
+        }
+
+        View flexContainer;
+        const int MAX_CHILDREN = 7;
+        ImageView[] imageViews = new ImageView[MAX_CHILDREN];
+        private void Initialize()
+        {
+            Console.WriteLine("Initialize()!");
+            Window window = Window.Instance;
+            window.BackgroundColor = Color.Green;
+
+            flexContainer = new View();
+            flexContainer.PositionUsesPivotPoint = true;
+            flexContainer.PivotPoint = PivotPoint.Center;
+            flexContainer.ParentOrigin = ParentOrigin.Center;
+            flexContainer.BackgroundColor = Color.Yellow;
+
+            for (int index = 0; index < MAX_CHILDREN - 3; index++)
+            {
+                imageViews[index] = new ImageView(Images.s_images[index]);
+                imageViews[index].WidthSpecificationFixed = 100;
+                imageViews[index].HeightSpecificationFixed = 100;
+                flexContainer.Add(imageViews[index]);
+            }
+            for (int index = MAX_CHILDREN - 3; index < MAX_CHILDREN; index++)
+            {
+                imageViews[index] = new ImageView(Images.s_images[index]);
+                imageViews[index].WidthSpecificationFixed = 200;
+                imageViews[index].HeightSpecificationFixed = 200;
+                imageViews[index].Name = "t_image" + (index - 3);
+            }
+
+            var layout = new FlexLayout();
+            layout.LayoutAnimate = true;
+            layout.Direction = FlexLayout.FlexDirection.ColumnReverse;
+            flexContainer.WidthSpecificationFixed = 500;
+            flexContainer.HeightSpecificationFixed = 500;
+            flexContainer.Layout = layout;
+
+            window.Add(flexContainer);
+            window.KeyEvent += OnKeyEvent;
+        }
+
+        int cnt1 = 1;
+        private void OnKeyEvent(object source, Window.KeyEventArgs e)
+        {
+            if (e.Key.State == Key.StateType.Down)
+            {
+                Console.WriteLine($"key pressed name={e.Key.KeyPressedName}");
+                switch (e.Key.KeyPressedName)
+                {
+                    case "Right":
+                        if (cnt1 < 4 && cnt1 > 0)
+                        {
+                            flexContainer.Add(imageViews[cnt1 + 3]);
+                            cnt1++;
+                        }
+                        break;
+
+                    case "Left":
+                        if (cnt1 - 1 < 4 && cnt1 - 1 > 0)
+                        {
+                            View tmp = flexContainer.FindChildByName("t_image" + (cnt1 - 1));
+                            if (tmp != null)
+                            {
+                                flexContainer.Remove(tmp);
+                                cnt1--;
+                            }
+                        }
+                        break;
+
+                    case "Up":
+                        var vertical = new FlexLayout();
+                        vertical.LayoutAnimate = true;
+                        vertical.Direction = FlexLayout.FlexDirection.Column;
+                        flexContainer.Layout = vertical;
+                        break;
+
+                    case "Down":
+                        var horizon = new FlexLayout();
+                        horizon.LayoutAnimate = true;
+                        horizon.Direction = FlexLayout.FlexDirection.Row;
+                        flexContainer.Layout = horizon;
+                        break;
+
+                    case "Return":
+                        if (flexContainer.LayoutDirection == ViewLayoutDirectionType.LTR) { flexContainer.LayoutDirection = ViewLayoutDirectionType.RTL; }
+                        else { flexContainer.LayoutDirection = ViewLayoutDirectionType.LTR; }
+                        break;
+
+                    case "1":
+                        var tmpLayout = flexContainer.Layout as FlexLayout;
+                        if (tmpLayout.WrapType == FlexLayout.FlexWrapType.NoWrap) { tmpLayout.WrapType = FlexLayout.FlexWrapType.Wrap; }
+                        else { tmpLayout.WrapType = FlexLayout.FlexWrapType.NoWrap; }
+                        break;
+                }
+            }
+        }
+
+        [STAThread]
+        static void Main(string[] args)
+        {
+            Example layoutSample = new Example();
+            layoutSample.Run(args);
+        }
+
+    }
+}