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

Discussion in 'Tutorials & Examples' started by Erel, Sep 24, 2017.

  1. Erel

    Erel Administrator Staff Member Licensed User

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

    clv.gif



    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:
    Code:
    Sub CustomListView1_UpdateHeaderSize (Height As Int)
       lblHeader.SetLayoutAnimated(
    000, 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.
     

    Attached Files:

    Last edited: Apr 30, 2019
  2. tamayo461

    tamayo461 Member Licensed User

    Hi @Erel, is there an example for iOs?
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    A new version was uploaded based on xCustomListView. It works on B4A and B4i.
     
    Johan Hormaza and MarcoRome like this.
  4. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

  5. Erel

    Erel Administrator Staff Member Licensed User

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

    CustomListView classes in both projects are identical.
     
    Alexander Stolte likes this.
  6. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    Yes , but the XCustomListView version 1.64 don't have the "
    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:

    Code:
    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
     
  7. Erel

    Erel Administrator Staff Member Licensed User

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

    Alberto Iglesias Well-Known Member Licensed User

    ahh ok, understood!
     
  9. Johan Hormaza

    Johan Hormaza Active Member Licensed User

  10. Erel

    Erel Administrator Staff Member Licensed User

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