B4J Question [SOLVED] Resizing ScrollPane doesn't adjust anchored contents

walt61

Active Member
Licensed User
Longtime User
I must be missing something fundamental here. When resizing the form's width, the contents (which are all anchored in the Designer) don't appear to resize with the ScrollPane and its InnerNode. Any insights would be greatly appreciated!

Code (which is the attached test project):
B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI

    Private itemHeight As Double = 40dip
    Private verticalScrollbarWidth As Double = 25dip ' Just setting/using this so that the background colours are all visible
    Private ScrollPane1 As ScrollPane ' Designer background colour: RED
    Private PaneContent As B4XView ' Designer background colour: GREEN
    Private PaneItem As B4XView ' Designer background colour: BLUE
    Private LabelItem As B4XView ' Designer background colour: WHITE
End Sub

Public Sub Initialize
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)

    Root = Root1
    Root.LoadLayout("MainPage")

    ScrollPane1.LoadLayout("scrollpanecontent", 0, 0)
    PaneContent.Width = Root.Width - verticalScrollbarWidth
    PaneContent.Height = Root.Height
    ScrollPane1.InnerNode.SetSize(Root.Width - verticalScrollbarWidth, Root.Height)

    For i = 0 To 99
        Dim p As B4XView = xui.CreatePanel("")
        p.SetLayoutAnimated(0, 0, 0, PaneContent.Width, itemHeight)
        p.LoadLayout("item")
        LabelItem.Text = "Item " & i
        PaneContent.AddView(p, 0, i * itemHeight, PaneContent.Width, itemHeight)
    Next

    ' Resize the ScrollPane height
    PaneContent.Height = 100 * PaneItem.Height
    ScrollPane1.InnerNode.SetSize(Root.Width, PaneContent.Height)

End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)

    PaneContent.Width = Width
    ' Innernode (PaneContent - GREEN) now resizes but its contents (BLUE) don't, and they're all anchored

End Sub

Before resizing:
BeforeResizing.png


After resizing:
AfterResizing.png
 

Attachments

  • testScrollPaneResize.zip
    4.9 KB · Views: 149

stevel05

Expert
Licensed User
Longtime User
When you add the panes to panecontent they are not anchored. You need to resize them in the B4xPage_Resize sub:

B4X:
Private Sub B4XPage_Resize (Width As Int, Height As Int)

    PaneContent.Width = Width
    
    For i = 0 To PaneContent.NumberOfViews - 1
        Dim P As B4XView = PaneContent.GetView(i)
        P.Width = Width - verticalScrollbarWidth
    Next
    ' Innernode (PaneContent - GREEN) now resizes but its contents (BLUE) don't, and they're all anchored

End Sub
 
Upvote 0

Mahares

Expert
Licensed User
Longtime User
Awesome, works like a charm (of course).
@walt61 : Whay didn't you take the xCustomlistview approach instead of the ScrollPane. It would be a lot simpler. Of course unless you have a reason that I am not aware of. In that case, it makes sense. With xCustomlistview, this will be your full code and will accomplish the same thing you are doing:
B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private itemHeight As Double = 40dip
    Private verticalScrollbarWidth As Double = 25dip ' Just setting/using this so that the background colours are all visible
    Private PaneItem As B4XView ' Designer background colour: BLUE
    Private LabelItem As B4XView ' Designer background colour: WHITE
    Private CustomListView1 As CustomListView
End Sub

Public Sub Initialize
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPageclv")   'has CustomListView1
    For i = 0 To 99
        Dim p As B4XView = xui.CreatePanel("")
        p.SetLayoutAnimated(0, 0, 0, CustomListView1.AsView.Width, itemHeight)
        p.LoadLayout("item")  'has PanelItem and inside it LabelItem
        LabelItem.Text = "Item " & i
        CustomListView1.Add(p, "Item " & i)
    Next
End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)
    PaneItem.Width = Width
    For i = 0 To PaneItem.NumberOfViews - 1
        Dim P As B4XView = PaneItem.GetView(i)
        P.Width = Width - verticalScrollbarWidth
    Next
End Sub

Private Sub CustomListView1_ItemClick (Index As Int, Value As Object)
    Log(Value)    
End Sub
 
Upvote 0

johnmie

Active Member
Licensed User
Longtime User
Funny, I have the same problem, i.e. I don't know where to set the pane width in BBListItem.
My app contains an illustrated Help page using an expandable Customlistview with 12 panes in BBcode.
All except the first one display correctly, but the first one just shows only a very long but narrorw list (each word on a separate line).
HOWEVER. when I turn the tablet to change scree orientation back and forth and restart the page again, even the top pane appears correctly and full width.

I wonder why, particularly since the same app works without a problem in B4J.

Best,
john m.
 

Attachments

  • CLV1 expanded.png
    CLV1 expanded.png
    34.2 KB · Views: 122
Upvote 0

johnmie

Active Member
Licensed User
Longtime User
Just a thought, but did you add e.g. Sleep(0) after creating a CLV item? That way it could give the UI time to update, could be worth a shot!
That was the first thing I tried, but did not help.
But I found the solution in the meantime and it was in a totally different area.
Thanks anyhow
 
Upvote 0

johnmie

Active Member
Licensed User
Longtime User
Coding error: the pane with was only set in panes. Very stupid of me, a no-brainer in hindsight.
 
Upvote 0
Top