Horizontal Scrollview with multiple CustomListViews

PaulMeuris

Active Member
Licensed User
This piece of code snippet is an example of how to build an app with multiple lists.
By swiping left or right the next list comes into view.
A practical application of this code might be a grade book from a teacher who has multiple classes with multiple students in them.
Tapping on an item reveals in the log panel the combination of list number and item number.
Tapping on the list heading label shows the list number in the log panel.
All you have to do is fill in the lists and take action when you tap on an item or list header.
No extra libraries needed except of course the XUI Views for the CustomListView.
The Main layout contains the HorizontalScrollView covering the whole screen and anchored on all sides.
The clv_layout contains the CustomListView covering the whole screen and anchored on all sides.
Horizontal Scrollview with multiple CustomListViews:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private hsv1 As HorizontalScrollView
    Private leftpos As Int
    Private clv1 As CustomListView
    Private numlists As Int = 5
End Sub
Public Sub Initialize
    B4XPages.GetManager.LogEvents = True
End Sub
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    hsv1.Panel.RemoveAllViews
    leftpos = 0dip
    Log(hsv1.Width)
    For i = 1 To numlists
        Dim clv As CustomListView = set_clv(i)
        Dim lbl As Label
        lbl.Initialize("lbl")
        lbl.Tag = "List:" & i
        lbl.Text = "List number: " & i
        lbl.TextColor = Colors.Black
        lbl.Padding = Array As Int (10dip, 10dip, 10dip, 10dip)
        lbl.Typeface = Typeface.DEFAULT_BOLD
        lbl.Color = Colors.ARGB(255,200,201,255)
        hsv1.Panel.AddView(lbl,leftpos+5dip,0,hsv1.Width-10dip,45dip)
        hsv1.Panel.AddView(clv.AsView,leftpos+5dip,50dip,hsv1.Width-10dip,hsv1.Height)
        clv = fill_clv(i,clv)
        leftpos = leftpos + hsv1.Width
    Next
    hsv1.Panel.Width = ((i-1)*hsv1.Width)
End Sub
Private Sub set_clv(ipnl As Int) As CustomListView
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, hsv1.Width, hsv1.Height)
    p.LoadLayout("clv1_layout")
    clv1.AsView.RemoveViewFromParent
    Return clv1
End Sub
Private Sub fill_clv(icnt As Int, mclv As CustomListView) As CustomListView
    For x = 0 To 20
        mclv.AddTextItem("list: "&icnt&" item: "&x,icnt&"|"&x)
    Next
    Return mclv
End Sub
Private Sub hsv1_ScrollChanged(Position As Int)
    'Log(Position)
End Sub
Private Sub clv1_ItemClick (Index As Int, Value As Object)
    Log(Value)   
End Sub
Private Sub lbl_Click
    Dim lbl As Label = Sender
    Dim tag As String = lbl.tag
    Log(tag)
End Sub
Happy coding!
 

Alexander Stolte

Expert
Licensed User
Longtime User
And how do you add items to a specific customlistview afterwards?

For example, you want to add to the 3. list, 3 new rows, how to do that?
 

PaulMeuris

Active Member
Licensed User
All you have to do is fill in the lists and take action when you tap on an item or list header.
The fill_clv subroutine takes care of the filling of the CustomListView (CLV)
When you fill a CLV with data coming from a database table then the CLV shows the number of records from that table.
The SQL statement will have a test in the where clause for the list number.
And when you add records to the database table the CLV will show these new records when the page that holds the CLV is focused (again) (B4XPage_Appear).
Add a B4XPage_Appear subroutine to the MainPage and move the lines after the loadlayout from the B4XPage_Created to the B4XPage_Appear subroutine.
Now when the user returns from the maintenance (B4X)page (after adding records) the rebuild of the lists will take place.
It needs some more fine-tuning but you get the idea, right?
When you need to do some changes on the appearance of the CLV then you could use the GetAllViewsRecursive method on the HorizontalScrollView.Panel.
This panel contains the Label views and the CustomListView views. You might want to add a tag to the CLVs in this case.
 
Top