[NUI] Fix TabButton's size calculation logic with the latest UX
authorJaehyun Cho <jae_hyun.cho@samsung.com>
Wed, 4 May 2022 06:26:27 +0000 (15:26 +0900)
committerSangHyeon Jade Lee <dltkdgus1764@gmail.com>
Tue, 10 May 2022 06:09:58 +0000 (15:09 +0900)
Based on the latest UX, TabButton's sub components' sizes are different
when Text/IconURL is set and when Text/IconURL is not set.

Therefore, TextButton's sub components' sizes should be updated when
Text/IconURL is set.

If sub components' sizes are updated in OnRelayout() like previous
calculation logic, then the sizes cannot be applied by NUI Layout.

The reason is as follows.
- Changing subcomponents' sizes calls NUI Layout's RequestLayout().
- NUI Layout's RequestLayout() calls Awake() to awake idling DALi main
  loop.
- DALi main loop calls NUI Layout's Process() and then calls DALi
  Relayout().
- NUI Layout's Process() applies changed sizes by NUI Layout.

Consequently, if NUI Layout's RequestLayout() is called in OnRelayout(),
then DALi main loop is finished without calling NUI Layout's Process()
again.

As a result, to resolve the above problem, TabButton's sub components'
sizes are updated when Text/IconURL is set.

Related samples are also updated.

13 files changed:
src/Tizen.NUI.Components/Controls/TabButton.cs
src/Tizen.NUI.Components/Style/TabButtonStyle.cs
src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTest.cs [new file with mode: 0644]
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTestPage.xaml [new file with mode: 0755]
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTestPage.xaml.cs [new file with mode: 0755]
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTest.cs [new file with mode: 0644]
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTestPage.xaml [new file with mode: 0755]
test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTestPage.xaml.cs [new file with mode: 0755]
test/NUITizenGallery/res/home.png [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/Examples/TabViewWithIconExample.cs [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/Examples/TabViewWithIconOnlyExample.cs [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/res/home.png [new file with mode: 0644]

index fdc05c8..9c91b2d 100755 (executable)
@@ -120,10 +120,32 @@ namespace Tizen.NUI.Components
 
         /// <inheritdoc/>
         [EditorBrowsable(EditorBrowsableState.Never)]
-        public override void OnRelayout(Vector2 size, RelayoutContainer container)
+        public new string Text
         {
-            base.OnRelayout(size, container);
-            UpdateSizeAndSpacing();
+            get
+            {
+                return base.Text;
+            }
+            set
+            {
+                base.Text = value;
+                UpdateSizeAndSpacing();
+            }
+        }
+
+        /// <inheritdoc/>
+        [EditorBrowsable(EditorBrowsableState.Never)]
+        public new string IconURL
+        {
+            get
+            {
+                return base.IconURL;
+            }
+            set
+            {
+                base.IconURL = value;
+                UpdateSizeAndSpacing();
+            }
         }
 
         /// <inheritdoc/>
@@ -274,8 +296,10 @@ namespace Tizen.NUI.Components
 
             if (tabButtonStyle != null)
             {
-                // Icon and Text
-                if (!isEmptyIcon && !isEmptyText)
+                Padding = tabButtonStyle.Padding;
+
+                // Text only
+                if (isEmptyIcon && !isEmptyText)
                 {
                     if (tabButtonStyle.Size != null)
                     {
@@ -283,7 +307,10 @@ namespace Tizen.NUI.Components
                         HeightSpecification = (int)tabButtonStyle.Size.Height;
                     }
 
-                    Padding = tabButtonStyle.Padding;
+                    if ((tabButtonStyle.Text != null) && (tabButtonStyle.Text.PixelSize != null) && (tabButtonStyle.Text.PixelSize.Normal != null))
+                    {
+                        TextLabel.PixelSize = (float)tabButtonStyle.Text.PixelSize.Normal;
+                    }
                 }
                 // Icon only
                 else if (!isEmptyIcon && isEmptyText)
@@ -294,30 +321,28 @@ namespace Tizen.NUI.Components
                         HeightSpecification = (int)tabButtonStyle.SizeWithIconOnly.Height;
                     }
 
-                    Padding = tabButtonStyle.PaddingWithIconOnly;
-
                     if (tabButtonStyle.IconSizeWithIconOnly != null)
                     {
                         Icon.WidthSpecification = (int)tabButtonStyle.IconSizeWithIconOnly.Width;
                         Icon.HeightSpecification = (int)tabButtonStyle.IconSizeWithIconOnly.Height;
                     }
                 }
-                // Text only
-                else if (isEmptyIcon && !isEmptyText)
+                // Icon and Text
+                else if (!isEmptyIcon && !isEmptyText)
                 {
-                    if (tabButtonStyle.SizeWithTextOnly != null)
+                    if (tabButtonStyle.SizeWithIcon != null)
                     {
-                        WidthSpecification = (int)tabButtonStyle.SizeWithTextOnly.Width;
-                        HeightSpecification = (int)tabButtonStyle.SizeWithTextOnly.Height;
+                        WidthSpecification = (int)tabButtonStyle.SizeWithIcon.Width;
+                        HeightSpecification = (int)tabButtonStyle.SizeWithIcon.Height;
                     }
 
-                    Padding = tabButtonStyle.PaddingWithTextOnly;
-
                     if ((tabButtonStyle.Icon != null) && (tabButtonStyle.Icon.Size != null))
                     {
                         Icon.WidthSpecification = (int)tabButtonStyle.Icon.Size.Width;
                         Icon.HeightSpecification = (int)tabButtonStyle.Icon.Size.Height;
                     }
+
+                    TextLabel.PixelSize = tabButtonStyle.TextSizeWithIcon;
                 }
                 // Nothing
                 else
@@ -327,8 +352,6 @@ namespace Tizen.NUI.Components
                         WidthSpecification = (int)tabButtonStyle.Size.Width;
                         HeightSpecification = (int)tabButtonStyle.Size.Height;
                     }
-
-                    Padding = tabButtonStyle.Padding;
                 }
             }
         }
index 52e72fb..1d111e0 100755 (executable)
@@ -47,10 +47,10 @@ namespace Tizen.NUI.Components
         }
 
         /// <summary>
-        /// Gets or sets the size of a view with text only for the width, the height, and the depth.
+        /// Gets or sets the size of a view with icon for the width, the height, and the depth.
         /// </summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
-        public Size SizeWithTextOnly { get; set; } = new Size();
+        public Size SizeWithIcon { get; set; } = new Size();
 
         /// <summary>
         /// Gets or sets the size of a view with icon only for the width, the height, and the depth.
@@ -59,22 +59,16 @@ namespace Tizen.NUI.Components
         public Size SizeWithIconOnly { get; set; } = new Size();
 
         /// <summary>
-        /// Gets or sets the padding with text only for use in layout.
-        /// </summary>
-        [EditorBrowsable(EditorBrowsableState.Never)]
-        public Extents PaddingWithTextOnly { get; set; } = new Extents();
-
-        /// <summary>
-        /// Gets or sets the padding with icon only for use in layout.
+        /// Gets or sets the size of icon with icon only for the width, the height, and the depth.
         /// </summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
-        public Extents PaddingWithIconOnly { get; set; } = new Extents();
+        public Size IconSizeWithIconOnly { get; set; } = new Size();
 
         /// <summary>
-        /// Gets or sets the size of icon with icon only for the width, the height, and the depth.
+        /// Gets or sets the text font size with icon.
         /// </summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
-        public Size IconSizeWithIconOnly { get; set; } = new Size();
+        public float TextSizeWithIcon { get; set; }
 
         /// <inheritdoc/>
         [EditorBrowsable(EditorBrowsableState.Never)]
@@ -84,11 +78,10 @@ namespace Tizen.NUI.Components
 
             if (bindableObject is TabButtonStyle tabButtonStyle)
             {
-                SizeWithTextOnly = new Size(tabButtonStyle.SizeWithTextOnly);
+                SizeWithIcon = new Size(tabButtonStyle.SizeWithIcon);
                 SizeWithIconOnly = new Size(tabButtonStyle.SizeWithIconOnly);
-                PaddingWithTextOnly = new Extents(tabButtonStyle.PaddingWithTextOnly);
-                PaddingWithIconOnly = new Extents(tabButtonStyle.PaddingWithIconOnly);
                 IconSizeWithIconOnly = new Size(tabButtonStyle.IconSizeWithIconOnly);
+                TextSizeWithIcon = tabButtonStyle.TextSizeWithIcon;
             }
         }
     }
index e47b15a..735a75a 100755 (executable)
@@ -571,16 +571,15 @@ namespace Tizen.NUI.Components
             // TabButton base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.TabButton", new TabButtonStyle()
             {
-                Size = new Size(-1, 116),
-                SizeWithTextOnly = new Size(-1, 72),
+                Size = new Size(-1, 72),
+                SizeWithIcon = new Size(-1, 116),
                 SizeWithIconOnly = new Size(-1, 64),
-                MinimumSize = new Size(100, -1),
-                Padding = new Extents(24, 24, 18, 16),
-                PaddingWithTextOnly = new Extents(24, 24, 20, 20),
-                PaddingWithIconOnly = new Extents(24, 24, 16, 16),
-                ItemSpacing = new Size2D(0, 10),
+                MinimumSize = new Size(80, 64),
+                Padding = new Extents(24, 24, 16, 16),
+                ItemSpacing = new Size2D(10, 10),
                 CornerRadius = 0,
                 IconSizeWithIconOnly = new Size(32, 32),
+                TextSizeWithIcon = 16.0f,
                 BackgroundColor = new Selector<Color>()
                 {
                     Normal = new Color("#FAFAFA"),
@@ -591,7 +590,7 @@ namespace Tizen.NUI.Components
                 },
                 Text = new TextLabelStyle()
                 {
-                    PixelSize = 28,
+                    PixelSize = 24,
                     Size = new Size(-2, -2),
                     TextColor = new Selector<Color>()
                     {
diff --git a/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTest.cs b/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTest.cs
new file mode 100644 (file)
index 0000000..4cce3e8
--- /dev/null
@@ -0,0 +1,50 @@
+/*
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using System;
+using Tizen.NUI;
+using Tizen.NUI.Components;
+
+namespace NUITizenGallery
+{
+    internal class TabViewWithIconOnlyTest : IExample
+    {
+        Window window;
+        Navigator navigator;
+        int pageCount = 0;
+
+        public void Activate()
+        {
+            Console.WriteLine($"@@@ this.GetType().Name={this.GetType().Name}, Activate()");
+
+            window = NUIApplication.GetDefaultWindow();
+            navigator = window.GetDefaultNavigator();
+
+            pageCount = navigator.PageCount;
+            navigator.Push(new TabViewWithIconOnlyTestPage());
+        }
+
+        public void Deactivate()
+        {
+            Console.WriteLine($"@@@ this.GetType().Name={this.GetType().Name}, Deactivate()");
+
+            for (int i = navigator.PageCount; i > pageCount; i--)
+            {
+                navigator.RemoveAt(i - 1);
+            }
+        }
+    }
+}
diff --git a/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTestPage.xaml b/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTestPage.xaml
new file mode 100755 (executable)
index 0000000..4d2bd11
--- /dev/null
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<ContentPage x:Class="NUITizenGallery.TabViewWithIconOnlyTestPage"
+  xmlns="http://tizen.org/Tizen.NUI/2018/XAML"
+  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+  WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+  HeightSpecification="{Static LayoutParamPolicies.MatchParent}">
+
+    <!-- AppBar is top-side bar with navigation content, title, and action. If you not set any contents, back button is automatically added. -->
+    <ContentPage.AppBar>
+        <AppBar x:Name="appBar" Title="TabViewWithIconOnlyTestPage"/>
+    </ContentPage.AppBar>
+
+    <!-- Content is main placeholder of ContentPage. Add your content into this view. -->
+    <ContentPage.Content>
+        <TabView x:Name="tabView"
+                   WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+        </TabView>
+    </ContentPage.Content>
+
+</ContentPage>
diff --git a/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTestPage.xaml.cs b/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconOnlyTestPage.xaml.cs
new file mode 100755 (executable)
index 0000000..8d43cfb
--- /dev/null
@@ -0,0 +1,117 @@
+/*
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace NUITizenGallery
+{
+    public partial class TabViewWithIconOnlyTestPage : ContentPage
+    {
+        private int tabCount = 0;
+
+        public TabViewWithIconOnlyTestPage()
+        {
+            InitializeComponent();
+
+            tabView.SizeHeight = Window.Instance.WindowSize.Height - appBar.SizeHeight;
+
+            tabView.AddTab(CreateTabButton(), CreateView());
+            tabCount++;
+
+            tabView.AddTab(CreateTabButton(), CreateView());
+            tabCount++;
+        }
+
+        private TabButton CreateTabButton()
+        {
+            return new TabButton() { IconURL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "home.png", };
+        }
+
+        private View CreateView()
+        {
+            Color backgroundColor;
+            Color buttonBackgroundColor;
+
+            if ((tabCount + 1) % 4 == 0)
+            {
+                backgroundColor = Color.DarkGreen;
+                buttonBackgroundColor = Color.Green;
+            }
+            else if ((tabCount + 1) % 4 == 1)
+            {
+                backgroundColor = Color.DarkRed;
+                buttonBackgroundColor = Color.Red;
+            }
+            else if ((tabCount + 1) % 4 == 2)
+            {
+                backgroundColor = Color.DarkBlue;
+                buttonBackgroundColor = Color.Blue;
+            }
+            else
+            {
+                backgroundColor = Color.SaddleBrown;
+                buttonBackgroundColor = Color.Orange;
+            }
+
+            var container = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    LinearAlignment = LinearLayout.Alignment.Center,
+                    CellPadding = new Size2D(0, 20),
+                },
+                BackgroundColor = backgroundColor,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+            };
+
+            var buttonAddTab = new Button()
+            {
+                Text = "Add Tab",
+                BackgroundColor = buttonBackgroundColor,
+            };
+            buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
+            {
+                if (tabCount < 4)
+                {
+                    tabView.AddTab(CreateTabButton(), CreateView());
+                    tabCount++;
+                }
+            };
+            container.Add(buttonAddTab);
+
+            var buttonRemoveTab = new Button()
+            {
+                Text = "Remove Tab",
+                BackgroundColor = buttonBackgroundColor,
+            };
+            buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
+            {
+                if (tabCount > 1)
+                {
+                    tabView.RemoveTab(tabCount - 1);
+                    tabCount--;
+                }
+            };
+            container.Add(buttonRemoveTab);
+
+            return container;
+        }
+    }
+}
diff --git a/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTest.cs b/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTest.cs
new file mode 100644 (file)
index 0000000..569609f
--- /dev/null
@@ -0,0 +1,50 @@
+/*
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using System;
+using Tizen.NUI;
+using Tizen.NUI.Components;
+
+namespace NUITizenGallery
+{
+    internal class TabViewWithIconTest : IExample
+    {
+        Window window;
+        Navigator navigator;
+        int pageCount = 0;
+
+        public void Activate()
+        {
+            Console.WriteLine($"@@@ this.GetType().Name={this.GetType().Name}, Activate()");
+
+            window = NUIApplication.GetDefaultWindow();
+            navigator = window.GetDefaultNavigator();
+
+            pageCount = navigator.PageCount;
+            navigator.Push(new TabViewWithIconTestPage());
+        }
+
+        public void Deactivate()
+        {
+            Console.WriteLine($"@@@ this.GetType().Name={this.GetType().Name}, Deactivate()");
+
+            for (int i = navigator.PageCount; i > pageCount; i--)
+            {
+                navigator.RemoveAt(i - 1);
+            }
+        }
+    }
+}
diff --git a/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTestPage.xaml b/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTestPage.xaml
new file mode 100755 (executable)
index 0000000..03f9c25
--- /dev/null
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<ContentPage x:Class="NUITizenGallery.TabViewWithIconTestPage"
+  xmlns="http://tizen.org/Tizen.NUI/2018/XAML"
+  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+  WidthSpecification="{Static LayoutParamPolicies.MatchParent}"
+  HeightSpecification="{Static LayoutParamPolicies.MatchParent}">
+
+    <!-- AppBar is top-side bar with navigation content, title, and action. If you not set any contents, back button is automatically added. -->
+    <ContentPage.AppBar>
+        <AppBar x:Name="appBar" Title="TabViewWithIconTestPage"/>
+    </ContentPage.AppBar>
+
+    <!-- Content is main placeholder of ContentPage. Add your content into this view. -->
+    <ContentPage.Content>
+        <TabView x:Name="tabView"
+                   WidthSpecification="{Static LayoutParamPolicies.MatchParent}">
+        </TabView>
+    </ContentPage.Content>
+
+</ContentPage>
diff --git a/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTestPage.xaml.cs b/test/NUITizenGallery/Examples/TabViewTest/TabViewWithIconTestPage.xaml.cs
new file mode 100755 (executable)
index 0000000..2a1aac5
--- /dev/null
@@ -0,0 +1,121 @@
+/*
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace NUITizenGallery
+{
+    public partial class TabViewWithIconTestPage : ContentPage
+    {
+        private int tabCount = 0;
+
+        public TabViewWithIconTestPage()
+        {
+            InitializeComponent();
+
+            tabView.SizeHeight = Window.Instance.WindowSize.Height - appBar.SizeHeight;
+
+            tabView.AddTab(CreateTabButton(), CreateView());
+            tabCount++;
+
+            tabView.AddTab(CreateTabButton(), CreateView());
+            tabCount++;
+        }
+
+        private TabButton CreateTabButton()
+        {
+            return new TabButton()
+            {
+                Text = "Tab" + (tabCount + 1),
+                IconURL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "home.png",
+            };
+        }
+
+        private View CreateView()
+        {
+            Color backgroundColor;
+            Color buttonBackgroundColor;
+
+            if ((tabCount + 1) % 4 == 0)
+            {
+                backgroundColor = Color.DarkGreen;
+                buttonBackgroundColor = Color.Green;
+            }
+            else if ((tabCount + 1) % 4 == 1)
+            {
+                backgroundColor = Color.DarkRed;
+                buttonBackgroundColor = Color.Red;
+            }
+            else if ((tabCount + 1) % 4 == 2)
+            {
+                backgroundColor = Color.DarkBlue;
+                buttonBackgroundColor = Color.Blue;
+            }
+            else
+            {
+                backgroundColor = Color.SaddleBrown;
+                buttonBackgroundColor = Color.Orange;
+            }
+
+            var container = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    LinearAlignment = LinearLayout.Alignment.Center,
+                    CellPadding = new Size2D(0, 20),
+                },
+                BackgroundColor = backgroundColor,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+            };
+
+            var buttonAddTab = new Button()
+            {
+                Text = "Add Tab",
+                BackgroundColor = buttonBackgroundColor,
+            };
+            buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
+            {
+                if (tabCount < 4)
+                {
+                    tabView.AddTab(CreateTabButton(), CreateView());
+                    tabCount++;
+                }
+            };
+            container.Add(buttonAddTab);
+
+            var buttonRemoveTab = new Button()
+            {
+                Text = "Remove Tab",
+                BackgroundColor = buttonBackgroundColor,
+            };
+            buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
+            {
+                if (tabCount > 1)
+                {
+                    tabView.RemoveTab(tabCount - 1);
+                    tabCount--;
+                }
+            };
+            container.Add(buttonRemoveTab);
+
+            return container;
+        }
+    }
+}
diff --git a/test/NUITizenGallery/res/home.png b/test/NUITizenGallery/res/home.png
new file mode 100644 (file)
index 0000000..865b7ec
Binary files /dev/null and b/test/NUITizenGallery/res/home.png differ
diff --git a/test/Tizen.NUI.StyleGuide/Examples/TabViewWithIconExample.cs b/test/Tizen.NUI.StyleGuide/Examples/TabViewWithIconExample.cs
new file mode 100644 (file)
index 0000000..667d792
--- /dev/null
@@ -0,0 +1,148 @@
+/*
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using System;
+using System.ComponentModel;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace Tizen.NUI.StyleGuide
+{
+    // IExample inehrited class will be automatically added in the main examples list.
+    internal class TabViewWithIconExample : ContentPage, IExample
+    {
+        private const int maxTabCount = 4;
+        private const int colorOne = 0, colorTwo = 1, colorThree = 2;
+        private int tabCount = 0;
+        private TabView tabView;
+
+        public void Activate()
+        {
+        }
+        public void Deactivate()
+        {
+        }
+
+        /// Modify this method for adding other examples.
+        public TabViewWithIconExample() : base()
+        {
+            WidthSpecification = LayoutParamPolicies.MatchParent;
+            HeightSpecification = LayoutParamPolicies.MatchParent;
+
+            // Navigator bar title is added here.
+            AppBar = new AppBar()
+            {
+                Title = "TabView Default Style",
+            };
+
+            tabView = new TabView()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            Content = tabView;
+
+            tabView.AddTab(CreateTabButton(), CreateView());
+            tabCount++;
+
+            tabView.AddTab(CreateTabButton(), CreateView());
+            tabCount++;
+        }
+
+        private TabButton CreateTabButton()
+        {
+            return new TabButton()
+            {
+                Text = "Tab" + (tabCount + 1),
+                IconURL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "home.png",
+            };
+        }
+
+        private View CreateView()
+        {
+            Color backgroundColor;
+            Color buttonBackgroundColor;
+
+            if ((tabCount + 1) % maxTabCount == colorOne)
+            {
+                backgroundColor = Color.DarkGreen;
+                buttonBackgroundColor = Color.Green;
+            }
+            else if ((tabCount + 1) % maxTabCount == colorTwo)
+            {
+                backgroundColor = Color.DarkRed;
+                buttonBackgroundColor = Color.Red;
+            }
+            else if ((tabCount + 1) % maxTabCount == colorThree)
+            {
+                backgroundColor = Color.DarkBlue;
+                buttonBackgroundColor = Color.Blue;
+            }
+            else
+            {
+                backgroundColor = Color.SaddleBrown;
+                buttonBackgroundColor = Color.Orange;
+            }
+
+            var container = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    CellPadding = new Size2D(0, 20),
+                },
+                BackgroundColor = backgroundColor,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+            };
+
+            var buttonAddTab = new Button()
+            {
+                Text = "Add Tab",
+                BackgroundColor = buttonBackgroundColor,
+            };
+            buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
+            {
+                if (tabCount < maxTabCount)
+                {
+                    tabView.AddTab(CreateTabButton(), CreateView());
+                    tabCount++;
+                }
+            };
+            container.Add(buttonAddTab);
+
+            var buttonRemoveTab = new Button()
+            {
+                Text = "Remove Tab",
+                BackgroundColor = buttonBackgroundColor,
+            };
+            buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
+            {
+                if (tabCount > 1)
+                {
+                    tabView.RemoveTab(tabCount - 1);
+                    tabCount--;
+                }
+            };
+            container.Add(buttonRemoveTab);
+
+            return container;
+        }
+
+    }
+}
diff --git a/test/Tizen.NUI.StyleGuide/Examples/TabViewWithIconOnlyExample.cs b/test/Tizen.NUI.StyleGuide/Examples/TabViewWithIconOnlyExample.cs
new file mode 100644 (file)
index 0000000..672b0a1
--- /dev/null
@@ -0,0 +1,147 @@
+/*
+ * Copyright(c) 2022 Samsung Electronics Co., Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+using System;
+using System.ComponentModel;
+using Tizen.NUI;
+using Tizen.NUI.BaseComponents;
+using Tizen.NUI.Components;
+
+namespace Tizen.NUI.StyleGuide
+{
+    // IExample inehrited class will be automatically added in the main examples list.
+    internal class TabViewWithIconOnlyExample : ContentPage, IExample
+    {
+        private const int maxTabCount = 4;
+        private const int colorOne = 0, colorTwo = 1, colorThree = 2;
+        private int tabCount = 0;
+        private TabView tabView;
+
+        public void Activate()
+        {
+        }
+        public void Deactivate()
+        {
+        }
+
+        /// Modify this method for adding other examples.
+        public TabViewWithIconOnlyExample() : base()
+        {
+            WidthSpecification = LayoutParamPolicies.MatchParent;
+            HeightSpecification = LayoutParamPolicies.MatchParent;
+
+            // Navigator bar title is added here.
+            AppBar = new AppBar()
+            {
+                Title = "TabView Default Style",
+            };
+
+            tabView = new TabView()
+            {
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+            };
+            Content = tabView;
+
+            tabView.AddTab(CreateTabButton(), CreateView());
+            tabCount++;
+
+            tabView.AddTab(CreateTabButton(), CreateView());
+            tabCount++;
+        }
+
+        private TabButton CreateTabButton()
+        {
+            return new TabButton()
+            {
+                IconURL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "home.png",
+            };
+        }
+
+        private View CreateView()
+        {
+            Color backgroundColor;
+            Color buttonBackgroundColor;
+
+            if ((tabCount + 1) % maxTabCount == colorOne)
+            {
+                backgroundColor = Color.DarkGreen;
+                buttonBackgroundColor = Color.Green;
+            }
+            else if ((tabCount + 1) % maxTabCount == colorTwo)
+            {
+                backgroundColor = Color.DarkRed;
+                buttonBackgroundColor = Color.Red;
+            }
+            else if ((tabCount + 1) % maxTabCount == colorThree)
+            {
+                backgroundColor = Color.DarkBlue;
+                buttonBackgroundColor = Color.Blue;
+            }
+            else
+            {
+                backgroundColor = Color.SaddleBrown;
+                buttonBackgroundColor = Color.Orange;
+            }
+
+            var container = new View()
+            {
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Vertical,
+                    HorizontalAlignment = HorizontalAlignment.Center,
+                    VerticalAlignment = VerticalAlignment.Center,
+                    CellPadding = new Size2D(0, 20),
+                },
+                BackgroundColor = backgroundColor,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                HeightSpecification = LayoutParamPolicies.MatchParent,
+            };
+
+            var buttonAddTab = new Button()
+            {
+                Text = "Add Tab",
+                BackgroundColor = buttonBackgroundColor,
+            };
+            buttonAddTab.Clicked += (object sender, ClickedEventArgs args) =>
+            {
+                if (tabCount < maxTabCount)
+                {
+                    tabView.AddTab(CreateTabButton(), CreateView());
+                    tabCount++;
+                }
+            };
+            container.Add(buttonAddTab);
+
+            var buttonRemoveTab = new Button()
+            {
+                Text = "Remove Tab",
+                BackgroundColor = buttonBackgroundColor,
+            };
+            buttonRemoveTab.Clicked += (object sender, ClickedEventArgs args) =>
+            {
+                if (tabCount > 1)
+                {
+                    tabView.RemoveTab(tabCount - 1);
+                    tabCount--;
+                }
+            };
+            container.Add(buttonRemoveTab);
+
+            return container;
+        }
+
+    }
+}
diff --git a/test/Tizen.NUI.StyleGuide/res/home.png b/test/Tizen.NUI.StyleGuide/res/home.png
new file mode 100644 (file)
index 0000000..865b7ec
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/home.png differ