tidev / titanium-sdk

🚀 Native iOS and Android Apps with JavaScript
https://titaniumsdk.com/
Other
2.76k stars 1.21k forks source link

fix(android): fix ListView layout with header and footer only #14117

Closed m1ga closed 2 months ago

m1ga commented 2 months ago

There is an issue with ListView sections that don't have a content and only a header and footer:

Screenshot_20240917-211111

<Alloy>
    <Window>
        <ListView>
            <ListSection>
                <ListItem title="Item" />
                <ListItem title="Item" />
            </ListSection>

            <ListSection>
                <HeaderView>
                    <View height="50" backgroundColor="#111">
                        <Label>Section 2 : Header View - item height=0</Label>
                    </View>
                </HeaderView>

                <ListItem height="0"/>

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

            <ListSection>
                <HeaderView>
                    <View height="50" backgroundColor="#111">
                        <Label>Section 2 : Header View - no item</Label>
                    </View>
                </HeaderView>

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

            <ListSection>
                <FooterView>
                    <View height="25" backgroundColor="#444">
            <Label>Section only footer View - no item</Label>
                    </View>
                </FooterView>
            </ListSection>

            <ListSection>
        <ListItem title="Item from 4" />
        <ListItem title="Item from 4" />
                <FooterView>
                    <View height="25" backgroundColor="#444">
            <Label>Section 4 only footer View - and items</Label>
                    </View>
                </FooterView>
            </ListSection>

            <ListSection>
                <ListItem title="last Section Item 1" />
                <ListItem title="last Section Item 2" />
                <ListItem title="last Section Item 3" />
            </ListSection>
        </ListView>
    </Window>
</Alloy>

This PR will connect the footer top to the header bottom if there isn't any content: Screenshot_20240917-210822

Current workaround: add <ListItem height="0"/>

hansemannn commented 2 months ago

cc @prashantsaini1 can you review?

prashantsaini1 commented 2 months ago

I noticed a major issue in recent changes regarding layout updates. I raised this PR to fix it properly. Hopefully we can test it there.