B4i Library TabStrip

iTabStrip library implements a controller similar to B4A TabStripViewPager.
It is based on XLPagerTabStrip: https://github.com/xmartlabs/XLPagerTabStrip (MIT license).



Setup instructions:

1. Add TabStrip with the designer.
2. Create the tab pages layouts. Make sure to use anchors to allow the layouts to fill the available space.
3. Set the pages by calling TabStrip.SetPages.
4. You need to put the ButtonCell.xip file under Files\Special. You can find the file in the example project.

The title used is the Page's title or the attributed text of a label that is set as the page's TitleView.

Workaround to issue with devices with notch (all new devices): https://www.b4x.com/android/forum/threads/white-bar-on-iphone-xs.107514/#post-672963

 

[mkh_fx]

wowwwww
Erel you are the best
I was surprised

 

[Emme Developer]

Nice Erel! Is possibile to exchange position and place the tabber in bottom of page?

 

[Erel]

It is not possible to move the bar.

 

[Gktech]

Hello Erel, I'm loading a layout inside a panel, and inside this panel I'm trying to load a TabStrip that is giving the following error:

Code:

Private pnlCentro As Panel
pnlCentro.LoadLayout("tab_resumo")

Inside the layout "tab_resumo" has a TabStrip, when it loads the following error:

Error occurred on line: 131 (formVerDadosCarro)
Signal - 11
Stack Trace: (
    "0   IJavendi             SignalHandler + 137",
    "1   libsystem_platform.dylib            0x04646e5b _sigtramp + 43",
    "2   ???                  0x0 + 4294967295",
    "3   UIKit                -[UICollectionView layoutAttributesForItemAtIndexPath:] + 70",
    "4   IJavendi             -[XLButtonBarView updateSelectedBarPositionWithAnimation:swipeDirection:pagerScroll:] + 192",
    "5   IJavendi             -[XLButtonBarView moveToIndex:animated:swipeDirection:pagerScroll:] + 66",
    "6   IJavendi             -[XLButtonBarPagerTabStripViewController viewWillLayoutSubviews] + 357",
    "7   UIKit                -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 1055",
    "8   libobjc.A.dylib      -[NSObject performSelector:withObject:] + 59",
    "9   QuartzCore           -[CALayer layoutSublayers] + 141"
)

What's wrong with my code?

 

[Erel]

Can you upload the project (File - Export as zip)?

 

[joilts]

I can run the example with no problem, but when add to my project, I get this error:

Class (b4i_httpjob) instance released.
SignalHandler 11
Error occurred on line: 53 (summary_screen_online)
Signal - 11
Stack Trace: (
    "0   SITCARGA             SignalHandler + 112",
    "1   libsystem_platform.dylib            0x23eaa06f _sigtramp + 34",
    "2   UIKit                <redacted> + 66",
    "3   UIKit                <redacted> + 58",
    "4   SITCARGA             -[XLButtonBarView moveFromIndex:toIndex:withProgressPercentage:pagerScroll:] + 140",
    "5   SITCARGA             -[XLButtonBarPagerTabStripViewController pagerTabStripViewController:updateIndicatorFromIndex:toIndex:withProgressPercentage:indexWasChanged:] + 120",
    "6   SITCARGA             -[B4IPagerTabStrip pagerTabStripViewController:updateIndicatorFromIndex:toIndex:withProgressPercentage:indexWasChanged:] + 80",
    "7   SITCARGA             -[XLPagerTabStripViewController updateContent] + 1634",
    "8   SITCARGA             -[XLPagerTabStripViewController updateIfNeeded] + 170",
    "9   SITCARGA             -[XLPagerTabStripViewController viewDidLayoutSubviews] + 66"
)

Unfortunnately I can´t post the code here (contract restrictions).
The main difference from example is that its not the main module, but a page opened from another. This is the code from show page:

Public Sub ShowPage
    'SetDebugAutoFlushLogs(True)
    If Not(MyPage.IsInitialized) Then
        MyPage.Initialize("MyPage")
        MyPage.Title = ""
        MyPage.RootPanel.LoadLayout("summary_screen_online")
    End If
    Main.NavControl.ShowPage(MyPage)
    global.Initialize_Associate_Variable
   
    TabPages.Initialize

    Dim page1, page2, page3, page4, page5, page6 As Page
   
    page1.Initialize("page1")
    page1.RootPanel.LoadLayout("summary_total_tab")
    page1.Title = "Frota"
    TabPages.Add(page1)

    page2.Initialize("page2")
    page2.RootPanel.LoadLayout("summary_services_tab")
    page2.Title = "Serviços"
    TabPages.Add(page2)
   
    page3.Initialize("page3")
    page3.RootPanel.LoadLayout("summary_sticker_tab")
    page3.Title = "Adesivos"
    TabPages.Add(page3)

    page4.Initialize("page4")
    page4.RootPanel.LoadLayout("summary_vehicle_nrc_tab")
    page4.Title = "Não Recadastrados"
    TabPages.Add(page4)
   
    page5.Initialize("page5")
    page5.RootPanel.LoadLayout("summary_vehicle_pen_tab")
    page5.Title = "Com Pendência"
    TabPages.Add(page5)
   
   
    page6.Initialize("page6")
    page6.RootPanel.LoadLayout("summary_vehicle_rcd_tab")
    page6.Title = "Ativos"
    TabPages.Add(page6)
   
    TabStrip1.SetPages(TabPages)
   
    StartTabsContent ''Inicia os tabs, criando os objetos necessários.
    load_summary_header
    load_summary_itens ''Carrega primeira TAB

End Sub

The error messages appears after Main.NavControl.ShowPage(MyPage).

Thanks in advance for ypur help.

 

[Erel]

Your code looks wrong. You should only create the tab pages once when My.IsInitialized is false. Make sure to only show the MyPage after you added at least one page to the TabStrip.

 

[mkh_fx]

how to change tab width ?

 

[Erel]

The width is set automatically based on the text. What are you trying to change?

 

[hongbii khaw]

Hi all,
May i know how to adjust the tab height?
Thank you.

 

[Erel]

Edit: not a good solution. Doesn't work properly.

Add this code:

Sub Page1_Resize (Width As Float, Height As Float)
   Dim BarHeight As Int = 80 'change this value
   Dim fixForStatusBar As Int = 20
   Dim no As NativeObject = TabStrip1
   Dim v As View = no.GetField("buttonBarView")
   v.Height = BarHeight
   v = no.GetField("containerView")
   v.SetLayoutAnimated(0, 1, 0, BarHeight - fixForStatusBar, pnlTabStrip.Width, pnlTabStrip.Height - BarHeight + fixForStatusBar)
   v = no.GetField("buttonBarView").GetField("selectedBar")
   v.Top = BarHeight - 5
   no.RunMethod("reloadPagerTabStripView", Null)
End Sub

 

[hongbii khaw]

Hi,
This is the log file when I add in the code:

The behavior of the UICollectionViewFlowLayout is not defined because:
the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
Please check the values returned by the delegate.
The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7b032760>, and it is attached to <XLButtonBarView: 0x7ac09400; baseClass = UICollectionView; frame = (0 0; 414 44); clipsToBounds = YES; autoresize = W; gestureRecognizers = <NSArray: 0x7b01bbb0>; animations = { position=<CASpringAnimation: 0x796121e0>; bounds.origin=<CASpringAnimation: 0x7961f200>; bounds.size=<CASpringAnimation: 0x796a4f30>; }; layer = <CALayer: 0x7b01a700>; contentOffset: {0, 0}; contentSize: {456.66663, 44}> collection view layout: <UICollectionViewFlowLayout: 0x7b032760>.
Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.
The behavior of the UICollectionViewFlowLayout is not defined because:
the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
Please check the values returned by the delegate.
The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7b032760>, and it is attached to <XLButtonBarView: 0x7ac09400; baseClass = UICollectionView; frame = (0 0; 414 44); clipsToBounds = YES; autoresize = W; gestureRecognizers = <NSArray: 0x7b01bbb0>; animations = { position=<CASpringAnimation: 0x796121e0>; bounds.origin=<CASpringAnimation: 0x7961f200>; bounds.size=<CASpringAnimation: 0x796a4f30>; }; layer = <CALayer: 0x7b01a700>; contentOffset: {0, 0}; contentSize: {456.66663, 44}> collection view layout: <UICollectionViewFlowLayout: 0x7b032760>.
Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.
The behavior of the UICollectionViewFlowLayout is not defined because:
the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
Please check the values returned by the delegate.
The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7b032760>, and it is attached to <XLButtonBarView: 0x7ac09400; baseClass = UICollectionView; frame = (0 0; 414 44); clipsToBounds = YES; autoresize = W; gestureRecognizers = <NSArray: 0x7b01bbb0>; animations = { position=<CASpringAnimation: 0x796121e0>; bounds.origin=<CASpringAnimation: 0x7961f200>; bounds.size=<CASpringAnimation: 0x796a4f30>; }; layer = <CALayer: 0x7b01a700>; contentOffset: {0, 0}; contentSize: {456.66663, 44}> collection view layout: <UICollectionViewFlowLayout: 0x7b032760>.
Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.
The behavior of the UICollectionViewFlowLayout is not defined because:
the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
Please check the values returned by the delegate.
The relevant UICollectionViewFlowLayout instance is <UICollectionViewFlowLayout: 0x7b032760>, and it is attached to <XLButtonBarView: 0x7ac09400; baseClass = UICollectionView; frame = (0 0; 414 44); clipsToBounds = YES; autoresize = W; gestureRecognizers = <NSArray: 0x7b01bbb0>; animations = { position=<CASpringAnimation: 0x796121e0>; bounds.origin=<CASpringAnimation: 0x7961f200>; bounds.size=<CASpringAnimation: 0x796a4f30>; }; layer = <CALayer: 0x7b01a700>; contentOffset: {0, 0}; contentSize: {456.66663, 44}> collection view layout: <UICollectionViewFlowLayout: 0x7b032760>.
Make a symbolic breakpoint at UICollectionViewFlowLayoutBreakForInvalidSizes to catch this in the debugger.

Thank you.

 

[Erel]

Does it work?

 

[hongbii khaw]

Hi Erel,
The tab's height still the same.

Thank you.

 

[Erel]

After doing additional tests, I see that it only works in some cases (where the current tab is the selected tab). The correct answer is that it is currently not possible to change the height.

 

[hongbii khaw]

Hi Erel,
Thank you.

 

[moster67]

Does this library work on the simulator? I am getting the following error:
Does this mean it needs to be updated to include a x86_64 binary?
If yes, are you planning to do so? I use the simulator a lot while developing...

Never mind - I had somehow overwritten the related libs on my Mac. Now it works.

 

[MAGAREY]

it's possible to only change the tab by click on them. I mean , i want to disable the swipe between tabs. This is possible?

 

[Erel]

Yes:

Dim no As NativeObject = TabStrip1
no.GetField("containerView").SetField("scrollEnabled", False)