B4A Library [B4X] [XUI] xCustomListView - cross platform CustomListView

Discussion in 'Additional libraries, classes and official updates' started by Erel, Oct 1, 2017.

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

    Erel Administrator Staff Member Licensed User

    Update: As several other libraries depend on xCustomListView library, it is no longer recommended to use the code module. Use the library instead. There are several extension classes that add more features to xCLV. They are listed at the end of this post.

    Video tutorial:



    xCustomListView is an implementation of CustomListView based on XUI library. It provides all the features of the original CustomListView and it is compatible with B4A, B4J and B4i.

    [​IMG] [​IMG] [​IMG]

    [​IMG]

    This class replaces the platform specific CustomListView classes. It is recommended to use this one for new projects.

    Change log:

    - V1.71 (B4i only) - Fixes an issue related to iOS 9- devices.
    - V1.70 - ItemLongClick event (right click in B4J).
    - V1.68 - Fixes a bug with ResizeItem / ReplaceAt and lists with single item.
    - PressedColor is now a public field.
    - Setting the PressedColor to a transparent color disables the item click color animation. This is useful if you want to replace it with your own implementation.
    - V1.66 - Improves the text measurement of text items in B4J.
    - V1.65 - Fixes an issue in B4i only where the CSBuilder colors were ignored.
    - V1.64 - Fixes an issue with ScrollToItem / JumpToItem in B4i.
    - V1.63 - Bug fixes, Refresh method to force VisibleRangeChanged to be raised, several private subs are now public, designer property to hide the scroll bar.
    - V1.54 - Allows using CSBuilder with AddTextItem in B4i (it is also supported in B4A).
    - V1.53 - Fixes an issue with VisibleRangeChanged event and CLV.Clear
    - V1.52 - Fixes an issue with CLV.RemoveAt
    - V1.51 - Fixes an issue which caused the LastVisibleIndex and FirstVisibleIndex properties to be hidden.

    - V1.50 - Large update.
    - V1.20 - Adds support for horizontal orientation.
    Set it in the designer.
    Add items like this:
    Code:
    clv2.Add(CreateListItem($"Item #${i}"$160dip, clv2.AsView.Height), $"Item #${i}"$)
    'Instead of
    'clv2.Add(CreateListItem($"Item #${i}"$, clv2.AsView.Width, 160dip), $"Item #${i}"$)
    Don't use the source code. Use the preinstalled xCustomListView library instead.
    Libraries such as XUI Views depend on the library and will not work properly with the module.

    Extension classes:

    CLVExpandable (B4X) - Allows expanding and collapsing items: https://www.b4x.com/android/forum/t...g-or-collapsing-xcustomlistview-items.106148/
    CLVSwipe (B4A and B4i) - Adds swipe actions and swipe to refresh feature: https://www.b4x.com/android/forum/threads/98252/#content
    CLVHeader - (B4X) - Adds a nice animated header to the list: https://www.b4x.com/android/forum/t...ted-header-to-xcustomlistview.105343/#content
     

    Attached Files:

    Last edited: Sep 2, 2019
  2. Sandman

    Sandman Well-Known Member Licensed User

    Does this mean it will be provided as a built-in class for new versions of B4X?
     
  3. themr23

    themr23 Member Licensed User

    Update: Erel extended the original (top post) to support Horizontal as of v1.20.

    I extended the CustomListView.bas to allow Horizontal scrolling (B4A, but not B4I,J as of yet). Adding here in case others need it. Attached.

    Erel, the sample includes nested CLV's. But the nested ones do not scroll. Is there a way to solve that? (I posted this question to the Q forum).

    Edit: V1.1 added. Cleaned up and fixed to allow horizontal scrolling of items for the horizontal control that is inside the vertical list
    Edit2: Tried to add v1.1 to this post but the forum isn't allowing it (More Options... causes a site error). It's in post#12.
    Edit3: Removed the old attachment, superceded by #12.
     
    Last edited: Jan 22, 2018
    luke2012 likes this.
  4. Mahares

    Mahares Well Known Member Licensed User

    I am getting this error when I run Erel's above example with B4A 7.3. XUI lib is installed in additional lib folder. and the line that gets hilighted in the xCustomListView v1.01 Class is: DefaultTextBackgroundColor = mBase.Color

    *** Service (starter) Create ***
    ** Service (starter) Start **
    ** Activity (main) Create, isFirst = true **
    Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example.customlistview
    Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example.customlistview
    customlistview_designercreateview (B4A line: 51)
    DefaultTextBackgroundColor = mBase.Color
    java.lang.NoSuchFieldException: mSolidColors
    at java.lang.Class.getDeclaredField(Class.java:939)
    at anywheresoftware.b4a.objects.B4XViewWrapper.getColor(B4XViewWrapper.java:263)
    at b4a.example.customlistview._designercreateview(customlistview.java:494)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:186)
    at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:67)
    at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:162)
    at anywheresoftware.b4a.objects.ActivityWrapper.LoadLayout(ActivityWrapper.java:209)
    at b4a.example.main._activity_create(main.java:370)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:186)
    at b4a.example.main.afterFirstLayout(main.java:102)
    at b4a.example.main.access$000(main.java:17)
    at b4a.example.main$WaitForLayout.run(main.java:80)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:145)
    at android.app.ActivityThread.main(ActivityThread.java:6939)
    at java.lang.reflect.Method.invoke(Native Method)
    at java.lang.reflect.Method.invoke(Method.java:372)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1404)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1199)
     
  5. Erel

    Erel Administrator Staff Member Licensed User

    What is the device OS version?
     
  6. Mahares

    Mahares Well Known Member Licensed User

    1. It does not work on OS 5.1.1, but works on OS 4.2.2 and 7.0.

    2. When it works, the log shows:
    Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example.customlistview
    How do you get rid of this log

    3. Also, I am not getting the top right screenshot look in the above example, only the top left screenshot.
    Thank you
     
  7. DonManfred

    DonManfred Expert Licensed User

    The top right is a Screen from the B4i Version
    Top left is Android. And the Bottom one is B4J
     
  8. DonManfred

    DonManfred Expert Licensed User

    Try to remove the CLV from your layout and place a new one giving the same name. Dont forget to save the Layout ;-)
     
    Peter Simpson and Mahares like this.
  9. Erel

    Erel Administrator Staff Member Licensed User

  10. Mahares

    Mahares Well Known Member Licensed User

    After the XUI update to 1.1, it now works on OS 5.1.1.
    But, if you can find a way to completely eliminate the the annoying below message, without having to ignore it or without having to resort to @DonManfred 's trick, that will make the code a lot cleaner.
    Class not found: anywheresoftware.b4a.samples.customlistview.customlistview, trying: b4a.example3.customlistview
     
  11. Misterbates

    Misterbates Active Member Licensed User

    It's not "a trick".

    The issue may be coming from a class reference inside your designer layout, which in turn comes from adding a previous version of CLV to your layout then upgrading the CLV custom view. To remove the message, remove CLV from your designer layout, re-add (and update designer properties to be what they were previously) then save the layout. The layout will then reference the new version of the class and the message will be gone.
     
    Pencil3, mangojack and Ed Brown like this.
  12. themr23

    themr23 Member Licensed User

    Edit: V1.1 added. Cleaned up and fixed to allow horizontal scrolling of items for the horizontal control that is inside the vertical list
    Tried to add to original post but the forum isn't allowing it

    V1.2 Added. Incorporated Erel's CustomListView 1.02 updates.
     

    Attached Files:

    Last edited: Oct 22, 2017
  13. Erel

    Erel Administrator Staff Member Licensed User

    CustomListView v1.02 is released. It fixes an issue with AsView not returning the top most control.

    It depends on XUI v1.3+.
     
  14. Rusty

    Rusty Well-Known Member Licensed User

    Can you add EditTexts, and other views to this control?
    If so, how would one do this? (example?)
    Thanks,
    Rusty
     
  15. Misterbates

    Misterbates Active Member Licensed User

    Create a panel, add the controls you want (with callbacks as needed) then add the panel to the custom list view
     
  16. Erel

    Erel Administrator Staff Member Licensed User

    Yes. See the example. The items layout is created from a layout file. You can add whichever views you like.
     
    Rusty likes this.
  17. JLS

    JLS Member Licensed User

    Hi everybody,

    For some reason, it is not possible to set the "Divider Color" to Transparent. It always appears with a solid color.

    Is this a bug?
     
  18. Reviewnow

    Reviewnow Active Member Licensed User

    This uses the desigerproperty in side the customlistview class

    Code:
    'Change the following and it should work
    #DesignerProperty: Key: DividerColor, DisplayName: Divider Color, FieldType: Color, DefaultValue: 0xFFD9D7DE

    'TO
    #DesignerProperty: Key: DividerColor, DisplayName: Divider Color, FieldType: Color, DefaultValue: 0x00FFFF00
     
  19. JLS

    JLS Member Licensed User

    I tried this, but it still appears solid white. :(
     
  20. Erel

    Erel Administrator Staff Member Licensed User

    [​IMG]

    1. Make sure that the background color is set to Default in the designer.
    2. Set the divider color to Transparent.
    3. Add this line after the layout is loaded:
    Code:
    clv1.DefaultTextBackgroundColor = Colors.Black
     
    luke2012 likes this.
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