[TIMOB-28524] iOS 15: Extra spacing applied to list sections

GitHub Issue	n/a
Type	Improvement
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2021-08-20T13:10:29.000+0000
Affected Version/s	n/a
Fix Version/s	Release 10.1.0
Components	iOS
Labels	ListView, TableView, ios
Reporter	Hans Knöchel
Assignee	Joshua Quick
Created	2021-08-14T13:15:05.000+0000
Updated	2021-08-20T13:10:29.000+0000

Description

iOS 15 changes the way list sections apply their header spacing. To restore the old behavior, the new sectionHeaderTopPadding can be used (defaulting to sectionHeaderTopPadding). See the example screens (issue.png and fix.png) for reference. Example:

let tabGroup;

const window = Ti.UI.createWindow({ title: 'Window 1', backgroundColor: '#f0f0f0' });
window.add(Ti.UI.createListView({
    sections: [
        Ti.UI.createListSection({
            headerView: Ti.UI.createView({ height: 10 }),
            footerView: Ti.UI.createView({ height: 10 }),
            items: [
                { properties: { title: 'Test 1' } },
                { properties: { title: 'Test 2' } },
                { properties: { title: 'Test 3' } },
            ]
        }),
        Ti.UI.createListSection({
            headerView: Ti.UI.createView({ height: 10 }),
            footerView: Ti.UI.createView({ height: 10 }),
            items: [
                { properties: { title: 'Test 1' } },
                { properties: { title: 'Test 2' } },
                { properties: { title: 'Test 3' } },
            ]
        })
    ]
}));

const nav = Ti.UI.createNavigationWindow({ window });
nav.open();

Attachments

File	Date	Size
fix.png	2021-08-14T13:15:32.000+0000	632427
issue.png	2021-08-14T13:15:32.000+0000	771385

Comments

Hans Knöchel 2021-08-14

PR: https://github.com/appcelerator/titanium_mobile/pull/13021 Test-case (ListView):

   let tabGroup;
   
   const window = Ti.UI.createWindow({ title: 'Window 1', backgroundColor: '#f0f0f0' });
   window.add(Ti.UI.createListView({
   	sectionHeaderTopPadding: 0.0, // Remove this line to see the native behavior (applied spacing by default)
   	sections: [
   		Ti.UI.createListSection({
   			headerView: Ti.UI.createView({ height: 10 }),
   			footerView: Ti.UI.createView({ height: 10 }),
   			items: [
   				{ properties: { title: 'Test 1' } },
   				{ properties: { title: 'Test 2' } },
   				{ properties: { title: 'Test 3' } },
   			]
   		}),
   		Ti.UI.createListSection({
   			headerView: Ti.UI.createView({ height: 10 }),
   			footerView: Ti.UI.createView({ height: 10 }),
   			items: [
   				{ properties: { title: 'Test 1' } },
   				{ properties: { title: 'Test 2' } },
   				{ properties: { title: 'Test 3' } },
   			]
   		})
   	]
   }));
   
   const nav = Ti.UI.createNavigationWindow({ window });
   nav.open();

Test-case (TableView):

   const window = Ti.UI.createWindow({ title: 'Window 1', backgroundColor: '#f0f0f0' });
   window.add(Ti.UI.createTableView({
   	sectionHeaderTopPadding: 0.0,
   	data: [
   		Ti.UI.createTableViewSection({
   			headerView: Ti.UI.createView({ height: 10 }),
   			footerView: Ti.UI.createView({ height: 10 }),
   			rows: [
   				Ti.UI.createTableViewRow({ title: 'Test 1' }),
   				Ti.UI.createTableViewRow({ title: 'Test 2' }),
   				Ti.UI.createTableViewRow({ title: 'Test 3' }),
   			]
   		}),
   		Ti.UI.createTableViewSection({
   			headerView: Ti.UI.createView({ height: 10 }),
   			footerView: Ti.UI.createView({ height: 10 }),
   			rows: [
   				Ti.UI.createTableViewRow({ title: 'Test 1' }),
   				Ti.UI.createTableViewRow({ title: 'Test 2' }),
   				Ti.UI.createTableViewRow({ title: 'Test 3' }),
   			]
   		})
   	]
   }));
   
   const nav = Ti.UI.createNavigationWindow({ window });
   nav.open();

JSON Source