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

Alexander Stolte · May 6, 2020

Hello Community,

This library is not free, because, it cost a lot of time and gray hair to create such views.

AS Swipe Card - a tinder like swipeable card view

a tinder like swipeable card viewhttps://www.b4x.com/android/forum/threads/b4x-xui-as-swipe-card-a-tinder-like-swipeable-card-view-payware.117415/#content

payhip.com

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

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

AS Swipe Card - a tinder like swipeable card view

a tinder like swipeable card viewhttps://www.b4x.com/android/forum/threads/b4x-xui-as-swipe-card-a-tinder-like-swipeable-card-view-payware.117415/#content

payhip.com

Alexander Stolte · Jan 30, 2022

i see the problem, i will fix it soon.

Alexander Stolte · Feb 3, 2022

Update

1.09
- BugFixes

asales · Feb 15, 2022

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)

Alexander Stolte · Feb 15, 2022

Update

1.10
- Designer BugFixes

asales · Feb 16, 2022

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.

Alexander Stolte · Feb 20, 2022

Udate

1.11
- BugFixes
- Base_Resize is now Public

New B4X Page Example in the first post.

asales · Feb 20, 2022

Alexander Stolte said:
Udate

1.11

BugFixes

Base_Resize is now Public

New B4X Page Example in the first post.

Works fine. Thanks!

asales · Feb 21, 2022

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 · Mar 2, 2022

asales said:
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.

asales said:
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 · Mar 2, 2022

Alexander Stolte said:
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.

Alexander Stolte said:
Your device is the limit.
I might add lazy loading at some point if it's really necessary.

Will be great.

Alexander Stolte said:
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 · Mar 2, 2022

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 · Aug 18, 2022

Is possible add more space to the margins left and right and adjust the text?

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.

Alexander Stolte · Aug 18, 2022

asales said:
Is possible add more space to the margins left and right and adjust the text?

No idea how to answer this question.
You add a panel to the list as you would in the xCustomListView. On this panel you can add what you want, get the label from the layout and resize it?

MarcoRome · Oct 10, 2022

Hi Alex. The donation done ( 186281617W2005323 ) can you send the pw in email. Thank you
Marco

hears · Nov 29, 2022

do you have alipay or Ethereum coin address ? many people only can pay by this way

Alexander Stolte · Nov 29, 2022

hears said:
do you have alipay or Ethereum coin address ?

No, sorry.

Daica · Dec 19, 2022

The attachment is for version 1.01 and not 2.00.
Could you please update attachment.

No wonder I would not find some of the options you guys were talking about lol

Alexander Stolte · Dec 19, 2022

Daica said:
The attachment is for version 1.01 and not 2.00.
Could you please update attachment.

What attachment? The example or the lib.???

Daica · Dec 19, 2022

Alexander Stolte said:
What attachment? The example or the lib.???

The library in the first post is version 1.01.
Sorry I did not clarify

Alexander Stolte · Dec 19, 2022

Daica said:
The library in the first post is version 1.01.

No? The 2. zip file is the lib.
I downloaded and unzipped it, it shows version 2.0. Also the .bas file is V2.0

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

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency