B4J Question XCustomListView height issue

[Chris Lee]

Hi,

I'm working on a project where I need to dynamically create an Xcustomlistview in code. It's in horizontal layout and I have got it to scale the size of the items in the list to fit the height.

It's working well except that if I reduce the height of the Xcustomlistview below about 38dip a strange grey area appears. I've tried various things to try and understand what's going on but I'm struggling.

It seems like something within the XCustomListview won't reduce below a height of 38dip?

I'm using the library based version of the XCustomListview on B4J 7.31

The attached image and B4J project demonstrate the issue.

Here is the main code, this shows the basic approach I'm using. The attached project includes everything.

    Dim XI As XUI
    
    'Doesn't work?
    Dim TargetHeight As Int = 10dip
    
    'Works ok.
    'Dim TargetHeight As Int = 40dip
    
    Dim pControl As CustomListView
    
    Dim PropList As CustomListViewProp
    PropList.Initialize
    PropList.InsertAnimationDuration=100
    PropList.ShowScrollBar=False
    PropList.ListOrientation=PropList.XLIST_ORIENTATION_HORIZONTAL
    PropList.PressedColor=XI.Color_Blue
    PropList.DividerHeight=0
    
    pControl.Initialize(Me,"pControl")

    Dim TestPane As Pane
    TestPane.Initialize("TestPane")
    Dim View As B4XView=TestPane
    View.Color=XI.Color_Green
    
    Dim TempLabel As Label
    TempLabel.Initialize("TempLabel")
    Dim View As B4XView=TempLabel
    View.Color=XI.Color_Magenta
    TempLabel.Visible=False



    MainForm.RootPane.AddNode(TestPane,30dip,30dip,500dip,TargetHeight-2)

    pControl.DesignerCreateView(TestPane,TempLabel,PropList.Map)
    
    Dim sv As ScrollPane=pControl.sv

    sv.FitToHeight=True

    sv.PrefHeight=TargetHeight
    
    Dim ShowCyan As Boolean

    For i = 1 To 100
        Dim newItemPane2 As Pane
        newItemPane2.Initialize("newItemPane2")
        newItemPane2.PrefWidth=TargetHeight
        newItemPane2.Style="-fx-border-color: red;-fx-border-width: 1;"
        Dim View3 As B4XView=newItemPane2
        
        If ShowCyan Then
            View3.Color=XI.Color_Cyan
            ShowCyan=False
        Else
            View3.Color=XI.Color_Blue
            ShowCyan=True
        End If
        
        pControl.Add(View3,i)
    Next

 

[Erel]

Please use File - Export as zip when uploading projects. The layout file is missing.

 

[Chris Lee]

Hi Erel, I used the export feature, good to know for future posts. Updated file is attached.

I'm not using a layout file in this case, as I'm dynamically creating the CustomListView in code.

 

[Erel]

There are so many bad practices here that it is difficult for me to help you.

I'm not using a layout file in this case, as I'm dynamically creating the CustomListView in code.

This is a big mistake. Especially in B4J. Why not add the list with the designer and anchor it to both sides?

This is also a mistake:

newItemPane2.Style="-fx-border-color: red;-fx-border-width: 1;"

Set it with the designer. Very simple.

You are also modifying properties of the internal ScrollPane which you shouldn't.

I've replaced your code with:

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   Dim TargetWidth As Int = 10dip
   MainForm.RootPane.LoadLayout("1")
   Dim ShowCyan As Boolean
   For i = 1 To 100
       Dim newItemPane2 As B4XView = xui.CreatePanel("")
       newItemPane2.SetLayoutAnimated(0, 0, 0, TargetWidth, CustomListView1.sv.ScrollViewContentHeight)
       If ShowCyan Then
           newItemPane2.Color= xui.Color_Cyan
       Else
           newItemPane2.Color= xui.Color_Blue
       End If
       ShowCyan = Not(ShowCyan)
       CustomListView1.Add(newItemPane2, "")
   Next
   MainForm.Show
End Sub

Works fine.