B4A Library [B4X] CLVSwipe - xCustomListView Swipe actions and pull to refresh

Discussion in 'Additional libraries, classes and official updates' started by Erel, Oct 15, 2018.

Thread Status:
Not open for further replies.
  1. Erel

    Erel Administrator Staff Member Licensed User

    CLVSwipe is a class that adds "swipe actions" and pull to refresh features to the standard xCustomListView library.

    It is compatible with B4A and B4i (currently not with B4J).
    Both features are optional.



    Using it is simple:

    1. Add the class to your project. It depends on XUI, xCustomListView and ViewsEx v1.30+.
    2. Initialize Swipe and pass the CustomListView.
    3. In B4i, call Swipe.Resize when the page is resized.

    Adding action commands:

    - Set the action colors:
    Code:
    Swipe.ActionColors = CreateMap("Delete": xui.Color_Red, "Do Something Else": xui.Color_Green, _
           
    "Action 1": xui.Color_Red, "Action 2": xui.Color_Blue, "Action 3": xui.Color_Yellow)
    - Create the items values with Swipe.CreateItemValue:
    Code:
    CustomListView1.AddTextItem($"Important item ${i} ..."$, Swipe.CreateItemValue(""Array("Delete""Do Something Else")))
    - Handle the ActionClicked event:
    Code:
    Sub Swipe_ActionClicked (Index As Int, ActionText As String)
    Pull to refresh:

    - Create the PullToRefreshPanel panel. This is the panel that appears when the user pulls the list.
    - Set it with Swipe.PullToRefreshPanel.
    - Handle the RefreshRequested event. Make sure to call Swipe.RefreshCompleted when done.
    - In B4i you need to call Swipe.ScrollChanged from the ScrollChanged event.

    B4A and B4i projects are attached. Note that the class module is identical in both projects.

    Updates

    V1.12 - Fixes an issue with the Resize method.
    V1.11 - Fixes an issue with horizontal swipes when the list is empty.
    v1.10 - Adds pull to refresh feature.

    Latest version is attached separately.
     

    Attached Files:

    Last edited: May 7, 2019
  2. MarcoRome

    MarcoRome Expert Licensed User

    Great Feature !!!
     
  3. Myr0n

    Myr0n Active Member Licensed User

    Awesome.
    Thank you

    Is it possible to define Left or Right swipe event independently?
     
  4. Erel

    Erel Administrator Staff Member Licensed User

    Only swiping to the left is implemented. However it shouldn't be too complicated to modify the class and support swiping to the right. Try it.
     
    Peter Simpson likes this.
  5. Myr0n

    Myr0n Active Member Licensed User

    Ok

    Thank you
     
  6. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    ahhhhh, i see good potential for a better swipe to refresh feature :cool:
     
  7. Erel

    Erel Administrator Staff Member Licensed User

    Done. V1.10 released with pull to refresh.
     
  8. ocalle

    ocalle Active Member Licensed User

    Great! Thanks by this improvement! , is possible add images next to row data?
     
    Last edited: Oct 16, 2018
  9. Erel

    Erel Administrator Staff Member Licensed User

    Yes. The relevant code is in CreateActionButtons. You can modify it and create whatever layout you need.
     
    Harris and ocalle like this.
  10. Yuri Cinesi

    Yuri Cinesi Member Licensed User

    Amazing work as usual. Would it be possible to have the refresh work even when at the top of the listview?
     
  11. Erel

    Erel Administrator Staff Member Licensed User

    Do you mean when not at the top? How will it know whether the user wants to scroll the list or refresh it?
     
  12. Yuri Cinesi

    Yuri Cinesi Member Licensed User

    Apologies, I wasn't very clear. I meant that if the user is already at the top of the list (for example they've just opened the app) swiping up does nothing (at least on my device). I was wondering if it would be possible to change that.
     
  13. Erel

    Erel Administrator Staff Member Licensed User

    Just tested it on the B4A implementation. I run the example and I can immediately refresh the list.
     
  14. Yuri Cinesi

    Yuri Cinesi Member Licensed User

    I cannot. Must be a quirk of this specific device (Huawei P8 lite). Thank you for the assistance.
     
  15. MarcoRome

    MarcoRome Expert Licensed User

    Huawei in general have a lot problem ( direct experience )
     
  16. Eduardo Enri

    Eduardo Enri Member Licensed User

    At least in my case, some layout components as ProgressBar are masked (hidden) by the clv component when Swipe module is initialized. My solution is to use the BringToFront method such that:

    Code:
    ProgressBar1.BringToFront
    Is there any other more elegant solution?

    Thanks in advance!
     
  17. Erel

    Erel Administrator Staff Member Licensed User

    Please upload a small example that demonstrates the issue.
     
  18. Eduardo Enri

    Eduardo Enri Member Licensed User

    Ok, attachment. It is a simple copy of the original example 'B4A CLVSwipe' that adds a single Progressbar2 component to the main layout.

    I have simply included this line of code in the Main activity module:

    Code:
    ProgressBar2.BringToFront
    It also happens with panels.
     

    Attached Files:

  19. Erel

    Erel Administrator Staff Member Licensed User

    This is expected as a new panel is added and CLV is added to the new panel. Your solution looks very elegant to me. You can also send CLVSwipe to the back if you prefer:
    Code:
    Swipe.Base.SendToBack
     
    Eduardo Enri likes this.
  20. Eduardo Enri

    Eduardo Enri Member Licensed User

    Ok.
    I prefer your alternative, I think it's simpler.

    Thank you.
     
Thread Status:
Not open for further replies.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice