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>

issue.mp4

[m1ga]

I think not many people use the <HeaderView> 😄 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 😄

[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.

[m1ga]

working fine now.
I've tested:

• two of my apps (was working before too, not using headers)
• kitchensink ("views - listview" has different variants, all work fine now)
• test app in this PR

[hansemannn]

Excellent!