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