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

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,xCustomListView,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
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: 1.20

  • ASViewPager
    • Events:
      • 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
      • 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
Have Fun :)
 

Attachments

  • B4X Example.zip
    9.9 KB · Views: 358
  • GestureRecognizer.bas
    11.2 KB · Views: 174
  • ASViewPager.b4xlib
    5 KB · Views: 14
Last edited:

angel_

Well-Known Member
Licensed User
Thank you very much, it really works better than before but it still happens if the screen has a long list of elements (in this case a text list), it also happens frequently if we scroll from top to bottom but it is somewhat less problematic
 

Alexander Stolte

Expert
Licensed User
Thank you very much, it really works better than before but it still happens if the screen has a long list of elements (in this case a text list), it also happens frequently if we scroll from top to bottom but it is somewhat less problematic
strange, if the y value is greater than the x value, then it should stay on the side and not change sides. Does it stay on the side?
 

Alexander Stolte

Expert
Licensed User
I have a similar problem with a paused project where I use 2 ViewPagers, one Horizontal and the other Vertical and whenever I swipe horizontally the vertical one feels addressed too.
 

angel_

Well-Known Member
Licensed User
I have also observed (now on Android), that if you do the fast (unnatural) swipe up or down it jumps to another tab [v1.21]
 
Last edited:

angel_

Well-Known Member
Licensed User
I have also observed (now on Android), that if you do the fast (unnatural) swipe up or down it jumps to another tab [v1.21]
This is fixed, thank you

But another problem happens, if I change the focus (by code with the event) when pressing the tab, the tab line moves to the selected tab, returns to the previous one and finally returns to the selected tab
 

Alexander Stolte

Expert
Licensed User
I had the same problem, because you set the tab in the "PageChange" event, but at the same time the TabClick event is triggered.

The solution is to change the TabMenu tab in the "PageChange" event without triggering the event.

B4X:
Private Sub ASTabMenu1_TabClick(index As Int)
    ASViewPager1.CurrentIndex = index
End Sub

Private Sub ASViewPager1_PageChange(Index As Int)
    ASTabMenu_horizontal.SetTab(Index,False,False) 'with event = false
End Sub
 

angel_

Well-Known Member
Licensed User
B4X:
Private Sub ASTabMenu1_TabClick(index As Int)
    ASViewPager1.CurrentIndex = index
End Sub

Private Sub ASViewPager1_PageChange(Index As Int)
    ASTabMenu_horizontal.SetTab(Index,False,False) 'with event = false
End Sub
I have tried this solution but the same thing happens
 
hi all
its possible add CustomListView in page !?
i have some error like this

code
B4X:
    Dim tmp_xpnl As B4XView = xui.CreatePanel("")
    tmp_xpnl.LoadLayout("xclv")
    tmp_xpnl.SetLayoutAnimated(0,0,0,ASViewPager1.Base.Width,ASViewPager1.Base.Height)
    tmp_xpnl.BringToFront
    ASViewPager1.AddPage(tmp_xpnl,"")

    xclvitem.AddTextItem("1Aaaa" & CRLF & "Bbbb", "b")


*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
Panel size is unknown. Layout may not be loaded correctly.
Error occurred on line: 34 (B4XMainPage)
java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.keywords.Common.CallSubDebug2(Common.java:1055)
at com.as.viewpager.b4xpagesmanager._createpageifneeded(b4xpagesmanager.java:1060)
at com.as.viewpager.b4xpagesmanager._showpage(b4xpagesmanager.java:417)
at com.as.viewpager.b4xpagesmanager._addpage(b4xpagesmanager.java:245)
at com.as.viewpager.b4xpagesmanager._addpageandcreate(b4xpagesmanager.java:259)
at com.as.viewpager.b4xpagesmanager._initialize(b4xpagesmanager.java:165)
at com.as.viewpager.main._activity_create(main.java:408)
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 com.as.viewpager.main.afterFirstLayout(main.java:105)
at com.as.viewpager.main.access$000(main.java:17)
at com.as.viewpager.main$WaitForLayout.run(main.java:83)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6816)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1563)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1451)
Caused by: java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
at anywheresoftware.b4a.debug.Debug.CallSub4(Debug.java:336)
at anywheresoftware.b4a.debug.Debug.CallSubNew2(Debug.java:285)
... 24 more
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.debug.Debug.CallSub4(Debug.java:318)
... 25 more
Caused by: java.lang.IllegalArgumentException: Layout: -20 < 0
at android.text.Layout.<init>(Layout.java:187)
at android.text.StaticLayout.<init>(StaticLayout.java:478)
at android.text.StaticLayout.<init>(StaticLayout.java:464)
at android.text.StaticLayout.<init>(StaticLayout.java:442)
at android.text.StaticLayout.<init>(StaticLayout.java:422)
at anywheresoftware.b4a.objects.StringUtils.MeasureMultilineTextHeight(StringUtils.java:50)
at b4a.example3.customlistview._createlabel(customlistview.java:230)
at b4a.example3.customlistview._insertattextitem(customlistview.java:702)
at b4a.example3.customlistview._addtextitem(customlistview.java:78)
at com.as.viewpager.b4xmainpage._b4xpage_created(b4xmainpage.java:105)
... 27 more
** Activity (main) Resume **
 

Alexander Stolte

Expert
Licensed User
You need to add first the width/height and then load the layout:
B4X:
Dim tmp_xpnl As B4XView = xui.CreatePanel("")
tmp_xpnl.SetLayoutAnimated(0,0,0,ASViewPager1.Base.Width,ASViewPager1.Base.Height)
tmp_xpnl.LoadLayout("xclv")
 

angel_

Well-Known Member
Licensed User
Any improvement about this?
But another problem happens, if I change the focus (by code with the event) when pressing the tab, the tab line moves to the selected tab, returns to the previous one and finally returns to the selected tab
 
Top