B4A Library [B4X] [XUI] AS SegmentedTab

New year, new ASViews :)

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee. :)
B4j: jXUI,JavaObject
B4a: XUi,JavaObject
B4i: iXUI
Screenshot_20210110-184421.jpg
ezgif.com-resize.gif

IMG_1881.jpg
IMG_1882.jpg

NEW PaddingSelectionPanel - Picture Value: 5
IMG_7426.jpg

NEW ShowSeperators
IMG_7732.jpg

Custom Tab Width Example
AS SegmentedTab Custom Tab Width.gif

ASSegmentedTab
Author: Alexander Stolte
Version: 1.11

  • ASSegmentedTab
    • Events:
      • TabChanged (index As Int)
    • Fields:
      • mAutoDecreaseTextSize As Boolean
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddTab (Text As String, icon As B4XBitmap) As String
      • Class_Globals As String
      • CreateASSegmentedTab_ItemTextProperties (TextColor As Int, TextFont As B4XFont, TextAlignment_Vertical As String, TextAlignment_Horizontal As String, BackgroundColor As Int) As ASSegmentedTab_ItemTextProperties
      • CreateASSegmentedTab_SeperatorProperties (Color As Int, Width As Float, HeightPercentage As Int, CornerRadius As Float) As ASSegmentedTab_SeperatorProperties
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • FontToBitmap (text As String, IsMaterialIcons As Boolean, FontSize As Float, color As Int) As B4XBitmap
      • getAutoDecreaseTextSize As Boolean
        The text size is automatically adjusted to the space, if the text should not fit on one line.
      • getBackgroundPanel As B4XView
        the child panel of mBase
      • getBase As B4XView
      • getIndex As Int
      • getItemTextProperties As ASSegmentedTab_ItemTextProperties
        change the properties before you add atab, then this settings will be change the on the next added tab
        <code>ASSegmentedTab1.ItemTextProperties.TextFont = xui.CreateDefaultBoldFont(15)</code>
      • getSelectionPanel As B4XView
        gets the selection panel - the panel that highlight the selected tab
      • getSeperatorProperties As ASSegmentedTab_SeperatorProperties
      • getSeperatorsHeight As Float
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • SelectedIndex (index As Int, Duration As Int) As String
      • setAutoDecreaseTextSize (DecreaseTextSize As Boolean) As String
      • setCornerRadiusBackground (corner_radius As Float) As String
        changes the CornerRadius of the view
      • setCornerRadiusSelectionPanel (corner_radius As Float) As String
        changes the CornerRadius of the selector
      • setImageHeight (height As Float) As String
      • setIndex (Index As Int) As String
        get or sets the index - sets the index without animation
      • setPaddingSelectionPanel (padding As Float) As String
        set a distance from the corners for the selector
      • setShowSeperators (visible As Boolean) As String
      • UpdateSeperators As String
    • Properties:
      • AutoDecreaseTextSize As Boolean
        The text size is automatically adjusted to the space, if the text should not fit on one line.
      • BackgroundPanel As B4XView [read only]
        the child panel of mBase
      • Base As B4XView [read only]
      • CornerRadiusBackground
        changes the CornerRadius of the view
      • CornerRadiusSelectionPanel
        changes the CornerRadius of the selector
      • ImageHeight
      • Index As Int
        get or sets the index - sets the index without animation
      • ItemTextProperties As ASSegmentedTab_ItemTextProperties [read only]
        change the properties before you add atab, then this settings will be change the on the next added tab
        <code>ASSegmentedTab1.ItemTextProperties.TextFont = xui.CreateDefaultBoldFont(15)</code>
      • PaddingSelectionPanel
        set a distance from the corners for the selector
      • SelectionPanel As B4XView [read only]
        gets the selection panel - the panel that highlight the selected tab
      • SeperatorProperties As ASSegmentedTab_SeperatorProperties [read only]
      • SeperatorsHeight As Float [read only]
      • ShowSeperators
  • ASSegmentedTab_ItemTextProperties
    • Fields:
      • BackgroundColor As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextAlignment_Horizontal As String
      • TextAlignment_Vertical As String
      • TextColor As Int
      • TextFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASSegmentedTab_SeperatorProperties
    • Fields:
      • Color As Int
      • CornerRadius As Float
      • HeightPercentage As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Width As Float
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
  • 1.01
    • BugFix the selected tab is now keeping if the view is resizing
  • 1.02
    • Adds getSelectionPanel - gets the selection panel - the panel that highlight a tab on click
      • this is now possible:
      • IMG_1881.jpg
      • IMG_1882.jpg
    • Adds getBackgroundPanel - the child panel of mBase
    • TabChanged is now only triggered on a new tab, if you click on the same tab, nothing happens
  • 1.03
    • Adds getItemTextProperties - change the properties before you add atab, then this settings will be change the on the next added tab
      • now you can add Material- or FontAwesome-Icons on the Text parameter
  • 1.04 (read more about this update)
    • B4A and B4J - Corner Radius Fix
    • Add DesignerProperty CornerRadiusBackground - changes the CornerRadius of the view
    • Add DesignerProperty CornerRadiusSelectionPanel - changes the CornerRadius of the selector
    • Add DesignerProperty PaddingSelectionPanel - set a distance from the corners for the selector
      • IMG_7426.jpg
  • 1.05 (read more about this update)
    • Add Seperators - displays seperator items between non selected tabs
      • Add Designer Property "ShowSeperators" - default: False
      • Add UpdateSeperators - commit style changes
      • Add get SeperatorProperties - change the properties and call UpdateSeperators
      • IMG_7732.jpg
  • 1.06 (read more about this update)
    • Performance Improvements
      • Seperators only added if ShowSeperators = True
        • If you set the ShowSeperators = False then the seperators will be removed and vice versa
    • Seperators - Add HeightPercentage - default:50% - 50% from the view height
      • ASSegmentedTab1.SeperatorProperties.HeightPercentage = 50
    • Seperators - Add CornerRadius - default:0 - set the corner radius of the seperators
      • ASSegmentedTab2.SeperatorProperties.CornerRadius = ASSegmentedTab2.SeperatorProperties.Width/2'round seperators
    • Add get SeperatorProperties - gets the seperators height
    • B4J and B4I Resize BugFixes
    • Add set ImageHeight - sets the image Height/Width
  • 1.07
    • BugFix - SelectedIndex the index was not set
    • Add set Index - change the index without animation, do the same as SelectedIndex(1,0)
  • 1.08
    • BugFix - get Index
  • 1.09
    • BugFix - The new index at getIndex was assigned only after the TabChanged event
  • 1.10
    • BugFix - SelectedIndex the PaddingSelectionPanel is now observed with
  • 1.11 (read more about this update)
    • Add get and set AutoDecreaseTextSize - The text size is automatically adjusted to the space, if the text should not fit on one line
  • 1.12
    • Add GetTab - Gets the tab text, icon and the text properties
    • Add RefreshTab - If you change something on the tab, then call this
  • 1.13
    • Add Designer Porperty TabBackgroundColor
    • Add Designer Porperty SelectionColor
    • Add Designer Porperty SeperatorColor
    • Add Designer Porperty TextColor
  • 1.14
    • Designer Properties are now converted into dip
  • 1.15 (read more)
    • Add AddTab2
    • Add GetValue
    • Add Value to Type ASSegmentedTab_Tab
  • 1.16
    • Add Designer Property SelectionTextColor
    • Add SelectionTextColor to Type ASSegmentedTab_ItemTextProperties
  • 1.17
    • BugFix
  • 1.18
    • Add get Size - Number of tabs
  • 1.19 (read more)
    • Add AddTabAdvanced - Add a tab with the ASSegmentedTab_Tab type
    • Add Width to the ASSegmentedTab_Tab type
      • It's a optional tab property
      • If 0, then the width of the tab is calculated automatically
      • Default: 0
  • 1.20
    • B4J BugFix
Have Fun :)
 

Attachments

  • AS SegmentedTab Example.zip
    178.2 KB · Views: 751
  • 1.05 ASSegmentedTab.b4xlib
    3.6 KB · Views: 607
  • ASSegmentedTab.b4xlib
    6.5 KB · Views: 72
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.15
    • Add AddTab2
    • Add GetValue
    • Add Value to Type ASSegmentedTab_Tab
Examples
B4X:
ASSegmentedTab1.AddTab2("Option 1",Null,"Value1")
ASSegmentedTab1.AddTab2("Option 2",Null,"Value2")
ASSegmentedTab1.AddTab2("Option 3",Null,"Value3")
B4X:
ASSegmentedTab1.GetValue(0)
 

Rubsanpe

Active Member
Licensed User
Hello CreateASSegmentedTab_ItemTextProperties documentation needs to be updated with the new SelectionTextColor parameter.

Rubén
 

Rubsanpe

Active Member
Licensed User
Thank you. I was talking about the first post documentation. SelectionTextColor parameter is not present.

Rubén
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.19
    • Add AddTabAdvanced - Add a tab with the ASSegmentedTab_Tab type
    • Add Width to the ASSegmentedTab_Tab type
      • It's a optional tab property
      • If 0, then the width of the tab is calculated automatically
      • Default: 0
B4X:
    Dim Tab1 As ASSegmentedTab_Tab
    Tab1.Initialize
    Tab1.Icon = ASSegmentedTab3.FontToBitmap(Chr(0xE068),True,15,xui.Color_White)
    Tab1.Width = 40dip
    ASSegmentedTab3.AddTabAdvanced(Tab1)

    ASSegmentedTab3.AddTab("Inizio",Null)
    ASSegmentedTab3.AddTab("Fine Prova",Null)
AS SegmentedTab Custom Tab Width.gif
 
Top