ListView has empty cells while scrolling up/down

[prashantsaini1]

Issue: while scrolling the list-view, some items spacing is changed, leaving to empty cells sort of. This may have happened by setting constraints programmatically as I did not notice this issue on SDK 12.5.0.v20240820214230. A video is attached to see the issue.

Fix: using Barrier, we can avoid setting constraints programmatically and potentially fixing this issue.

Code as in recorded video:

<Alloy>
    <Window id="index">
        <ListView id="list">
            <ListSection>
                <HeaderView>
                    <View height="25" backgroundColor="teal">
                        <Label>Section Only Header View</Label>
                    </View>
                </HeaderView>
            </ListSection>

            <ListSection headerTitle="Only header title">
                <ListItem title="Item 1" backgroundColor='pink' />
            </ListSection>

            <!-- <ListSection footerTitle="Only footer title" backgroundColor='green'/> -->

            <ListSection>
                <ListItem title="Section item 1 : no header/footer" />
                <ListItem title="Section item 2 : no header/footer" />
            </ListSection>

            <ListSection>
                <HeaderView>
                    <View height="50" backgroundColor="pink">
                        <Label>Section with :: Header Footer View</Label>
                    </View>
                </HeaderView>

                <FooterView>
                    <View height="25" backgroundColor="green">
                        <Label>Section with Header :: Footer View</Label>
                    </View>
                </FooterView>
            </ListSection>

            <ListSection>
                <HeaderView>
                    <View height="50" backgroundColor="magenta">
                        <Label>Section 2 : Header View</Label>
                    </View>
                </HeaderView>

                <ListItem title="Section footer/header : Item 1" />
                <ListItem title="Section footer/header : Item 2" />

                <FooterView>
                    <View height="25" backgroundColor="orange">
                        <Label>Section 2 : Footer View</Label>
                    </View>
                </FooterView>
            </ListSection>

            <ListSection>
                <ListItem title="Section 3 : Item 0" />
                <ListItem title="Section 3 : Item 1" />
                <ListItem title="Section 3 : Item 2" />
                <ListItem title="Section 3 : Item 3" />
                <ListItem title="Section 3 : Item 4" />
                <ListItem title="Section 3 : Item 5" />
                <ListItem title="Section 3 : Item 6" />
                <ListItem title="Section 3 : Item 7" />
                <ListItem title="Section 3 : Item 8" />
                <ListItem title="Section 3 : Item 9" />
                <ListItem title="Section 3 : Item 10" />
                <ListItem title="Section 3 : Item 11" />
                <ListItem title="Section 3 : Item 12" />
                <FooterView>
                    <View height="25" backgroundColor="red">
                        <Label>Section 3 : Footer View</Label>
                    </View>
                </FooterView>
            </ListSection>
        </ListView>
    </Window>
</Alloy>

https://github.com/user-attachments/assets/c3dd5c96-5287-437c-9474-07656179a09d

[m1ga]

I think not many people use the <HeaderView> :smile: I had some users test the PR before and they had no issues, looks like they also didn't use headers.

Please run https://github.com/tidev/kitchensink-v2 with this PR:

Rows are pushed out to the left if they have a right image.

I didn't know about Barriers. Looks like that had saved me some code :smile:

[prashantsaini1]

@m1ga

Rows are pushed out to the left if they have a right image.

This is fixed.

I didn't know about Barriers. Looks like that had saved me some code 😄

There are Barrier, Guideline, Groups and Chains which makes ConstraintLayout powerful and enables it to create highly dynamic layouts.