B4J Question [Solved] CLVExpandable

[LucaMs]

P.S. Solved - see post #7

Something isn't working properly.

I tried for hours , even with the help of Copilot, without being able to solve the problem.
Until I realized that the example project attached to the thread:
https://www.b4x.com/android/forum/t...g-or-collapsing-xcustomlistview-items.106148/
has the same problem.

The project works fine if the number of items is 20:

which is the value in the project. If you change it to 2, 3, 4, or probably any other number, the bug you see in the animated GIF appears (I intentionally slowed down the animation just to highlight the bug):

 

[pixet]

I tried to solve it this way:
I added an "If" in the CLVExpandable.bas module in the "Sub ResizeItem" to check if I'm on the last "Item."

'mod's by Pixet
' verifica se è l'ultimo item
'    'forza scroll all'ultimo Item' --> mCLV.ScrollToItem(mCLV.Size-1)
    If Index = (mCLV.Size -1) Then
        ' se l'ultimo item
        'scrool up and show item
        mCLV.ScrollToItem(mCLV.Size-1)
    End If

You can create both an entry and exit animation for the last item by adding a "Pane" above the last item with the same background color as the mCLV and then, in a loop/for/next, resize it, reducing its size, making it disappear and thus removing it from the mCLV.

 

[LucaMs]

Thanks for trying.

I tested your version, the project you attached, with 3 items, but the problem persists.

 

[LucaMs]

I was wondering why this bug only appears with a certain number of items, and I finally figured out at least this!

The item that opens/closes has a certain height; if the sum of the heights of the title bars of subsequent items is greater than that height, the problem won't be noticed, but it still persists.

Here the sum of 3-4-5-6 is greater than the expandable part of item #2, so you don't see the expandable panel of item #2 and you "think" that there is no error.

Same project. The sum of the heights of headers 5 and 6 is less than the height of the expandable panel in item 4.

This happens because the panel is animated immediately and the scrolling does not occur during that animation but at the end of it.

 

[pixet]

What I could see by slowing down the animation is that it creates the (landing) panel for the clicked item and adds the space (of the next closed item) where the last item will land after the animation. Is this the action you mean?

 

[LucaMs]

What I could see by slowing down the animation is that it creates the (landing) panel for the clicked item and adds the space (of the next closed item) where the last item will land after the animation. Is this the action you mean?

The expandable part of the clicked element is immediately and fully displayed (I believe it's just a copy), and only then does the movement begin, the scrolling of the subsequent items.
These two things should instead be aligned; the expandable panel should gradually increase in height (appear) WHILE the other items are moved/scrolled.

 

[LucaMs]

Solved!

Modified the Expandable class, with the help of Copilot.

Erel, the Expandable version 2 is in the attached project, I'd say it's important.

I haven't tested it with B4A (let alone B4I, since I don't have it), but it should work.

 

[pixet]

It seems there's still the problem with scrolling in the last item, as highlighted above. If the overall size (height) of the all number of items in the CLV is greater than the height of the panel, it won't scroll automatically. Let me explain: I increased the number of items in the CLV to 20. If you go to the last item and click the triangle to expand it, it should scroll up, adding the new panel with its items. However, to see it, you have to manually scroll the panel.

 

[Cableguy]

If you go to the last item and click the triangle to expand it, it should scroll up, adding the new panel with its items. However, to see it, you have to manually scroll the panel.

clv1.ScrollToItem(Index)

 

[Cableguy]

I am in the early stages of a project that will use CLV Expandable as the main view, with about 10 items max, but It will be populated by user added items, so I may have to deal with this problem...
One way that occurred to me was to use animation.translate along with the item's panel setlayoutanimated to create the illusion that the Item topbar "walks" with the growth of the Item's panel