B4A Library [B4X] [XUI] AS TabMenuAdvanced

A container view controller that manages a multiselection interface, where the selection determines which child view controller to display.

This view was developed and structured from scratch :)

i spend a lot of time in creating views, some views i need by my self, but some views not and to create a high quality view cost a lot of time. If you want to support me, then you can do it here by Paypal or with a coffee. :)

Wo59uAy0swl6vhRC1Qtzzx3iuBG9PXRlW450ZGidq7XLDwkFak.jpeg

(17) mage.png

MiddleButton = True - Designer Property
Examples:
B4X: 
AS_TabMenuAdvanced1.GetTab(2).xTab.BadgeValue = 5 'Sets the Badge Value for the 3. Tab to 5
AS_TabMenuAdvanced1.GetTab(3).xTab.Enabled = False 'Disabled the 4. Tab
AS_TabMenuAdvanced1.Refresh 'Commits the changes
Example Projects

[B4X] AS_TabMenuAdvanced + ASPopupMenu

This is a example how to use the AS_TabMenuAdvanced together with the ASPopupMenu. For this example you need the 2 libs. https://www.b4x.com/android/forum/threads/as-tabmenuadvanced.140907/ https://www.b4x.com/android/forum/threads/b4x-xui-as-popup-menu-on-any-view-beta.121832/
www.b4x.com www.b4x.com

[B4X] AS_TabMenuAdvanced + ASPopupMenuAdvanced

This is a example how to use the AS_TabMenuAdvanced together with the ASPopupMenuAdvanced. For this example you need the 2 libs. https://www.b4x.com/android/forum/threads/as-tabmenuadvanced.140907/...
www.b4x.com www.b4x.com

[B4X] AS TabMenuAdvanced Designs

https://www.b4x.com/android/forum/threads/b4x-xui-as-tabmenuadvanced.140907/
www.b4x.com www.b4x.com

[B4X] AS_TabMenuAdvanced Custom Middle Button

In this example we add a MiddleButton that is larger than the internal one and is outside the TabMenu. https://www.b4x.com/android/forum/threads/b4x-xui-as-tabmenuadvanced.140907/ AS_TabMenuAdvanced1.MiddleButtonProperties.Visible = False 'Makes the lib. MiddleButton invisible...
www.b4x.com www.b4x.com
ASTabMenuAdvanced
Author: Alexander Stolte
Version: 1.02
  • ASTabMenuAdvanced_BadgeProperties
    • Fields:
      • BackgroundColor As Int
      • Height As Float
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextColor As Int
      • TextFont As B4XFont
      • TextPadding As Float
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASTabMenuAdvanced_Tab
    • Fields:
      • BadgeValue As Int
      • Enabled As Boolean
      • IconDisabled As B4XBitmap
      • IconSelected As B4XBitmap
      • IconUnselected As B4XBitmap
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Tag As Object
      • Text As String
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASTabMenuAdvanced_TabIntern
    • Fields:
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • xBadgeProperties As ASTabMenuAdvanced_BadgeProperties
      • xTab As ASTabMenuAdvanced_Tab
      • xTabProperties As ASTabMenuAdvanced_TabProperties
      • xTabViews As ASTabMenuAdvanced_TabViews
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASTabMenuAdvanced_TabProperties
    • Fields:
      • BackgroundColor As Int
      • DisabledColor As Int
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • SelectedColor As Int
      • TextFont As B4XFont
      • TextIconPadding As Float
      • UnselectedColor As Int
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • ASTabMenuAdvanced_TabViews
    • Fields:
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • xiv_TabIcon As B4XView
      • xlbl_Badge As B4XView
      • xlbl_TabText As B4XView
      • xpnl_TabBackground As B4XView
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_TabMenuAdvanced
    • Events:
      • TabClick (Index As Int)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddTab (Text As String, IconSelected As B4XBitmap, IconUnselected As B4XBitmap) As String
        Text - Pass "" if you dont want Text
        IconSelected - Pass NULL if you dont want a Icon
        IconUnselected - Pass NULL if you dont want a Icon
        If you want to change TabProperties then call this before you add the tab
        <code>AS_TabMenuAdvanced1.TabProperties.TextColor = xui.Color_White</code>
      • AddTabAdvanced (xTab As ASTabMenuAdvanced_Tab, xTabProperties As ASTabMenuAdvanced_TabProperties) As String
        Example:
        <code>
        Dim xTab As ASTabMenuAdvanced_Tab = AS_TabMenuAdvanced1.CreateASTabMenuAdvanced_Tab("Test Item",Null,Null)
        Dim xTabProperties As ASTabMenuAdvanced_TabProperties = AS_TabMenuAdvanced1.CreateASTabMenuAdvanced_TabProperties(xui.CreateDefaultFont(15),xui.Color_ARGB(255,32, 33, 37),xui.Color_ARGB(255,45, 136, 121),xui.Color_ARGB(255,255,255,255),xui.Color_ARGB(255,60, 64, 67),0)
        AS_TabMenuAdvanced1.AddTabAdvanced(xTab,xTabProperties)</code>
      • ChangeColorBasedOnAlphaLevel (bmp As B4XBitmap, NewColor As Int) As B4XBitmap
      • Class_Globals As String
      • CreateASTabMenuAdvanced_BadgeProperties (TextColor As Int, TextFont As B4XFont, Height As Float, TextPadding As Float, BackgroundColor As Int) As ASTabMenuAdvanced_BadgeProperties
      • CreateASTabMenuAdvanced_Tab (Text As String, IconSelected As B4XBitmap, IconUnselected As B4XBitmap) As ASTabMenuAdvanced_Tab
      • CreateASTabMenuAdvanced_TabIntern (xTab As ASTabMenuAdvanced_Tab, xTabProperties As ASTabMenuAdvanced_TabProperties, xBadgeProperties As ASTabMenuAdvanced_BadgeProperties, xTabViews As ASTabMenuAdvanced_TabViews) As ASTabMenuAdvanced_TabIntern
      • CreateASTabMenuAdvanced_TabProperties (TextFont As B4XFont, BackgroundColor As Int, SelectedColor As Int, UnselectedColor As Int, DisabledColor As Int, TextIconPadding As Float) As ASTabMenuAdvanced_TabProperties
      • CreateASTabMenuAdvanced_TabViews (xpnl_Tab As B4XView, xlbl_TabText As B4XView, xiv_TabIcon As B4XView, xlbl_Badge As B4XView) As ASTabMenuAdvanced_TabViews
      • CreateImageView (EventName As String) As B4XView
      • CreateLabel (EventName As String) As B4XView
      • 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

        FontAwesome To Bitmap

        Unlike an older "TextToBitmap" sub that you can find in the forum, this code vertically centers the icon. It can also be used in B4J and B4i (only need to change the font line). Sub Activity_Create(FirstTime As Boolean) 'usage example Activity.AddMenuItem3("Android", "Test"...
        www.b4x.com www.b4x.com
      • getIndex As Int
      • GetTab (Index As Int) As ASTabMenuAdvanced_TabIntern
        Example:
        <code>
        AS_TabMenuAdvanced1.GetTab(0).xTabProperties.SelectedColor = xui.Color_Magenta
        AS_TabMenuAdvanced1.Refresh</code>
      • getTabProperties As ASTabMenuAdvanced_TabProperties
      • GetTabs As List
        Example:
        <code>
        For Each TabIntern As ASTabMenuAdvanced_TabIntern In AS_TabMenuAdvanced1.GetTabs
        Log(TabIntern.xTab.Text)
        Next</code>
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Refresh As String
      • RemoveTabAt (Index As Int) As String
        Removes a tab
        <code>
        AS_TabMenuAdvanced1.RemoveTabAt(2)
        AS_TabMenuAdvanced1.Refresh</code>
      • setIndex (Index As Int) As String
    • Properties:
      • Index As Int
      • TabProperties As ASTabMenuAdvanced_TabProperties [read only]
Changelog
  • 1.00
    • Release
  • 1.01
    • xBadge renamed to xBadgeProperties
  • 1.02
    • Add GetTabs - Gets a list of tab properties of type ASTabMenuAdvanced_TabIntern
    • Add RemoveTabAt - Removes a tab
    • Add Tag Property to Type ASTabMenuAdvanced_Tab
    • Add new Type ASTabMenuAdvanced_TabViews - contains the control elements of a tab
  • 1.03
    • Add LeftPadding to ASTabMenuAdvanced_BadgeProperties - You can move the badge to left or right with this property
    • Add get BadgeProperties - here you can set the global Badge Properties
  • 1.04
    • The TabClick Event is now always triggered, even if the tab is already selected
    • The BadgeValue Data Type from Type ASTabMenuAdvanced_Tab is now String
  • 1.05
    • Add get and set CornerRadius
    • Add new Type ASTabMenuAdvanced_IndicatorProperties
    • Add Designer Property Indicator - If True the Indicator is visible
      • Default: False
    • BugFixes
  • 1.06
    • Add Designer Property MiddleButton - You can now show a middle button
      • Default: False
      • Limitation: Only an even number of tabs may be present 2,4,6,8,10...
    • Add Event MiddleButtonClick
    • Add Type ASTabMenuAdvanced_MiddleButtonProperties
      • CustomWidth
        • Default: 0
    • Add Designer Property BadgeWithoutText - If True then the badges have no text
      • Default: False
  • 1.07
    • Add Visible to Type ASTabMenuAdvanced_MiddleButtonProperties - If False then the middle button is not visible, but the space is still kept free
  • 1.08
    • Add Designer Property ColorIcons - If false then remains the color of the icon
      • Default: True
  • 1.09
    • Add Event CustomDrawTab - This ensures that whenever a tab is refreshed, your custom code is also applied
  • 1.10
    • BugFix
  • 1.11
    • Badge optimizations
  • 1.12
    • Add Clear - Clears all tabs
  • 1.13
    • BugFix - the badge was not round when the width was smaller than the height
    • Add BadgeValue - Sets the badge value without having to call refresh
    • set Index no longer needs a "refresh" to be changed
  • 1.14
    • BugFix on .Clear
  • 1.15
    • BugFix on MiddleButtonProperties.CustomWidth
  • 1.16
    • BugFixes
  • 1.17
    • Add Designer Property ShapeColor - A thin line on top of the view
      • Default: Transparent
Have Fun :)
 

Attachments

  • AS TabMenuAdvanced Example.zip
    449.1 KB · Views: 1,762
  • AS_TabMenuAdvanced.b4xlib
    7.7 KB · Views: 368
Last edited:
Click to expand...
ivanomonti

ivanomonti

Expert
Licensed User
Longtime User
Hello and thank you and for this library that offers a lot of potential, that if I do a good job with it I'll offer you so many coffees that you'll feel nauseous :) but I found some doubts.

1) disable for example a key at runtime

2) a space key wouldn't hurt, for example put 5 buttons and fill the length of the screen, but if you put two they stay in the center, but if I put three, one on the left and two at the bottom right? the thing becomes almost impossible, at this point a disable key that takes up space of two buttons would be the solution.

01.png


3) Another thing that I don't know if it can be done and make sure that there is a click and not a selection, let me explain when I select an item it remains selected, I would like it to behave like a button and not like a switch.

button (click)
switch (off)(on)

-------------------------------------------------------------------------------- italiano --------

Ciao e grazie e per questa libreria che offre molte potenzialità, che se faccio un buon lavoro con essa ti offro tanti caffè da aver la nausea :) ma ho trovato alcuni dubbi.

1) disabilitare ad esempio un tasto a runtime
2) non ci starebbe male un tasto space, esempio metti 5 bottoni e riempi la lungezza dello schermo, ma se ne metti due stanno al centro, ma se ne metto tre di cui uno a sx e due in fondo a destra? la cosa diventa quasi impossibile, a questo punto un tasto disable che prenda spazio di due bottoni sarebbe la soluzione.

01.png


3) Altra cosa che non so se si può fare e fare in modo che ci sia il click e non selezione, mi spiego quando seleziono una voce rimane selezionata, a me piacerebbe che si comportasse come un pulsante e non come interruttore.

pulsante (click)
interrutore (off)(on)
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
ivanomonti said:
3) Another thing that I don't know if it can be done and make sure that there is a click and not a selection, let me explain when I select an item it remains selected, I would like it to behave like a button and not like a switch.

button (click)
switch (off)(on)
Click to expand...
I don't quite understand what the point of this is supposed to be?
Should none of the tabs be selected and only be selected when the user clicks on one and if this clicks again the same, then the selection should disappear?
ivanomonti said:
1) disable for example a key at runtime
Click to expand...
B4X: 
AS_TabMenuAdvanced1.GetTab(0).xTab.Enabled = False
AS_TabMenuAdvanced1.Refresh
 
ivanomonti

ivanomonti

Expert
Licensed User
Longtime User
Alexander Stolte said:
I don't quite understand what the point of this is supposed to be?
Should none of the tabs be selected and only be selected when the user clicks on one and if this clicks again the same, then the selection should disappear?

B4X: 
AS_TabMenuAdvanced1.GetTab(0).xTab.Enabled = False
AS_TabMenuAdvanced1.Refresh
Click to expand...

no, it remains selected, I try again and I send you a screen, as you can see the red parts highlight the brighter text because it has been selected, in reality it should be like all the others.

I don't use icons but only text at the moment, and there's already too much stuff :)

01.png
 
ivanomonti

ivanomonti

Expert
Licensed User
Longtime User
Error: 
Error occurred on line: 287 (AS_TabMenuAdvanced)


code: 
    AS_TabMenuAdvanced_main_social.AddTab("MIASmart",Null,Null)
    AS_TabMenuAdvanced_main_social.AddTab("",Null,Null)
    AS_TabMenuAdvanced_main_social.AddTab("New Post",Null,Null)
    AS_TabMenuAdvanced_main_social.AddTab("Load Post",Null,Null)
    AS_TabMenuAdvanced_main_social.Refresh
    AS_TabMenuAdvanced_main_social.GetTab(1).xTab.Enabled = False
    AS_TabMenuAdvanced_main_social.Refresh
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
ivanomonti said:
no, it remains selected, I try again and I send you a screen, as you can see the red parts highlight the brighter text because it has been selected, in reality it should be like all the others.
Click to expand...
And why don't you just set the selection color to the same color as the unselected color?
 
ivanomonti

ivanomonti

Expert
Licensed User
Longtime User
Alexander Stolte said:
Make a space:
AS_TabMenuAdvanced_main_social.AddTab(" ",Null,Null)
Click to expand...
man, anyway I find it a flaw, I need to have the possibility to make an elastic space between the buttons, mmm for the rest and a great job, it can be improved but it's great
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
ivanomonti said:
man, anyway I find it a flaw, I need to have the possibility to make an elastic space between the buttons, mmm for the rest and a great job, it can be improved but it's great
Click to expand...
On tablets you usually have such a gap on the sides, but no idea how to calculate something like that. The workaround with 2 disabled tabs is quite good.
 
ivanomonti

ivanomonti

Expert
Licensed User
Longtime User
Alexander Stolte said:
On tablets you usually have such a gap on the sides, but no idea how to calculate something like that. The workaround with 2 disabled tabs is quite good.
Click to expand...
true but if you use 5 buttons by default the problem is solved simply also because maybe I would like a large button so that you can see it immediately, anyway yes, I used two empty buttons and bona there :)
 
ivanomonti

ivanomonti

Expert
Licensed User
Longtime User
you haven't thought about the size of the numbers, moreover the background is cut by the next index, nice round but you mustn't go beyond the decimal mmmm, if I use height 50 or 60 that background is cut and here it's 70 but too high.

01.png
 
Sergio Haurat

Sergio Haurat

Active Member
Licensed User
Longtime User
Hi @Alexander Stolte, your work is incredible! I can't find a way to leave an icon by default, for example:
Selected as default at start: 
Dim AS_TabMenuAdvanced1 As AS_TabMenuAdvanced
'
' more code...
'
AS_TabMenuAdvanced1.GetTab(0).xTab.Default = True
Thank you
 
Sergio Haurat

Sergio Haurat

Active Member
Licensed User
Longtime User
Alexander Stolte said:
??????????
Click to expand...

I am attaching some images to see if you can understand me better

App Normal Start Application after button pressed
1689260154130.png
1689260192261.png




Is there a property that allows me to display one of the default options without having to go and click?

This is what I mean by this imaginary line of code

AS_TabMenuAdvanced1.GetTab(0).xTab.Default = True
 
byz

byz

Active Member
Licensed User
bf96f677b0386b3d506913ca84f6f8b6.png

good job man, its so nice. i used it, the FontToBitmap is great to me,because i create image just soso. thanks agin Alexander Stolte.
this is my code
add title and icon: 
    AS_TabMenuAdvanced1.AddTab("后退",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE5C4),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE5C4),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.AddTab("前进",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE5C8),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE5C8),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.AddTab("主页",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE88A),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE88A),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.AddTab("搜索",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE8B6),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE8B6),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.AddTab("分享",AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE80D),True,35,xui.Color_White),AS_TabMenuAdvanced1.FontToBitmap(Chr(0xE80D),True,35,xui.Color_White))
    AS_TabMenuAdvanced1.Index=(2)
    AS_TabMenuAdvanced1.Refresh
 
You must log in or register to reply here.

Similar Threads

Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS MultiColumnCustomListView based on xCustomListView
Replies
13
Views
3K
LucaMs
LucaMs
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS RangeSeekBar
Replies
4
Views
3K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS SegmentedTab
2 3
Replies
51
Views
17K
Alexander Stolte
Alexander Stolte
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS Radio Button
2
Replies
22
Views
8K
wimpie3
wimpie3
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS NumberProgressBar
Replies
17
Views
6K
Alexander Stolte
Alexander Stolte
Top