B4A Class [B4X] [XUI] AS TabStrip (ASViewPager + ASTabMenu)

Alexander Stolte

Expert
Licensed User
Hello,
this is a helper class to make it easier to create a tabstrip from the ASViewPager and ASTabMenu.

Important
You need ASTabMenu V1.13+

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

Features
Result:
20-04-23-12-12-422.gif


Tutorial:
  • Step 1
    • Add the ASTabMenu on top
    • Add the ASViewPager under the ASTabMenu
    • look on the image below
    • 1587638329972.png
  • Step 2
    • Initialize the ASTabStrip class
      • ASTabStrip1.Initialize(ASTabMenu1,ASViewPager1)
  • Step 3
    • Add Pages
      • ASTabStrip add pages:
        For i = 0 To 5
        Dim tmp_xpnl As B4XView = xui.CreatePanel("")
        tmp_xpnl.Color = xui.Color_ARGB(255,Rnd(1,255),Rnd(1,255),Rnd(1,255))
        tmp_xpnl.SetLayoutAnimated(0,0,0,ASViewPager1.CustomListView.GetBase.Width,ASViewPager1.CustomListView.GetBase.Height)
        ASTabStrip1.AddPage(xui.Color_ARGB(255,39, 174, 97),"Tab " & i,ASTabMenu1.FontToBitmap(Chr(0xF015),False,30,xui.Color_White),"",tmp_xpnl,"")
            Next
  • Step 4
    • Add the ASViewPager PageChanged event
    • Add the ASTabMenu TabClick event
    • B4X:
      Sub ASViewPager1_PageChanged(Index As Int)
      ASTabStrip1.ViewPager_PageChanged(Index)
      End Sub
      
      Sub ASTabMenu1_TabClick(index As Int)
      ASTabStrip1.TabMenu_TabClick(index)
      End Sub
  • Done
ASTabStrip
Author: Alexander Stolte
Version: 1.00

  • ASTabStrip
    • Functions:
      • AddPage (tab_background_color As Int, tab_text As String, tab_icon As B4XBitmap, tab_tag As Object, pager_layout As B4XView, pager_value As Object) As String
      • Initialize (TabMenu As com.as.tabstrip.astabmenu, ViewPager As com.as.tabstrip.asviewpager) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • RemovePage (index As Int) As String
      • TabMenu_TabClick (index As Int) As String
      • ViewPager_PageChanged (index As Int) As String
Changelog
  • V1.0
    • Release
Have Fun :)
 

Attachments

Last edited:

angel_

Active Member
Licensed User
I was trying to reproduce the example in B4J but this error appears:

B4X:
B4J Version: 8.10
Java Version: 8
Parsing code.    Error
Error parsing program.
Error description: Unknown type: reflector
Are you missing a library reference?
Error occurred on line: 76 (ASViewPager)
Dim r As Reflector
 

angel_

Active Member
Licensed User
I would like to show only icons or text in the Tab, I use Null as parameter but it does not work
 

Togo

Member
Please is it possible to set the tab underline to be exactly on tht foot of the title bar like in the tabstrip viewpager?
 

angel_

Active Member
Licensed User
I am very satisfied with these libraries, they are an excellent cross plattform alternative for TabStrip, but I have small problems that maybe can be solved

The tab accepts text and icons if entered as csbuilder (B4A) but does not work in B4i, In B4J I can't mix icons and text come out misaligned. Icons in B4A and B4J are sharp, in B4i they are blurred

[B4A]
b4a_1.jpg


[B4i]
b4i_3.png


[B4J]
Captura_B4J3.JPG



If the too long text does not cut it into a single line as B4i does correctly but the underline of the tab overlaps the adjacent tab

[B4A]
b4a_2.jpg


[B4i]
b4i_2.png
 

Attachments

angel_

Active Member
Licensed User
I had a function in a static module and I changed it to class and solved the problems of underline and text truncation in B4A. If you know of a better alternative for including icons and text on the tab I'd like to try it out for B4A, B4i and B4J.

The only problem I have is blurry text in B4i.
 

Attachments

Alexander Stolte

Expert
Licensed User
The only problem I have is blurry text in B4i.
B4X:
ASTabMenu1.FontToBitmap(Texto_a_cs("AAAAAAAAAAAAAAAA")
did you know what the function FontToBitmap is doing?
This function converts FontAwesome and MaterialIcons to a image, but not text!
 

Alexander Stolte

Expert
Licensed User
The problem is, the imageview what holds the icons has a fixed size, if you want text and image, then change the Tab Style on ASTabMenu to text and try to convert the icons with the csbuilder to text. But I have no idea if this is gonna work
 

angel_

Active Member
Licensed User
B4X:
ASTabMenu1.FontToBitmap(Texto_a_cs("AAAAAAAAAAAAAAAA")
did you know what the function FontToBitmap is doing?
This function converts FontAwesome and MaterialIcons to a image, but not text!
I have modified the function so you can use any font
B4X:
Public Sub FontToBitmap (text As String, Fuente As B4XFont, FontSize As Float, color As Int) As B4XBitmap
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 32dip, 32dip)
    Dim cvs1 As B4XCanvas
    cvs1.Initialize(p)
    Dim fnt As B4XFont = Fuente
    Dim r As B4XRect = cvs1.MeasureText(text, fnt)
    Dim BaseLine As Int = cvs1.TargetRect.CenterY - r.Height / 2 - r.Top
    cvs1.DrawText(text, cvs1.TargetRect.CenterX, BaseLine, fnt, color, "CENTER")
    Dim b As B4XBitmap = cvs1.CreateBitmap
    cvs1.Release
    Return b
End Sub
 

angel_

Active Member
Licensed User
The problem is, the imageview what holds the icons has a fixed size, if you want text and image, then change the Tab Style on ASTabMenu to text and try to convert the icons with the csbuilder to text. But I have no idea if this is gonna work
That I can't use tab with texts and icons is a small problem, but this is solved with the previous code, but in B4i it looks blurry (in B4A and B4J it looks good) and it's ugly, and I can't find a solution for this
 
Top