B4A Library CustomListView - A flexible list based on ScrollView

Discussion in 'Additional libraries, classes and official updates' started by Erel, Jul 15, 2012.

  1. Erel

    Erel Administrator Staff Member Licensed User

    Edit: latest version of CustomListView is available here: https://www.b4x.com/android/forum/t...-cross-platform-customlistview.84501/#content

    The native ListView is a optimized for very large lists. Instead of creating the views for each item, it reuses the same views when possible. This optimization makes it very difficult to customize the items.

    CustomListView is an implementation of a list based on ScrollView.

    CustomListView is suited for lists of up to 1000 or 2000 items.

    Advantages of CustomListView:
    • Each item is made of a Panel that can hold any views.
    • Items can be modified at any time.
    • It is possible to insert or remove items from any position.
    • Each item can have a different height.
    • Items height can be set automatically based on the text (using AddTextItem).

    Using CustomListView is simple:
    - First you should initialize the list and add it to a panel or activity.
    - Then you should add items.
    Each item is made of a panel that holds other views.
    AddTextItem is a convenient utility to add items made of a single label.

    The attached example creates two lists:



    The first list is made of simple text items.

    In the second list each item is created by loading another layout file.
    A nice advantage of using a layout file to create the cell, is that it allows us to use anchors and designer script to create a flexible layout that changes based on the screen size. Rotate the device to landscape to see it.

    V1.76:
    - ReachEnd event. Can be used to add more items when the user scrolls to the end.
    - Fix bug in LastVisibleIndex.

    V1.70:
    - FirstVisibleIndex / LastVisibleIndex - return the indices of the first and last visible items.
    - ScrollToItem - Similar to JumpToItem. Smoothly scrolls the list.

    V1.65:
    - Fixes an issue related to ReplaceItem where more and more StateListDrawables were created.

    V1.60:
    - Supports CharSequences as text items.

    V1.50:
    - Fixes an issue with GetItemFromView.
    - Inserted items are animated (using InsertAt or InsertAtTextItem).
    - New ReplaceAt method that replaces an existing item with a new one.


    V1.20 - Better designer support. Example code simplified.
    V1.10 - Adds designer support. CustomListView can now be added with the visual designer. Add a CustomView and then set its CustomType property to CustomListView.

    The latest versions of the library and source are attached separately.
     

    Attached Files:

    Last edited: Oct 17, 2017 at 6:48 AM
  2. mc73

    mc73 Well-Known Member Licensed User

    Great job, Erel - as always. Sometimes, I wonder, though, whether in a 'big' project containing many of such classes, would tend to use more resources than specialized routines. Just a thought, after seeing some limitations of the Android OS. Anyway I'm off topic, great job, again!
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    Assuming that the classes are well written and used correctly then you will not have any negative impact on performance.

    If you look at the code of SearchView and TableView you will see that they are highly optimized. This specific class is simpler as it is intended for limited sized lists (1000 - 2000 items).
     
    BitsAndBytes likes this.
  4. mc73

    mc73 Well-Known Member Licensed User

    I will surely take a look, after all, it's always interesting and provides great ideas!
     
  5. Informatix

    Informatix Expert Licensed User

    That would be great if I could pass an existing ScrollView to the class. This way, I could catch the ScrollView event, remove the panel needed to embed the scrollview and put this scrollview in a layout file (.bal).
    This class gives me a lot of good ideas to improve my Checklist class. Thank you.
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    It shouldn't be difficult to pass the ScrollView in the Initialize method.

    Note that in the example the two CustomListViews are added to two panels that are handled with the visual designer. You can use such a "holding" panels as the base for any custom view.
     
    BitsAndBytes likes this.
  7. Informatix

    Informatix Expert Licensed User

    Adding a panel just for holding a view, is it not a waste of resources?
     
  8. Erel

    Erel Administrator Staff Member Licensed User

    Panels (like most views) are pretty light. Adding a few panels will not have any impact on performance.
     
    BitsAndBytes likes this.
  9. Informatix

    Informatix Expert Licensed User

    There's a more reliable method to get the pressed drawable (I found this after many tries in my own class):
    Code:
    Dim r As Reflector
       r.Target = r.GetContext
       r.Target = r.RunMethod(
    "getResources")
       r.Target = r.RunMethod(
    "getSystem")
       
    Dim ID_PressedDrawable As Int
       ID_PressedDrawable = r.RunMethod4(
    "getIdentifier"Array As Object("list_selector_background_pressed""drawable""android"), Array As String("java.lang.String""java.lang.String""java.lang.String"))
       r.Target = r.GetContext
       r.Target = r.RunMethod(
    "getResources")
       PressedDrawable = r.RunMethod2(
    "getDrawable", ID_PressedDrawable, "java.lang.int")
    If you want to be convinced, replace this method by yours in my class CheckList and test the first layout ("Check only").
     
    Devan, koaunglay and lemonisdead like this.
  10. bluedude

    bluedude Well-Known Member Licensed User

    Saved my day

    Thanks,

    This saved my day :) Listviews are very limited and this call is exactly what I need.
     
  11. AscySoft

    AscySoft Active Member Licensed User

    Is it possible to create a list with some products where user is suppose to pick as many as he wants and then, on the same line(item) to put a number(textboxview, up/down customview or something) near any item he choose?

    For ex. one must pick some products and quantities on a single step!

    Sorry for my English. I hope YOU understand.
     
  12. Informatix

    Informatix Expert Licensed User

    I created two examples. The first is made with CustomListView, the second is made with another class: CheckList. I tried to get the same result with both.
    In this example, CheckList uses three functions (AddHeader, ExtendItem and CheckedList) which have no counterpart in CLV. Make your own choice between them.
     

    Attached Files:

    Last edited: Jul 22, 2012
    hani bassam and James Ryan Igay like this.
  13. AscySoft

    AscySoft Active Member Licensed User

    Thanks, that's a start.
    The first example is working well.
    I like the second one better, where you could display additional data (like price etc), but this example is not working too well
    When I try to scroll down, application crush, saying "Sub pnlsvtouch signature does not match expected signature".
    I am missing something?
     
  14. Informatix

    Informatix Expert Licensed User

    My mistake. I forgot to mention that you need the latest Reflection library.
     
  15. AscySoft

    AscySoft Active Member Licensed User

    Yes... this is working well. Thank you very much.
    So if I wanna put two buttons near qty box, like - and +, do you think it could be done? I should add it in the panel in "CreateItem", right?
     
  16. Informatix

    Informatix Expert Licensed User

    It's as simple as that.
     
  17. AscySoft

    AscySoft Active Member Licensed User

    Thanks, I already create that. Now I was just wandering, how to put the 3 views(plus/minus,qty) on the second line(on expanded panel), because to be honest... the list items tend to have more characters in description/name on real world app...

    And one other thing(with is related with the one above).... I think you should implement a list on global process(or class) because one may "lose" item checked after screen rotation ie.

    Thanks
     
    BillMeyer likes this.
  18. Informatix

    Informatix Expert Licensed User

    You don't need the expanded panel to create a second line. You just have to increase the item panel height and put the views below the existing ones.

    I cannot answer for the Erel's class, but for mine, I won't add this feature because it's not the class job. It does not store data. Use the StateManager module to handle that.
     
  19. AscySoft

    AscySoft Active Member Licensed User

    Thanks for the tip and for your time and patience.
    But I will try to make this 3 views created from code on checked event, for my knowledge and for a simple list with one line per item!
     
    Last edited: Jul 23, 2012
  20. Jaames

    Jaames Active Member Licensed User

    The list is laggy when .Add and .Clear is called multiple times..
    I'm loading 30 records , not too much...

    Why is that?
     
Loading...