Horizontal Scrollview with multiple CustomListViews

[PaulMeuris]

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.

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]

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?

Spoiler: Solutions

clv into viewpager

Hello, i'm trying to use one clv to show names of students from various classes. I want to use a viewpager to swap to classes. I tried this taken from viewpager example but i cant see the lists but only in the last page. Any idea please? Sub Class_Globals Private Root As B4XView...

www.b4x.com

[B4X] how to get a xCustomListView from a container if it was generated dynamically

I have a form with a xCustomListView, I now add this form to another xCustomListView as an item. How can I access this dynamic added xCustomListView now? This is not working: As these conventions are rather new, they are not used by some popular custom views such as xCLV. You can set the base...

www.b4x.com

 

[PaulMeuris]

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.