Android Tutorial [B4X] [XUI] CustomListView with animated header

New CLVHeader class replaces this implementation: https://www.b4x.com/android/forum/t...ce-animated-header-to-xcustomlistview.105343/

This is a slightly modified version of xCustomListView. It adds a header. The header becomes shorter when the user scrolls down.

An event is raised, which allows you to adjust the header's layout based on the current height.
For example:

Sub CustomListView1_UpdateHeaderSize (Height As Int)
   lblHeader.SetLayoutAnimated(0, 0, 0, pnlTop.Width, pnlTop.Height)
   lblHeader.TextSize =  20 + 20 * (Height - CustomListView1.MinTop) / (CustomListView1.MaxTop - CustomListView1.MinTop)
End Sub

You can hide or show more views based on the height.
This is useful when you want to provide more options and still use all the available screen size for the content itself.

The animation should be smooth in release mode.

The modified xCustomListView class is identical in the two projects.

 

[tamayo461]

Hi @Erel, is there an example for iOs?

 

[Erel]

A new version was uploaded based on xCustomListView. It works on B4A and B4i.

 

[Alberto Iglesias]

Can you put this feature (animated header) in the latest version?

Now, the latest is V1.64....

https://www.b4x.com/android/forum/t...listview-cross-platform-customlistview.84501/

Thank you

 

[Erel]

The two projects were updated and they are now based on xCustomListView v1.64.

CustomListView classes in both projects are identical.

 

[Alberto Iglesias]

The two projects were updated and they are now based on xCustomListView v1.64.

CustomListView classes in both projects are identical.

Yes , but the XCustomListView version 1.64 don't have the "

The two projects were updated and they are now based on xCustomListView v1.64.

CustomListView classes in both projects are identical.

Strange, because in the file CustomListView.bas in XCustomLV post (version 1.6.4) You can't see for example the variable "Header" to put the panel, check this out:

Sub Class_Globals
    Private mBase As B4XView
    Public sv As B4XView
    Type CLVItem(Panel As B4XView, Size As Int, Value As Object, _
        Color As Int, TextItem As Boolean, Offset As Int)
    Private items As List
    Private mDividerSize As Float
    Private EventName As String
    Private CallBack As Object
    Public DefaultTextColor As Int
    Public DefaultTextBackgroundColor As Int
    Public AnimationDuration As Int = 300
    Private LastReachEndEvent As Long
    Private PressedColor As Int
    Private xui As XUI
    Private DesignerLabel As Label
    Private horizontal As Boolean
#if B4J
    Private fx As JFX
#else if B4A
    Private su As StringUtils
#else if B4i

#end if
    Private mFirstVisibleIndex, mLastVisibleIndex As Int
    Private MonitorVisibleRange As Boolean
    Private FireScrollChanged As Boolean
    Private ScrollBarsVisible As Boolean
End Sub

 

[Erel]

You need to use the modified version that was uploaded to the first post.
The feature was not added to the "standard" xCLV.

 

[Alberto Iglesias]

ahh ok, understood!

 

[Johan Hormaza]

Hi, it's possible that something like that could be done, Parallax style.
https://www.b4x.com/android/forum/threads/header-with-parallax-effect-for-ulv.97820/

 

[Erel]

https://www.b4x.com/android/forum/t...ce-animated-header-to-xcustomlistview.105343/