B4A Library [B4X] [XUI] AS Swipe Card - a tinder like swipeable card view [Payware]

Hello Community,

This library is not free, because, it cost a lot of time and gray hair to create such views.
Donations from 7€ are valid. (You can donate any amount you want :))
Please write SwipeCard in the order description, thanks.

Thanks for your understanding. :)

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.

Features
  • cross-platform compatible
  • enable or disable events
  • add and remove cards
  • scroll to cards
  • animations
  • swipe with fingers
  • and more...
sc_1.gif
sc_2.gif
Bildschirmaufnahme 2020-05-06 um 19.47.082.gif


On B4J and B4I you need a base panel, only this way the events can be triggered by your other control elements, see the example projects to learn more.

ASSwipeCard
Author: Alexander Stolte
Version: 2.00

  • ASSwipeCard
    • Events:
      • BaseResize (Width As Double, Height As Double)
      • IndexChanged (index As Int)
      • LazyLoadingAddContent (Parent As B4XView, Value As Object)
      • ReachEnd
      • SwipeStateChange (state As Int)
      • SwipeStateChanged (state As Int)
    • Functions:
      • AddCard (xpnl As B4XView, Tag As Object) As String
      • Base_Resize (Width As Double, Height As Double) As String
      • Class_Globals As String
      • Clear As String
        Clears all cards
      • Commit As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getBase As B4XView
      • GetCard (Index As Int) As B4XView
      • getCardBackground As B4XView
      • getCurrentIndex As Int
      • getLazyLoadingExtraSize As Int
      • getSize As Int
      • getTag (Index As Int) As Object
      • IniParent (parent As B4XView) As String
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextCard (swipe_state As Int)
      • PreviousCard (swipe_state As Int)
      • RemoveCard (Index As Int) As String
      • setCurrentIndex (index As Int) As String
      • setLazyLoadingExtraSize (ExtraSize As Int) As String
      • SwipeState_BOTTOM As Int
      • SwipeState_LEFT As Int
      • SwipeState_NEUTRAL As Int
      • SwipeState_RIGHT As Int
      • SwipeState_TOP As Int
      • SwipeStateRandom As Int
    • Properties:
      • Base As B4XView [read only]
      • CardBackground As B4XView [read only]
      • CurrentIndex As Int
      • LazyLoadingExtraSize As Int
      • Size As Int [read only]
  • SwipeCardItems
    • Fields:
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Tag As Object
      • xpnl_cardbase As B4XView
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
  • 1.01
    • Add Designer Property: EnableLeftRightSwipe -Enabled or Disabled the swipe gesture for left and right swiping
    • Add Designer Property: EnableTopBottomSwipe -Enabled or Disabled the swipe gesture for top and bottom swiping
  • 1.02
    • Add Event "SwipeStateChange" - Triggers when the card is moved with the finger in one direction e.g. LEFT,RIGHT,TOP,BOTTOM or NEUTRAL
    • Event "SwipeStateChanged" - Triggers now only when the user has released the card
    • Add Clear - clears all cards
  • 1.03
    • get CurrentIndex is now readable
  • 1.04
    • Add Designer Properties - If true then the previous card is shown as next card if you swipe in the right direction
      • SwipeLeft2Previous
      • SwipeRight2Previous
      • SwipeTop2Previous
      • SwipeBottom2Previous
  • 1.05
    • BugFixes for the Features of V1.04
  • 1.06
    • BugFix
  • 1.07
    • BugFix
  • 1.08
    • Add Designer Property Rotation - activates or deactivates the rotation during the movement
      • Default: True
  • 1.09
    • BugFixes
  • 1.10
    • Designer BugFixes
  • 1.11
    • BugFixes
    • Base_Resize is now Public
  • 2.00
    • 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
    • Add get and set LazyLoadingExtraSize
    • Add Commit - Triggers the LazyLoadingAddContent event
      • Call this after you have added the cards
Have Fun :)
@Alexander Stolte
 

Attachments

  • ASSwipeCard Example.zip
    12 KB · Views: 162
  • ASSwipeCard.zip
    4.8 KB · Views: 144
Last edited:

asales

Well-Known Member
Licensed User
Longtime User
Just for information: if you run the examples, open the layout and save it before.
If you don't this will get this error:

B4X:
asswipecard_ini_props (java line: 297)
java.lang.RuntimeException: Cannot parse: null as boolean
    at anywheresoftware.b4a.BA.parseBoolean(BA.java:629)
    at anywheresoftware.b4a.BA.ObjectToBoolean(BA.java:699)
 

asales

Well-Known Member
Licensed User
Longtime User
Hello Alexander,
I have some questions:

1 - How can I load a layout (with labels, images and buttons) to the card?
I tried to change this:
Dim xpnl_cardbase As B4XView = CreateLabel("")
to this:
Dim xpnl_cardbase As B4XView = xui.CreatePanel("")
but I get this error:
'java.lang.RuntimeException: Type does not match (class anywheresoftware.b4a.BALayout)

2 - In the B4J example the button "Go To First Card" don't works.

3 - I want to save the card index and go to this index when the user start the app.
I made some changes to test.
With 10 cards (index 0-9), if I started in the index 8 and move to the last, I get this issues:
a) I don't see the button and label "You Reached the End" when the last card is show.
b) After click in the Next - in the last item (#9) - the first card (#0) is show and not the label and button "Go To First Card".
B4X:
For i = 0 To 10 -1  
    Dim xpnl_cardbase As B4XView = CreateLabel("")
    (...)
    ASSwipeCard1.AddCard(xpnl_cardbase,"")
Next

ASSwipeCard1.CurrentIndex = 8  'last index used

Thanks for your support.
 

asales

Well-Known Member
Licensed User
Longtime User
1 - I don't saw the Click and LongClick events in the component.
Can we have this?
I want to use a click to open another module with information of the selected card and a longclick to confirm and remove the card.

2 - There is a limit of cards added to the component? To avoid issues like out of memory, for example?

Thanks for your support.
 

Alexander Stolte

Expert
Licensed User
1 - I don't saw the Click and LongClick events in the component.
There is a reason why this is not included, because it is not possible, because the Touch Event steals the events.
You have to add a panel that triggers a click event and then check the current index.

2 - There is a limit of cards added to the component? To avoid issues like out of memory, for example?
Your device is the limit.
I might add lazy loading at some point if it's really necessary.

sorry for the long delay, i had corona for the 2nd time...
 

asales

Well-Known Member
Licensed User
Longtime User
There is a reason why this is not included, because it is not possible, because the Touch Event steals the events.
You have to add a panel that triggers a click event and then check the current index.
I understand. I'll try this.
Your device is the limit.
I might add lazy loading at some point if it's really necessary.
Will be great.
sorry for the long delay, i had corona for the 2nd time...
No problem. I hope you are well now.

Thanks for the answers.
 

Alexander Stolte

Expert
Licensed User
Update
  • 2.00
    • 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
    • Add get and set LazyLoadingExtraSize
    • Add Commit - Triggers the LazyLoadingAddContent event
      • Call this after you have added the cards
LazyLoading
B4X:
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("frm_main")
   
    ASSwipeCard1.IniParent(Root)
   
    For i = 0 To 100 -1
        Dim xpnl_cardbase As B4XView = xui.CreatePanel("")
        xpnl_cardbase.SetLayoutAnimated(0,0,0,ASSwipeCard1.Base.Width,ASSwipeCard1.Base.Height)
        ASSwipeCard1.AddCard(xpnl_cardbase,i)
    Next
   
    Sleep(0)
    ASSwipeCard1.Commit
   
End Sub

Private Sub ASSwipeCard1_LazyLoadingAddContent(Parent As B4XView, Value As Object)
    Dim xpnl_cardbase As B4XView = CreateLabel("")
    xpnl_cardbase.SetColorAndBorder(xui.Color_ARGB(255,Rnd(1,254), Rnd(1,254), Rnd(1,254)),0,0,10dip)
    xpnl_cardbase.Text = "Item #" & Value
    xpnl_cardbase.SetTextAlignment("CENTER","CENTER")
    xpnl_cardbase.TextColor = xui.Color_White
    xpnl_cardbase.Font = xui.CreateDefaultBoldFont(20)
    Parent.AddView(xpnl_cardbase,0,0,ASSwipeCard1.Base.Width,ASSwipeCard1.Base.Height)
End Sub
 

asales

Well-Known Member
Licensed User
Longtime User
Is possible add more space to the margins left and right and adjust the text?
1660851067102.png

I tried to change this code, but there is no effect:
B4X:
xpnl_cardbase.SetLayoutAnimated(0,0,0,ASSwipeCard1.Base.Width,ASSwipeCard1.Base.Height)

to

xpnl_cardbase.SetLayoutAnimated(0,10%x,5%y,ASSwipeCard1.Base.Width - 10%x, ASSwipeCard1.Base.Height - 5%y)
Thanks in advance.
 
Top