src/Tizen.NUI.Components/Controls/Tab.cs

   1 /*
   2  * Copyright(c) 2019 Samsung Electronics Co., Ltd.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13  * See the License for the specific language governing permissions and
  14  * limitations under the License.
  15  *
  16  */
  17 using System;
  18 using System.Collections.Generic;
  19 using Tizen.NUI.BaseComponents;
  20 using System.ComponentModel;
  21
  22 namespace Tizen.NUI.Components
  23 {
  24     /// <summary>
  25     /// Tab is one kind of common component, it can be used as menu label.
  26     /// User can handle Tab by adding/inserting/deleting TabItem.
  27     /// </summary>
  28     /// <since_tizen> 6 </since_tizen>
  29     public class Tab : Control
  30     {
  31         private const int aniTime = 100; // will be defined in const file later
  32         private List<TabItem> itemList = new List<TabItem>();
  33         private int curIndex = 0;
  34         private View underline = null;
  35         private Animation underlineAni = null;
  36         private bool isNeedAnimation = false;
  37         private Extents space;
  38
  39         /// <summary>
  40         /// Creates a new instance of a Tab.
  41         /// </summary>
  42         /// <since_tizen> 6 </since_tizen>
  43         public Tab() : base()
  44         {
  45             Initialize();
  46         }
  47
  48         /// <summary>
  49         /// Creates a new instance of a Tab with style.
  50         /// </summary>
  51         /// <param name="style">Create Tab by special style defined in UX.</param>
  52         /// <since_tizen> 6 </since_tizen>
  53         /// This will be public opened in tizen_5.5 after ACR done. Before ACR, need to be hidden as inhouse API.
  54         [EditorBrowsable(EditorBrowsableState.Never)]
  55         public Tab(string style) : base(style)
  56         {
  57             Initialize();
  58         }
  59
  60         /// <summary>
  61         /// Creates a new instance of a Tab with style.
  62         /// </summary>
  63         /// <param name="style">Create Tab by style customized by user.</param>
  64         /// <since_tizen> 6 </since_tizen>
  65         /// This will be public opened in tizen_5.5 after ACR done. Before ACR, need to be hidden as inhouse API.
  66         [EditorBrowsable(EditorBrowsableState.Never)]
  67         public Tab(TabStyle style) : base(style)
  68         {
  69             Initialize();
  70         }
  71
  72         /// <summary>
  73         /// An event for the item changed signal which can be used to subscribe or unsubscribe the event handler provided by the user.<br />
  74         /// </summary>
  75         /// <since_tizen> 6 </since_tizen>
  76         public event EventHandler<ItemChangedEventArgs> ItemChangedEvent;
  77
  78         /// This will be public opened in tizen_6.0 after ACR done. Before ACR, need to be hidden as inhouse API.
  79         [EditorBrowsable(EditorBrowsableState.Never)]
  80         public new TabStyle Style => ViewStyle as TabStyle;
  81
  82         /// <summary>
  83         /// Selected item's index in Tab.
  84         /// </summary>
  85         /// <since_tizen> 6 </since_tizen>
  86         public int SelectedItemIndex
  87         {
  88             get
  89             {
  90                 return curIndex;
  91             }
  92             set
  93             {
  94                 if (value < itemList.Count)
  95                 {
  96                     UpdateSelectedItem(itemList[value]);
  97                 }
  98             }
  99         }
 100
 101         /// <summary>
 102         /// Flag to decide if TabItem is adjusted by text's natural width.
 103         /// If true, TabItem's width will be equal as text's natural width, if false, it will be decided by Tab's width and tab item count.
 104         /// </summary>
 105         /// <since_tizen> 6 </since_tizen>
 106         public bool UseTextNaturalSize
 107         {
 108             get
 109             {
 110                 return Style?.UseTextNaturalSize ?? false;
 111             }
 112             set
 113             {
 114                 if (null != Style)
 115                 {
 116                     Style.UseTextNaturalSize = value;
 117                     RelayoutRequest();
 118                 }
 119             }
 120         }
 121
 122         /// <summary>
 123         /// Gap between items.
 124         /// </summary>
 125         /// <since_tizen> 6 </since_tizen>
 126         public int ItemSpace
 127         {
 128             get
 129             {
 130                 return Style?.ItemSpace ?? 0;
 131             }
 132             set
 133             {
 134                 if (null != Style)
 135                 {
 136                     Style.ItemSpace = value;
 137                     RelayoutRequest();
 138                 }
 139             }
 140         }
 141
 142         /// <summary>
 143         /// Space in Tab. Sequence as Left, Right, Top, Bottom
 144         /// </summary>
 145         /// <since_tizen> 6 </since_tizen>
 146         public Extents Space
 147         {
 148             get
 149             {
 150                 return ItemPadding;
 151             }
 152             set
 153             {
 154                 ItemPadding = value;
 155             }
 156         }
 157
 158         /// <summary>
 159         /// Item paddings in Tab. Sequence as Left, Right, Top, Bottom
 160         /// </summary>
 161         /// <since_tizen> 6 </since_tizen>
 162         /// This will be public opened in tizen_6.0 after ACR done. Before ACR, need to be hidden as inhouse API.
 163         [EditorBrowsable(EditorBrowsableState.Never)]
 164         public Extents ItemPadding
 165         {
 166             get
 167             {
 168                 return space;
 169             }
 170             set
 171             {
 172                 if(null != value && null != Style?.ItemPadding)
 173                 {
 174                     Style.ItemPadding.CopyFrom(value);
 175
 176                     if (null == space)
 177                     {
 178                         space = new Extents((ushort start, ushort end, ushort top, ushort bottom) =>
 179                         {
 180                             Style.ItemPadding.Start = start;
 181                             Style.ItemPadding.End = end;
 182                             Style.ItemPadding.Top = top;
 183                             Style.ItemPadding.Bottom = bottom;
 184                             RelayoutRequest();
 185                         }, value.Start, value.End, value.Top, value.Bottom);
 186                     }
 187                     else
 188                     {
 189                         space.CopyFrom(value);
 190                     }
 191
 192                     RelayoutRequest();
 193                 }
 194             }
 195         }
 196
 197         /// <summary>
 198         /// UnderLine view's size in Tab.
 199         /// </summary>
 200         /// <since_tizen> 6 </since_tizen>
 201         public Size UnderLineSize
 202         {
 203             get
 204             {
 205                 return Style?.UnderLine?.Size;
 206             }
 207             set
 208             {
 209                 if (null != Style?.UnderLine)
 210                 {
 211                     Style.UnderLine.Size = value;
 212                 }
 213             }
 214         }
 215
 216         /// <summary>
 217         /// UnderLine view's background in Tab.
 218         /// </summary>
 219         /// <since_tizen> 6 </since_tizen>
 220         public Color UnderLineBackgroundColor
 221         {
 222             get
 223             {
 224                 return Style?.UnderLine?.BackgroundColor?.All;
 225             }
 226             set
 227             {
 228                 if (null != Style?.UnderLine)
 229                 {
 230                     Style.UnderLine.BackgroundColor = value;
 231                 }
 232             }
 233         }
 234
 235         /// <summary>
 236         /// Text point size in Tab.
 237         /// </summary>
 238         /// <since_tizen> 6 </since_tizen>
 239         public float PointSize
 240         {
 241             get
 242             {
 243                 return Style?.Text?.PointSize?.All ?? 0;
 244             }
 245             set
 246             {
 247                 if (null != Style?.Text)
 248                 {
 249                     Style.Text.PointSize = value;
 250                 }
 251             }
 252         }
 253
 254         /// <summary>
 255         /// Text font family in Tab.
 256         /// </summary>
 257         /// <since_tizen> 6 </since_tizen>
 258         public string FontFamily
 259         {
 260             get
 261             {
 262                 return Style?.Text?.FontFamily?.All;
 263             }
 264             set
 265             {
 266                 if (null != Style?.Text)
 267                 {
 268                     Style.Text.FontFamily = value;
 269                 }
 270             }
 271         }
 272
 273         /// <summary>
 274         /// Text color in Tab.
 275         /// </summary>
 276         /// <since_tizen> 6 </since_tizen>
 277         public Color TextColor
 278         {
 279             get
 280             {
 281                 return Style?.Text?.TextColor?.All;
 282             }
 283             set
 284             {
 285                 if (null != Style?.Text)
 286                 {
 287                     Style.Text.TextColor = value;
 288                 }
 289             }
 290         }
 291
 292         private ColorSelector textColorSelector = new ColorSelector();
 293         /// <summary>
 294         /// Text color selector in Tab.
 295         /// </summary>
 296         /// <since_tizen> 6 </since_tizen>
 297         public ColorSelector TextColorSelector
 298         {
 299             get
 300             {
 301                 return textColorSelector;
 302             }
 303             set
 304             {
 305                 textColorSelector.Clone(value);
 306             }
 307         }
 308
 309         /// <summary>
 310         /// Add tab item by item data. The added item will be added to end of all items automatically.
 311         /// </summary>
 312         /// <param name="itemData">Item data which will apply to tab item view.</param>
 313         /// <since_tizen> 6 </since_tizen>
 314         public void AddItem(TabItemData itemData)
 315         {
 316             AddItemByIndex(itemData, itemList.Count);
 317         }
 318
 319         /// <summary>
 320         /// Insert tab item by item data. The inserted item will be added to the special position by index automatically.
 321         /// </summary>
 322         /// <param name="itemData">Item data which will apply to tab item view.</param>
 323         /// <param name="index">Position index where will be inserted.</param>
 324         /// <since_tizen> 6 </since_tizen>
 325         public void InsertItem(TabItemData itemData, int index)
 326         {
 327             AddItemByIndex(itemData, index);
 328         }
 329
 330         /// <summary>
 331         /// Delete tab item by index.
 332         /// </summary>
 333         /// <param name="itemIndex">Position index where will be deleted.</param>
 334         /// <since_tizen> 6 </since_tizen>
 335         public void DeleteItem(int itemIndex)
 336         {
 337             if(itemList == null || itemIndex < 0 || itemIndex >= itemList.Count)
 338             {
 339                 return;
 340             }
 341
 342             if (curIndex > itemIndex || (curIndex == itemIndex && itemIndex == itemList.Count - 1))
 343             {
 344                 curIndex--;
 345             }
 346
 347             Remove(itemList[itemIndex]);
 348             itemList[itemIndex].Dispose();
 349             itemList.RemoveAt(itemIndex);
 350
 351             UpdateItems();
 352         }
 353
 354         /// This will be public opened in tizen_5.5 after ACR done. Before ACR, need to be hidden as inhouse API.
 355         [EditorBrowsable(EditorBrowsableState.Never)]
 356         public override void ApplyStyle(ViewStyle viewStyle)
 357         {
 358             base.ApplyStyle(viewStyle);
 359
 360             TabStyle tabStyle = viewStyle as TabStyle;
 361
 362             if (null != tabStyle)
 363             {
 364                 if (null == underline)
 365                 {
 366                     underline = new View()
 367                     {
 368                         PositionUsesPivotPoint = true,
 369                         ParentOrigin = Tizen.NUI.ParentOrigin.BottomLeft,
 370                         PivotPoint = Tizen.NUI.PivotPoint.BottomLeft,
 371                     };
 372                     Add(underline);
 373                     CreateUnderLineAnimation();
 374                 }
 375
 376                 underline.ApplyStyle(Style.UnderLine);
 377             }
 378         }
 379
 380         /// <summary>
 381         /// Dispose Tab and all children on it.
 382         /// </summary>
 383         /// <param name="type">Dispose type.</param>
 384         /// <since_tizen> 6 </since_tizen>
 385         protected override void Dispose(DisposeTypes type)
 386         {
 387             if (disposed)
 388             {
 389                 return;
 390             }
 391
 392             if (type == DisposeTypes.Explicit)
 393             {
 394                 if(underlineAni != null)
 395                 {
 396                     if(underlineAni.State == Animation.States.Playing)
 397                     {
 398                         underlineAni.Stop();
 399                     }
 400                     underlineAni.Dispose();
 401                     underlineAni = null;
 402                 }
 403                 Utility.Dispose(underline);
 404                 if(itemList != null)
 405                 {
 406                     for(int i = 0; i < itemList.Count; i++)
 407                     {
 408                         Remove(itemList[i]);
 409                         itemList[i].Dispose();
 410                         itemList[i] = null;
 411                     }
 412                     itemList.Clear();
 413                     itemList = null;
 414                 }
 415             }
 416
 417             base.Dispose(type);
 418         }
 419
 420         /// <summary>
 421         /// Update Tab by attributes.
 422         /// </summary>
 423         /// <since_tizen> 6 </since_tizen>
 424         /// This will be public opened in tizen_5.5 after ACR done. Before ACR, need to be hidden as inhouse API.
 425         [EditorBrowsable(EditorBrowsableState.Never)]
 426         protected override void OnUpdate()
 427         {
 428             LayoutChild();
 429         }
 430
 431         /// <summary>
 432         /// Get Tab attribues.
 433         /// </summary>
 434         /// <since_tizen> 6 </since_tizen>
 435         /// This will be public opened in tizen_5.5 after ACR done. Before ACR, need to be hidden as inhouse API.
 436         [EditorBrowsable(EditorBrowsableState.Never)]
 437         protected override ViewStyle GetViewStyle()
 438         {
 439             return new TabStyle();
 440         }
 441
 442         /// <summary>
 443         /// Theme change callback when theme is changed, this callback will be trigger.
 444         /// </summary>
 445         /// <since_tizen> 6 </since_tizen>
 446         /// This will be public opened in tizen_5.5 after ACR done. Before ACR, need to be hidden as inhouse API.
 447         [EditorBrowsable(EditorBrowsableState.Never)]
 448         protected override void OnThemeChangedEvent(object sender, StyleManager.ThemeChangeEventArgs e)
 449         {
 450             TabStyle tempAttributes = StyleManager.Instance.GetViewStyle(style) as TabStyle;
 451             if (tempAttributes != null)
 452             {
 453                 Style.CopyFrom(tempAttributes);
 454             }
 455         }
 456
 457         /// <summary>
 458         /// Layout child in Tab and it can be override by user.
 459         /// </summary>
 460         /// <since_tizen> 6 </since_tizen>
 461         /// This will be public opened in tizen_5.5 after ACR done. Before ACR, need to be hidden as inhouse API.
 462         [EditorBrowsable(EditorBrowsableState.Never)]
 463         protected virtual void LayoutChild()
 464         {
 465             if (itemList == null)
 466             {
 467                 return;
 468             }
 469
 470             int totalNum = itemList.Count;
 471             if (totalNum == 0)
 472             {
 473                 return;
 474             }
 475
 476             int preX = (int)Style.ItemPadding.Start;
 477             int preW = 0;
 478             int itemSpace = Style.ItemSpace;
 479
 480             if (LayoutDirection == ViewLayoutDirectionType.LTR)
 481             {
 482                 if (Style.UseTextNaturalSize == true)
 483                 {
 484                     for (int i = 0; i < totalNum; i++)
 485                     {
 486                         preW = (itemList[i].TextItem.NaturalSize2D != null ? itemList[i].TextItem.NaturalSize2D.Width : 0);
 487                         itemList[i].Position2D.X = preX;
 488                         itemList[i].Size2D.Width = preW;
 489                         preX = itemList[i].Position2D.X + preW + itemSpace;
 490                         itemList[i].Index = i;
 491                     }
 492                 }
 493                 else
 494                 {
 495                     preW = (Size2D.Width - (int)Style.ItemPadding.Start - (int)Style.ItemPadding.End) / totalNum;
 496                     for (int i = 0; i < totalNum; i++)
 497                     {
 498                         itemList[i].Position2D.X = preX;
 499                         itemList[i].Size2D.Width = preW;
 500                         preX = itemList[i].Position2D.X + preW + itemSpace;
 501                         itemList[i].Index = i;
 502                     }
 503                 }
 504             }
 505             else
 506             {
 507                 preX = (int)Style.ItemPadding.End;
 508                 if (Style.UseTextNaturalSize == true)
 509                 {
 510                     int w = Size2D.Width;
 511                     for (int i = 0; i < totalNum; i++)
 512                     {
 513                         preW = (itemList[i].NaturalSize2D != null ? itemList[i].NaturalSize2D.Width : 0);
 514                         itemList[i].Position2D.X = w - preW - preX;
 515                         itemList[i].Size2D.Width = preW;
 516                         preX = w - itemList[i].Position2D.X + itemSpace;
 517                         itemList[i].Index = i;
 518                     }
 519                 }
 520                 else
 521                 {
 522                     preW = (Size2D.Width - (int)Style.ItemPadding.Start - (int)Style.ItemPadding.End) / totalNum;
 523                     for (int i = totalNum - 1; i >= 0; i--)
 524                     {
 525                         itemList[i].Position2D.X = preX;
 526                         itemList[i].Size2D.Width = preW;
 527                         preX = itemList[i].Position2D.X + preW + itemSpace;
 528                         itemList[i].Index = i;
 529                     }
 530                 }
 531             }
 532             UpdateUnderLinePos();
 533         }
 534
 535         private void Initialize()
 536         {
 537             LayoutDirectionChanged += OnLayoutDirectionChanged;
 538         }
 539
 540         private void OnLayoutDirectionChanged(object sender, LayoutDirectionChangedEventArgs e)
 541         {
 542             LayoutChild();
 543         }
 544
 545         private void AddItemByIndex(TabItemData itemData, int index)
 546         {
 547             int h = 0;
 548             int topSpace = (int)Style.ItemPadding.Top;
 549             if (Style.UnderLine != null && Style.UnderLine.Size != null)
 550             {
 551                 h = (int)Style.UnderLine.Size.Height;
 552             }
 553
 554             Tab.TabItem item = new TabItem();
 555             item.TextItem.ApplyStyle(Style.Text);
 556
 557             item.Text = itemData.Text;
 558             item.Size2D.Height = Size2D.Height - h - topSpace;
 559             item.Position2D.Y = topSpace;
 560             item.TouchEvent += ItemTouchEvent;
 561             Add(item);
 562
 563             if (index >= itemList.Count)
 564             {
 565                 itemList.Add(item);
 566             }
 567             else
 568             {
 569                 itemList.Insert(index, item);
 570             }
 571
 572             UpdateItems();
 573         }
 574
 575         private void UpdateItems()
 576         {
 577             LayoutChild();
 578             if (itemList != null && curIndex >= 0 && curIndex < itemList.Count)
 579             {
 580                 itemList[curIndex].ControlState = ControlStates.Selected;
 581                 UpdateUnderLinePos();
 582             }
 583             else
 584             {
 585                 if (underline != null)
 586                 {
 587                     underline.Hide();
 588                 }
 589             }
 590         }
 591
 592         private void CreateUnderLineAttributes()
 593         {
 594             if (Style.UnderLine == null)
 595             {
 596                 Style.UnderLine = new ViewStyle()
 597                 {
 598                     PositionUsesPivotPoint = true,
 599                     ParentOrigin = Tizen.NUI.ParentOrigin.BottomLeft,
 600                     PivotPoint = Tizen.NUI.PivotPoint.BottomLeft,
 601                 };
 602             }
 603         }
 604
 605         private void CreateUnderLineAnimation()
 606         {
 607             if (underlineAni == null)
 608             {
 609                 underlineAni = new Animation(aniTime);
 610             }
 611         }
 612
 613         private void UpdateUnderLinePos()
 614         {
 615             if (underline == null || Style.UnderLine == null || Style.UnderLine.Size == null
 616                 || itemList == null || itemList.Count <= 0)
 617             {
 618                 return;
 619             }
 620
 621             Style.UnderLine.Size.Width = itemList[curIndex].Size2D.Width;
 622
 623             underline.Size2D = new Size2D(itemList[curIndex].Size2D.Width, (int)Style.UnderLine.Size.Height);
 624             underline.BackgroundColor = Style.UnderLine.BackgroundColor.All;
 625             if (isNeedAnimation)
 626             {
 627                 CreateUnderLineAnimation();
 628                 if (underlineAni.State == Animation.States.Playing)
 629                 {
 630                     underlineAni.Stop();
 631                 }
 632                 underlineAni.Clear();
 633                 underlineAni.AnimateTo(underline, "PositionX", itemList[curIndex].Position2D.X);
 634                 underlineAni.Play();
 635             }
 636             else
 637             {
 638                 underline.Position2D.X = itemList[curIndex].Position2D.X;
 639                 isNeedAnimation = true;
 640             }
 641
 642             underline.Show();
 643         }
 644
 645         private void UpdateSelectedItem(TabItem item)
 646         {
 647             if(item == null || curIndex == item.Index)
 648             {
 649                 return;
 650             }
 651
 652             ItemChangedEventArgs e = new ItemChangedEventArgs
 653             {
 654                 PreviousIndex = curIndex,
 655                 CurrentIndex = item.Index
 656             };
 657             ItemChangedEvent?.Invoke(this, e);
 658
 659             itemList[curIndex].ControlState = ControlStates.Normal;
 660             curIndex = item.Index;
 661             itemList[curIndex].ControlState = ControlStates.Selected;
 662
 663             UpdateUnderLinePos();
 664         }
 665
 666         private bool ItemTouchEvent(object source, TouchEventArgs e)
 667         {
 668             TabItem item = source as TabItem;
 669             if(item == null)
 670             {
 671                 return false;
 672             }
 673             PointStateType state = e.Touch.GetState(0);
 674             if (state == PointStateType.Up)
 675             {
 676                 UpdateSelectedItem(item);
 677             }
 678
 679             return true;
 680         }
 681
 682         internal class TabItem : View
 683         {
 684             public TabItem() : base()
 685             {
 686                 TextItem = new TextLabel()
 687                 {
 688                     ParentOrigin = Tizen.NUI.ParentOrigin.Center,
 689                     PivotPoint = Tizen.NUI.PivotPoint.Center,
 690                     PositionUsesPivotPoint = true,
 691                     WidthResizePolicy = ResizePolicyType.FillToParent,
 692                     HeightResizePolicy = ResizePolicyType.FillToParent,
 693                     HorizontalAlignment = HorizontalAlignment.Center,
 694                     VerticalAlignment = VerticalAlignment.Center
 695                 };
 696                 Add(TextItem);
 697             }
 698
 699             internal int Index
 700             {
 701                 get;
 702                 set;
 703             }
 704
 705             public string Text
 706             {
 707                 get
 708                 {
 709                     return TextItem.Text;
 710                 }
 711                 set
 712                 {
 713                     TextItem.Text = value;
 714                 }
 715             }
 716
 717             internal TextLabel TextItem
 718             {
 719                 get;
 720                 set;
 721             }
 722         }
 723
 724         /// <summary>
 725         /// TabItemData is a class to record all data which will be applied to Tab item.
 726         /// </summary>
 727         /// <since_tizen> 6 </since_tizen>
 728         public class TabItemData
 729         {
 730             /// <summary>
 731             /// Text string in tab item view.
 732             /// </summary>
 733             /// <since_tizen> 6 </since_tizen>
 734             public string Text
 735             {
 736                 get;
 737                 set;
 738             }
 739         }
 740
 741         /// <summary>
 742         /// ItemChangedEventArgs is a class to record item change event arguments which will sent to user.
 743         /// </summary>
 744         /// <since_tizen> 6 </since_tizen>
 745         public class ItemChangedEventArgs : EventArgs
 746         {
 747             /// <summary> Previous selected index of Tab </summary>
 748             /// <since_tizen> 6 </since_tizen>
 749             public int PreviousIndex;
 750             /// <summary> Current selected index of Tab </summary>
 751             /// <since_tizen> 6 </since_tizen>
 752             public int CurrentIndex;
 753         }
 754     }
 755 }