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

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

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

Attachments

  • ASSwipeCard Example.zip
    12 KB · Views: 591
  • ASSwipeCard.zip
    4.8 KB · Views: 574
Last edited:
Click to expand...
asales

asales

Expert
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

asales

Expert
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

asales

Expert
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

Alexander Stolte

Expert
Licensed User
Longtime User
asales said:
1 - I don't saw the Click and LongClick events in the component.
Click to expand...
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?
Click to expand...
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

asales

Expert
Licensed User
Longtime User
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.
Click to expand...
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.
Click to expand...
Will be great.
Alexander Stolte said:
sorry for the long delay, i had corona for the 2nd time...
Click to expand...
No problem. I hope you are well now.

Thanks for the answers.
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime 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

asales

Expert
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.
 
Alexander Stolte

Alexander Stolte

Expert
Licensed User
Longtime User
asales said:
Is possible add more space to the margins left and right and adjust the text?
Click to expand...
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?
 
hears

hears

Active Member
Licensed User
Longtime User
do you have alipay or Ethereum coin address ? many people only can pay by this way
 
D

Daica

Active Member
Licensed User
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
 
You must log in or register to reply here.

Similar Threads

Marc DANIEL
Nouvelle version de B4XFrenchTurtle
Replies
1
Views
772
Marc DANIEL
Marc DANIEL
M
  • Solved
iOS Question [SOLVED] [B4X] Decode AES encoded STRING
Replies
11
Views
3K
aeric
aeric
R
Games sound pool alternatives?
Replies
6
Views
2K
redbeardrob
R
MrKim
  • Question
B4J Question [B4X] [SOLVED] com.sun.javafx.tk.quantum.PrismImageLoader2$PrismLoadListener imageLoadWarning
Replies
4
Views
1K
MrKim
MrKim
Computersmith64
  • Article
Tool [B4X] Crash Deobfuscator
Replies
1
Views
2K
Erel
Erel
Top