B4A Library [B4X] [XUI] AS ViewPager based on xCustomListView

Hey,
thanks to @KZero for his good zPager class, i was able to extract a few things from it to make this cross platform view.

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

This library is compatible and tested with B4A,B4I and B4J!
If you have bugs or a wish then tell me it in the comments.

On B4J use the LEFT and RIGHT keys on your keyboard to change the page.
On B4I you need the GestureRecognizer class. Download it down below.
B4j: jXUI,JavaObject,jPager,jReflection
B4a: XUi,Reflection,xCustomListView
B4i: iXUI,xCustomListView
Features
  • cross-platform compatible
  • based on a cross-platform ListView
  • add and remove pages
  • scroll to pages
  • a good swipe feeling
  • NEW - Vertical
  • NEW - Carousel
  • NEW - Lazy Loading
Horizontal and Vertical
20-04-22-20-36-012.gif
20-08-15-11-33-40.gif

B4A Carousel and B4I Carousel
B4A Carousel.gif
B4I Carousel.gif

ASViewPager
Author: Alexander Stolte
Version: 2.00

  • ASViewPager
    • Events:
      • LazyLoadingAddContent (Parent As B4XView, Value As Object)
      • PageChange (Index As Int)
      • PageChanged (Index As Int)
      • PageClick (Index As Int, Value As Object)
      • ReachEnd
      • ScrollChanged (Offset As Int)
      • TouchBegin
      • TouchEnd
    • Fields:
      • Tag As Object
    • Functions:
      • AddPage (xpnl_layout As B4XView, value As Object) As String
      • AddPageAt (index As Int, xpnl_layout As B4XView, value As Object) As String
        Adds an page at a special position
      • Base_Resize (Width As Double, Height As Double) As String
      • Class_Globals As String
      • Clear As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getBase As B4XView
      • getCurrentIndex As Int
      • getCustomListView As b4a.example3.customlistview
      • getisScrollEnabled As Boolean
        Checks if the swipe/scroll is enabled or disabled
      • getSize As Int
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextPage As String
      • NextPage2 As String
        Jump to next page
      • PreviousPage As String
      • PreviousPage2 As String
        jump to previous page
      • RemovePage (index As Int) As String
      • Scroll2Value (Value As String) As String
        sets the current index by the value - smooth scrolls to the item
      • Scroll2Value2 (Value As String) As String
        sets the current index by the value - jumps to the item
      • setCurrentIndex (index As Int) As String
      • setCurrentIndex2 (index As Int) As String
        sets the current index - jumps to the item
      • setIgnorePageChangedEvent (ignore As Boolean) As String
      • setIgnorePageChangeEvent (ignore As Boolean) As String
      • setScroll (enabled As Boolean) As String
        B4I and B4A only
        enabled - False the scroll is deactivated
    • Properties:
      • Base As B4XView [read only]
      • CurrentIndex As Int
      • CurrentIndex2
        sets the current index - jumps to the item
      • CustomListView As b4a.example3.customlistview [read only]
      • IgnorePageChangedEvent
      • IgnorePageChangeEvent
      • isScrollEnabled As Boolean [read only]
        Checks if the swipe/scroll is enabled or disabled
      • Scroll
        B4I and B4A only
        enabled - False the scroll is deactivated
      • Size As Int [read only]
Changelog
  • 1.00
    • Release
  • 1.01
    • Base_Resize is now public
    • NextPage and PreviousPage Bug Fix
    • setCurrentIndex Bug Fix
    • PageChangeEvent Bug Fix
  • 1.02
    • B4I Bug Fixes
    • NextPage and PreviousPage Bug Fix
  • 1.03
    • Resize BugFix
  • 1.04
    • B4I Page-Height BugFix
    • B4I Page-Swipe BugFix
  • 1.05
    • BugFix
  • 1.06
    • Add Designer Property "Orientation" - Vertical is now supported
  • 1.07
    • BugFix getCurrentIndex
    • BugFix PageChanged event is now only firing if the index is changed
    • Add setIgnorePageChangedEvent Property
    • Add TouchBegin Event
    • Add TouchEnd Event
    • BugFix PageChanged is now firing if you press on a emulator, for example the arrow up or down keys on yor keyboard
  • 1.08
  • 1.09
    • B4I BugFixes for Release Mode - swiping is now better
  • 1.10
    • Add AddPageAt (experimental it works for my need, if you have issuses, then tell me) - Adds an page at a special position
    • Add set CurrentIndex2 - sets the current index - jumps to the item
    • Better resize handling
  • 1.11
    • RemovePage Bugfixes
    • B4J ScrollPane under the hood is now Transparent
    • Add NextPage2 -Jump to next page
    • Add PrevoiusPage2 - Jump to previous page
  • 1.12
    • [BETA] Add DesignerProperty Carousel - infinite swipe
      • On B4I Bounce Effect is disabled
    • B4I ScrollView Paging is now activated, this can improve the handling
  • 1.13
    • Add PageClick Event
  • 1.14 - read more about this update here
    • [B4I only] Add Scroll - enable or disable scroll with finger
      • ASViewPager1.Scroll(False)'disable scroll with finger
  • 1.15
    • Intern Function IIF renamed to iif2
  • 1.16
    • set Scroll is now B4X - disable the swipe/scroll
      • In B4J the arrow keys (Left/Right/Up/Down) are disabled if you deactivate the swipe/scroll
    • New property isScrollEnabled - checks if the swipe/scroll is enabled or disabled
    • Intern Function iif2 removed and the core iif is now used
      • B4A V11+ - B4J V9.10+ - B4I V7.50+
  • 1.18
    • PageChanged Event is now firing in some cases with a delay, because of a scroll animation
    • BugFix B4A setScroll - Events from other views are now no longer blocked
  • 1.19
    • BugFix on NextPage and PreviousPage
  • 1.20 (read more about this update)
    • Add Event PageChange - This event is triggered immediately after the page is changed, no delay because of animations
    • Add setIgnorePageChangeEvent - prevents the PageChange event from being triggered
  • 1.21
    • BugFixes
  • 1.22
    • B4I Scroll = False BugFix
  • 1.24
    • BugFix AddPageAt is now working better on B4A
  • 1.25
    • Add Scroll2Value - sets the current index by the value - smooth scrolls to the item
      • from the AddPage and AddPageAt function the "Value" property
      • must be a string to be found
    • Add Scroll2Value2 - sets the current index by the value - jump to the item
  • 1.26 (read more about this update)
    • Add Designer Property LazyLoading - activates lazy loading
      • Default: False
    • Add Designer Property LazyLoadingExtraSize - How many pages to load in advance
      • Default: 5
    • Add Event LazyLoadingAddContent - Add here your layout or views
  • 1.27
    • Add get and set LazyLoadingExtraSize
  • 1.28
    • Important LazyLoading improvments
  • 1.29
    • Add Commit - Triggers the LazyLoadingAddContent event
      • Call this after you have filled the list
    • LazyLoading BugFixes
  • 1.30
    • Add ResetLazyloadingIndex - when you call "commit" afterwards, it is guaranteed to check if there are empty panels in the lazy loading range, if so, the LazyLoading event is triggered
  • 1.31
    • important resize improvments
    • Add Loading Panel if Base_Resize is calling
    • Add Designer Property LoadingPanelColor
    • Add set IgnoreLazyLoading - If True, the Lazy Loading event is not triggered
    • Add ResetLazyLoadingPanels - Removes all child views from all visible pages
    • LazyLoading Improvments
  • 1.32
    • Carousel works now in Vertical mode
  • 1.33
    • B4I Native paging is now used
      • The paging feels smoother now
      • In debug mode, the swiping should now also run better
  • 1.34
    • B4I The GestureRecognizer is no longer needed
  • 1.35 (read more)
    • Add Designer Property BackGestureGap - Only for B4I. If you use the ViewPager on a 2nd page and still want to close the page with the swipe gesture then set the checkbox to true
      • Default: False
  • 2.00 (read more)
    • New dependency in B4J: jPager
    • Removed dependency in B4J: xCustomListView
    • Add GetPanel
    • Add GetValue
    • In B4J, the jPager is now used instead of the xCustomListView
      • Better performance
      • No more unwanted scrolling with the mouse
  • 2.01
    • BugFixes and Improvements
    • Add Event PageChanged2
  • 2.02
    • Add set LoadingPanelHideDuration - The duration of how quickly the loading panel is hidden
      • Default: 500
  • 2.03
    • B4I BugFix - Prevents vertical scrolling when in horizontal mode and vice versa
  • 2.04
    • B4I BugFix - The safe area is no longer observed
      • Fixes unwanted behavior when the viewpager is in the safe area
  • 2.05
    • BugFix - by setting the set CurrentIndex or set CurrentIndex2, the PageChange and PageChanged event have been triggered multiple times
  • 2.06
    • B4A BugFix
  • 2.07
    • B4I BugFix
Have Fun :)
 

Attachments

  • B4X Example.zip
    9.9 KB · Views: 1,483
  • GestureRecognizer.bas
    11.2 KB · Views: 1,008
  • 1.30 Backup ASViewPager.b4xlib
    5.7 KB · Views: 602
  • ASViewPager.b4xlib
    8.2 KB · Views: 54
Last edited:

asales

Expert
Licensed User
Longtime User
Very nice. Thanks.
I have a doubt:
Can I use this lib as a carousel?
Like this: if I have 100 pages, when I get to the last page and move foward, I return to the first page?
 

Alexander Stolte

Expert
Licensed User
Longtime User
Can I use this lib as a carousel?
your'e lucky, i found a way on B4A and B4J. in B4I I still have to look for a workaround.

can you add a layout done on the designer?
what do you mean?
you can easily load a layout with AddPage, just load the layout to the panel you want to add with AddPage.
B4X:
Dim xpnl as B4XView
xpnl.LoadLayout("mylayout")
asv.AddPage(xpnl,"")
 

omarruben

Active Member
Licensed User
Longtime User
your'e lucky, i found a way on B4A and B4J. in B4I I still have to look for a workaround.


what do you mean?
you can easily load a layout with AddPage, just load the layout to the panel you want to add with AddPage.
B4X:
Dim xpnl as B4XView
xpnl.LoadLayout("mylayout")
asv.AddPage(xpnl,"")
excellent !!! thank you
 

Alexander Stolte

Expert
Licensed User
Longtime User
It could be great is there was an option to enable/disable circular slides. For example if it was enabled, when it reach the last right panel, if we try another time to the right, then it reaches the first panel. Same thing to the left, it could reach the last panel.
Can I use this lib as a carousel?
Update
1.12

  • [BETA] Add DesignerProperty Carousel - infinite swipe
    • On B4I Bounce Effect is disabled
  • B4I ScrollView Paging is now activated, this can improve the handling
In B4J, you simply jump to the 1st or last page, since there is no touch option there.
B4A Carousel and B4I Carousel
B4A Carousel.gif
B4I Carousel.gif
 

Rubsanpe

Active Member
Licensed User
Hi. I just update the library and now the app hang. The log is
B4X:
Error occurred on line: 109 (ASViewPager)
java.lang.RuntimeException: Cannot parse: null as boolean
    at anywheresoftware.b4a.BA.parseBoolean(BA.java:629)
    at anywheresoftware.b4a.BA.ObjectToBoolean(BA.java:699)
    at com.clarionero.boletinesoficiales.asviewpager._designercreateview(asviewpager.java:378)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:144)
    at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:61)
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:162)
    at anywheresoftware.b4a.objects.PanelWrapper.LoadLayout(PanelWrapper.java:134)
    at anywheresoftware.b4a.objects.B4XViewWrapper.LoadLayout(B4XViewWrapper.java:312)
    at com.clarionero.boletinesoficiales.b4xpage_dashboard$ResumableSub_B4XPage_Created.resume(b4xpage_dashboard.java:651)
    at com.clarionero.boletinesoficiales.b4xpage_dashboard._b4xpage_created(b4xpage_dashboard.java:593)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.debug.Debug.CallSub4(Debug.java:318)
    at anywheresoftware.b4a.debug.Debug.CallSubNew2(Debug.java:285)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.keywords.Common.CallSubDebug2(Common.java:1055)
    at com.clarionero.boletinesoficiales.b4xpagesmanager._createpageifneeded(b4xpagesmanager.java:1076)
    at com.clarionero.boletinesoficiales.b4xpagesmanager._showpageandremovepreviouspages(b4xpagesmanager.java:562)
    at com.clarionero.boletinesoficiales.b4xpages._showpageandremovepreviouspages(b4xpages.java:136)
    at com.clarionero.boletinesoficiales.b4xmainpage$ResumableSub_B4XPage_Created.resume(b4xmainpage.java:507)
    at anywheresoftware.b4a.shell.DebugResumableSub$DelegatableResumableSub.resumeAsUserSub(DebugResumableSub.java:48)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:144)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:193)
    at anywheresoftware.b4a.shell.DebugResumableSub$DelegatableResumableSub.resume(DebugResumableSub.java:43)
    at anywheresoftware.b4a.BA.checkAndRunWaitForEvent(BA.java:267)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:137)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:193)
    at anywheresoftware.b4a.keywords.Common$14.run(Common.java:1764)
    at android.os.Handler.handleCallback(Handler.java:883)
    at android.os.Handler.dispatchMessage(Handler.java:100)
    at android.os.Looper.loop(Looper.java:214)
    at android.app.ActivityThread.main(ActivityThread.java:7356)

Rubén
 

Rubsanpe

Active Member
Licensed User
Hi. Yes, i open the layout and save it. Error again. Later i opened it again, activated Carousel option, deactivate it again and save the layout. Same result.

Rubén
 

Alexander Stolte

Expert
Licensed User
Longtime User
In all layouts where the view is used, this must be done. Unfortunately I can not change this, so the designer works with properties.
it must be because in the example project the error does not occur and according to your error message the error comes from it.
 

Rubsanpe

Active Member
Licensed User
Ok, it is working now. I was using the control also in another page, but the error wasn't pointing there.

Thank you for your fantastic work.

Rubén
 
Last edited:

angel_

Well-Known Member
Licensed User
Longtime User
In all layouts where the view is used, this must be done. Unfortunately I can not change this, so the designer works with properties.
it must be because in the example project the error does not occur and according to your error message the error comes from it.
Maybe you can do this:
 

hl88

Member
Hi, I'm planning in making a visual novel style app using this library
user must take a choice and use button to jump to another page, no swiping.
set Enable = false didn't do anything
 
Last edited:

fbritop

Active Member
Licensed User
Longtime User
thanks, but I always update the number there only when I also update the properties there, that I do not always because it is work. ^^
I see!!!. The thing it that leads to confusion now than you can click on the Libs tab on the IDE

1619011003956.png


Yo see 1.13 and you arrive at the post and the first thing you see is 1.12 until you scroll down.. it´s just a detail

cheers
FBP
 
Top