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. :)
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

ASSegmentedTab
Author: Alexander Stolte
Version: 1.05

  • ASSegmentedTab
    • Events:
      • TabChanged (index As Int)
    • Fields:
      • 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) 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
      • 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
      • 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
      • 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
      • 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:
      • 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
      • Index As Int [read only]
      • 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]
      • 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
      • 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
Have Fun :)
 

Attachments

  • AS SegmentedTab Example.zip
    178.2 KB · Views: 137
  • 1.05 ASSegmentedTab.b4xlib
    3.6 KB · Views: 57
  • ASSegmentedTab.b4xlib
    4 KB · Views: 62
Last edited:

Alexander Stolte

Expert
Licensed User
i will be much more thankful to you if you go through it and suggest or make it scrollable,
but then you don't learn it.
  1. Put the ASSegmentedTab to a own form
  2. add a xCustomListView under the ACToolBarLight
  3. use xCustomListView instead of "ListView", i dont know, how to add a panel to a "ListView"
  4. create a new panel
    1. B4X:
      Dim xpnl_seg_Tab_background As B4XView = xui.CreatePanel("")
  5. set a larger width than your ASSegmentedTab width is
    1. B4X:
      xpnl_seg_Tab_background.SetLayoutAnimated(0,0,0,Activity.Width*2,40dip)
  6. load the form with the ASSegmentedTab to this panel
    1. B4X:
      xpnl_seg_Tab_background.LoadLayout("frm_seg_tab")
  7. add this panel to your xCustomListView
    1. B4X:
      CustomListView1.Add(xpnl_seg_Tab_background,"")
For further questions, please make a new thread, I don't want this thread to be endless.
 
but then you don't learn it.
  1. Put the ASSegmentedTab to a own form
  2. add a xCustomListView under the ACToolBarLight
  3. use xCustomListView instead of "ListView", i dont know, how to add a panel to a "ListView"
  4. create a new panel
    1. B4X:
      Dim xpnl_seg_Tab_background As B4XView = xui.CreatePanel("")
  5. set a larger width than your ASSegmentedTab width is
    1. B4X:
      xpnl_seg_Tab_background.SetLayoutAnimated(0,0,0,Activity.Width*2,40dip)
  6. load the form with the ASSegmentedTab to this panel
    1. B4X:
      xpnl_seg_Tab_background.LoadLayout("frm_seg_tab")
  7. add this panel to your xCustomListView
    1. B4X:
      CustomListView1.Add(xpnl_seg_Tab_background,"")
For further questions, please make a new thread, I don't want this thread to be endless.
Thanks a lot
i will try your suggestion, and also i will start new thread if required
 
Thanks again

I have created new thread at following link

Regards
 

Alexander Stolte

Expert
Licensed User
Update
1.04

  • 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
Corner Radius Old VS New:
mBase:
'old way:
ASSegmentedTab2.Base.SetColorAndBorder(ASSegmentedTab2.Base.Color,0,0,10dip) 'make the view rounded
'new way:
ASSegmentedTab2.CornerRadiusBackground = 10dip 'make the view rounded
SelectionPanel:
'old
ASSegmentedTab2.SelectionPanel.SetColorAndBorder(ASSegmentedTab2.SelectionPanel.Color,0,0,10dip)'makes the selector rounded
'new
ASSegmentedTab2.CornerRadiusSelectionPanel = 10dip'makes the selector round
PaddingSelectionPanel:
B4X:
ASSegmentedTab1.PaddingSelectionPanel = 5
Result:
IMG_7426.jpg
 

Alexander Stolte

Expert
Licensed User
Update
1.05

  • 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

Examples:
B4X:
ASSegmentedTab1.ShowSeperators = True 'Shows the seperators - or use the Designer Property
ASSegmentedTab1.SeperatorProperties.Width = 2dip 'the width of the seperators
ASSegmentedTab1.SeperatorProperties.Color = xui.Color_Red 'the color of the seperators
ASSegmentedTab1.UpdateSeperators 'commit the style changes
 

Alexander Stolte

Expert
Licensed User
I had another update in the pipeline, I don't know why I didn't publish it back then, version 1.05 is still available as backup in the 1st post.
Update
  • 1.06
    • 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
 
Top