The latest TabView UX has been applied.
TabBar and TabButton's Size and BackgroundColor have been updated.
TabButtonSelected(this, args);
}
}
-
- //TODO: To support non-unified tab button size.
- CalculateUnifiedTabButtonSize();
}
/// <summary>
{
tabButtons[SelectedIndex].IsSelected = true;
}
-
- //TODO: To support non-unified tab button size.
- CalculateUnifiedTabButtonSize();
- }
-
- /// <inheritdoc/>
- [EditorBrowsable(EditorBrowsableState.Never)]
- public override void OnRelayout(Vector2 size, RelayoutContainer container)
- {
- base.OnRelayout(size, container);
-
- //TODO: To support non-unified tab button size.
- CalculateUnifiedTabButtonSize();
- }
-
- private void CalculateUnifiedTabButtonSize()
- {
- if (tabButtons.Count <= 0)
- {
- return;
- }
-
- var tabButtonWidth = Size.Width / tabButtons.Count;
-
- foreach (TabButton tabButton in tabButtons)
- {
- if (tabButton.Size.Width != tabButtonWidth)
- {
- tabButton.Size = new Size(tabButtonWidth, tabButton.Size.Height);
- }
- }
}
/// <summary>
* limitations under the License.
*
*/
+using System;
using System.ComponentModel;
using System.Diagnostics.CodeAnalysis;
using Tizen.NUI.BaseComponents;
private bool styleApplied = false;
- private View topLine = null;
- private View bottomLine = null; // Visible only if TabButton is selected or pressed.
-
/// <summary>
/// Creates a new instance of TabButton.
/// </summary>
tabButtonStyle = viewStyle as TabButtonStyle;
- //Apply TopLine style.
- if (tabButtonStyle?.TopLine != null)
- {
- topLine?.ApplyStyle(tabButtonStyle.TopLine);
- }
-
- //Apply BottomLine style.
- if (tabButtonStyle?.BottomLine != null)
- {
- bottomLine?.ApplyStyle(tabButtonStyle.BottomLine);
- }
-
styleApplied = true;
//Calculate children's sizes and positions based on padding sizes.
if (type == DisposeTypes.Explicit)
{
- if (topLine != null)
- {
- Utility.Dispose(topLine);
- }
-
- if (bottomLine != null)
- {
- Utility.Dispose(bottomLine);
- }
+ // Dispose children explicitly
}
base.Dispose(type);
[EditorBrowsable(EditorBrowsableState.Never)]
protected override void LayoutItems()
{
- if ((Icon == null) && (TextLabel == null))
- {
- return;
- }
-
- // Icon is added in Button.LayoutItems().
- if ((Icon != null) && (Children.Contains(Icon) == false))
- {
- Add(Icon);
- }
-
- // TextLabel is added in Button.LayoutItems().
- if ((TextLabel != null) && (Children.Contains(TextLabel) == false))
- {
- Add(TextLabel);
- }
+ UpdateSizeAndSpacing();
}
private void Initialize()
{
- Layout = new AbsoluteLayout();
-
- topLine = new View(tabButtonStyle?.TopLine);
- Add(topLine);
+ Layout = new LinearLayout()
+ {
+ LinearOrientation = LinearLayout.Orientation.Vertical,
+ HorizontalAlignment = HorizontalAlignment.Center,
+ VerticalAlignment = VerticalAlignment.Center,
+ };
- bottomLine = new View(tabButtonStyle?.BottomLine);
- Add(bottomLine);
+ WidthSpecification = LayoutParamPolicies.MatchParent;
AccessibilityHighlightable = true;
}
return;
}
- if ((Icon == null) && (TextLabel == null))
+ bool isEmptyIcon = false;
+ bool isEmptyText = false;
+
+ if (String.IsNullOrEmpty(Icon.ResourceUrl))
{
- return;
+ isEmptyIcon = true;
}
- // FIXME: set Selector<Extents> to padding
- var padding = new Extents(40, 40, 24, 24);
- var iconPadding = IconPadding;
- var textPadding = TextPadding;
+ if (String.IsNullOrEmpty(TextLabel.Text))
+ {
+ isEmptyText = true;
+ }
- // Calculate size of TextLabel.
- if (TextLabel != null)
+ if (isEmptyIcon)
{
- // TODO: Other orientation cases are not implemented yet.
- if ((IconRelativeOrientation == IconOrientation.Left) || (IconRelativeOrientation == IconOrientation.Right))
+ if (Children.Contains(Icon))
{
- var naturalWidthSum = (ushort)padding?.Start + (ushort)padding?.End + iconPadding.Start + iconPadding.End + (float)Icon?.SizeWidth + TextLabel.GetNaturalSize().Width;
- var naturalWidthDiff = SizeWidth - naturalWidthSum;
-
- if (naturalWidthDiff > 0)
- {
- TextLabel.SizeWidth = TextLabel.GetNaturalSize().Width;
- }
- else
- {
- TextLabel.SizeWidth = SizeWidth - (ushort)padding?.Start - (ushort)padding?.End - iconPadding.Start - iconPadding.End - textPadding.Start - textPadding.End - (float)Icon?.SizeWidth;
- }
+ Remove(Icon);
}
}
+ else if (Children.Contains(Icon) == false)
+ {
+ Add(Icon);
+ }
- // Calculate positions of Icon and TextLabel.
- switch (IconRelativeOrientation)
+ if (isEmptyText)
{
- // TODO: Other orientation cases are not implemented yet.
- case IconOrientation.Left:
- if (LayoutDirection == ViewLayoutDirectionType.LTR)
- {
- if (Icon != null)
- {
- float iconX = 0;
- float iconY = (ushort)padding?.Top + iconPadding.Top;
-
- if (string.IsNullOrEmpty(TextLabel?.Text))
- {
- iconX = (SizeWidth - Icon.SizeWidth) / 2;
- }
- else
- {
- var widthSum = (ushort)padding?.Start + (ushort)padding?.End + iconPadding.Start + iconPadding.End + textPadding.Start + textPadding.End + Icon.SizeWidth + (float)TextLabel?.SizeWidth;
- var widthDiff = SizeWidth - widthSum;
-
- if (widthDiff > 0)
- {
- iconX = (ushort)padding?.Start + iconPadding.Start + (widthDiff / 2);
- }
- else
- {
- iconX = (ushort)padding?.Start + iconPadding.Start;
- }
- }
-
- Icon.Position = new Position(iconX, iconY);
- }
-
- if (TextLabel != null)
- {
- TextLabel.HorizontalAlignment = HorizontalAlignment.Begin;
-
- float textX = 0;
- float textY = 0;
-
- if (string.IsNullOrEmpty(Icon?.ResourceUrl))
- {
- textX = (SizeWidth - TextLabel.SizeWidth) / 2;
- textY = (ushort)padding?.Top + textPadding.Top;
- }
- else
- {
- textX = (float)Icon?.PositionX + (float)Icon?.SizeWidth;
- textY = (ushort)padding?.Top + textPadding.Top + (((float)Icon?.SizeHeight - TextLabel.SizeHeight) / 2);
- }
-
- TextLabel.Position = new Position(textX, textY);
- }
- }
- break;
- default:
- break;
+ if (Children.Contains(TextLabel))
+ {
+ Remove(TextLabel);
+ }
+ }
+ else if (Children.Contains(TextLabel) == false)
+ {
+ Add(TextLabel);
}
- padding?.Dispose();
+ // Icon and Text
+ if (!isEmptyIcon && !isEmptyText)
+ {
+ WidthSpecification = (int)tabButtonStyle.Size.Width;
+ HeightSpecification = (int)tabButtonStyle.Size.Height;
+ Padding = tabButtonStyle.Padding;
+ }
+ // Icon only
+ else if (!isEmptyIcon && isEmptyText)
+ {
+ WidthSpecification = (int)tabButtonStyle.SizeWithIconOnly.Width;
+ HeightSpecification = (int)tabButtonStyle.SizeWithIconOnly.Height;
+ Padding = tabButtonStyle.PaddingWithIconOnly;
+ Icon.WidthSpecification = (int)tabButtonStyle.IconSizeWithIconOnly.Width;
+ Icon.HeightSpecification = (int)tabButtonStyle.IconSizeWithIconOnly.Height;
+ }
+ // Text only
+ else if (isEmptyIcon && !isEmptyText)
+ {
+ WidthSpecification = (int)tabButtonStyle.SizeWithTextOnly.Width;
+ HeightSpecification = (int)tabButtonStyle.SizeWithTextOnly.Height;
+ Padding = tabButtonStyle.PaddingWithTextOnly;
+ Icon.WidthSpecification = (int)tabButtonStyle.Icon.Size.Width;
+ Icon.HeightSpecification = (int)tabButtonStyle.Icon.Size.Height;
+ }
+ // Nothing
+ else
+ {
+ WidthSpecification = (int)tabButtonStyle.Size.Width;
+ HeightSpecification = (int)tabButtonStyle.Size.Height;
+ Padding = tabButtonStyle.Padding;
+ }
}
}
}
WidthSpecification = LayoutParamPolicies.MatchParent;
HeightSpecification = LayoutParamPolicies.MatchParent;
- InitContent();
InitTabBar();
+ InitContent();
+
+ // To show TabBar's shadow TabBar is raised above Content.
+ TabBar.RaiseAbove(Content);
}
/// <inheritdoc/>
}
/// <summary>
- /// Gets or Sets the Line Style at the top of TabButton.
+ /// Gets or sets the size of a view with text only for the width, the height, and the depth.
/// </summary>
[EditorBrowsable(EditorBrowsableState.Never)]
- public ViewStyle TopLine { get; set; } = new ViewStyle();
+ public Size SizeWithTextOnly { get; set; } = new Size();
/// <summary>
- /// Gets or Sets the Line Style at the bottom of TabButton.
+ /// Gets or sets the size of a view with icon only for the width, the height, and the depth.
/// </summary>
[EditorBrowsable(EditorBrowsableState.Never)]
- public ViewStyle BottomLine { get; set; } = new ViewStyle();
+ 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.
+ /// </summary>
+ [EditorBrowsable(EditorBrowsableState.Never)]
+ public Extents PaddingWithIconOnly { get; set; } = new Extents();
+
+ /// <summary>
+ /// Gets or sets the size of icon with icon only for the width, the height, and the depth.
+ /// </summary>
+ [EditorBrowsable(EditorBrowsableState.Never)]
+ public Size IconSizeWithIconOnly { get; set; } = new Size();
/// <inheritdoc/>
[EditorBrowsable(EditorBrowsableState.Never)]
if (bindableObject is TabButtonStyle tabButtonStyle)
{
- TopLine.CopyFrom(tabButtonStyle.TopLine);
- BottomLine.CopyFrom(tabButtonStyle.BottomLine);
+ SizeWithTextOnly = new Size(tabButtonStyle.SizeWithTextOnly);
+ SizeWithIconOnly = new Size(tabButtonStyle.SizeWithIconOnly);
+ PaddingWithTextOnly = new Extents(tabButtonStyle.PaddingWithTextOnly);
+ PaddingWithIconOnly = new Extents(tabButtonStyle.PaddingWithIconOnly);
+ IconSizeWithIconOnly = new Size(tabButtonStyle.IconSizeWithIconOnly);
}
}
}
StartScrollOffset = new Size(0, 12),
});
+ // TabBar base style
+ theme.AddStyleWithoutClone("Tizen.NUI.Components.TabBar", new ViewStyle()
+ {
+ Size = new Size(-1, -2),
+ Margin = new Extents(16, 16, 0, 0),
+ Padding = new Extents(14, 14, 0, 0),
+ CornerRadius = new Vector4(12.0f, 12.0f, 12.0f, 12.0f),
+ CornerRadiusPolicy = VisualTransformPolicyType.Absolute,
+ BoxShadow = new Shadow(8.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 2.0f)),
+ BackgroundColor = new Color("#FAFAFA"),
+ });
+
// TabButton base style
theme.AddStyleWithoutClone("Tizen.NUI.Components.TabButton", new TabButtonStyle()
{
- Size = new Size(-1, 84),
+ Size = new Size(-1, 116),
+ SizeWithTextOnly = new Size(-1, 72),
+ 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),
CornerRadius = 0,
- BackgroundColor = Color.White,
+ IconSizeWithIconOnly = new Size(32, 32),
+ BackgroundColor = new Selector<Color>()
+ {
+ Normal = new Color("#FAFAFA"),
+ Selected = new Color("#FFE0CC"),
+ Pressed = new Color("#FFE0CC"),
+ Disabled = new Color("#FAFAFA"),
+ },
Text = new TextLabelStyle()
{
PixelSize = 28,
Size = new Size(-2, -2),
TextColor = new Selector<Color>()
{
- Normal = new Color("#000C2B"),
- Selected = new Color("#000C2B"),
- Pressed = new Color("#1473E6"),
- Disabled = new Color("#C3CAD2"),
+ Normal = new Color("#090E21"),
+ Selected = new Color("#FF6200"),
+ Pressed = new Color("#FF6200"),
+ Disabled = new Color("#CACACA"),
},
ThemeChangeSensitive = false,
},
Size = new Size(48, 48),
Color = new Selector<Color>()
{
- Normal = new Color("#000C2B"),
- Selected = new Color("#000C2B"),
- Pressed = new Color("#1473E6"),
- Disabled = new Color("#C3CAD2"),
- },
- },
- TopLine = new ViewStyle()
- {
- Size = new Size(-1, 1),
- BackgroundColor = new Selector<Color>()
- {
- Normal = new Color("#000C2B"),
- Selected = new Color("#000C2B"),
- Pressed = new Color("#1473E6"),
- Disabled = new Color("#C3CAD2"),
- },
- },
- BottomLine = new ViewStyle()
- {
- Size = new Size(-1, 8),
- Position = new Position(0, 76), // 84 - 8
- BackgroundColor = new Selector<Color>()
- {
- Normal = Color.Transparent,
- Selected = new Color("#000C2B"),
- Pressed = new Color("#1473E6"),
- Disabled = Color.Transparent,
+ Normal = new Color("#090E21"),
+ Selected = new Color("#FF6200"),
+ Pressed = new Color("#FF6200"),
+ Disabled = new Color("#CACACA"),
},
},
});
{
public class TabViewSample : IExample
{
+ private Window window;
+ private Navigator navigator;
+ private ContentPage contentPage;
private TabView tabView;
private TabButton tabButton, tabButton2, tabButton3;
private View content, content2, content3;
public void Activate()
{
- var window = NUIApplication.GetDefaultWindow();
+ window = NUIApplication.GetDefaultWindow();
+
+ navigator = window.GetDefaultNavigator();
+
+ contentPage = new ContentPage()
+ {
+ AppBar = new AppBar()
+ {
+ Title = "TabView Sample",
+ AutoNavigationContent = false,
+ },
+ };
tabView = new TabView()
{
tabView.AddTab(tabButton3, content3);
tabCount++;
- window.Add(tabView);
+ contentPage.Content = tabView;
+
+ navigator.Push(contentPage);
addBtn = new Button()
{
addBtn.Clicked += (object sender, ClickedEventArgs args) =>
{
- if (tabCount < 3)
+ if (tabCount < 4)
{
tabCount++;
public void Deactivate()
{
- var window = NUIApplication.GetDefaultWindow();
- if (tabView != null)
+ if (contentPage != null)
{
- window.Remove(tabView);
- tabView.Dispose();
+ navigator?.Remove(contentPage);
+ contentPage.Dispose();
+ contentPage = null;
tabView = null;
}
if (addBtn != null)
{
- window.Remove(addBtn);
+ window?.Remove(addBtn);
addBtn.Dispose();
addBtn = null;
}
if (removeBtn != null)
{
- window.Remove(removeBtn);
+ window?.Remove(removeBtn);
removeBtn.Dispose();
removeBtn = null;
}
+
+ navigator = null;
+ window = null;
}
}
}
projects / platform / core / csapi / tizenfx.git / commitdiff