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

Alexander Stolte

Expert
Licensed User
Longtime 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

  • B4A Example.zip
    4 KB · Views: 1,061
  • ASTabStrip.b4xlib
    916 bytes · Views: 985
  • ASTabStrip.bas
    1.1 KB · Views: 845
Last edited:

angel_

Well-Known Member
Licensed User
Longtime 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_

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

angel_

Well-Known Member
Licensed User
Longtime 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

  • b4i_1.png
    b4i_1.png
    6.3 KB · Views: 301

angel_

Well-Known Member
Licensed User
Longtime 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

  • B4iProject.zip
    253 KB · Views: 343

Alexander Stolte

Expert
Licensed User
Longtime 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
Longtime 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_

Well-Known Member
Licensed User
Longtime 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_

Well-Known Member
Licensed User
Longtime 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
 

jahswant

Well-Known Member
Licensed User
Longtime User
Please seems like the baseview.enable = false works only in b4j how to disable the view ?
 
Top