Skip to content

Conversation

@m1ga
Copy link
Contributor

@m1ga m1ga commented Oct 19, 2025

Experimenting with TableView/ListView layouts to reduce the complexity of the layout. Many people don't use header/footer views or the left/right image but only add views in the rows. Still the layout will have all these elements in it.

This PR will add a property flatLayout:true to the TableView and it will load a different layout XML that only uses the content section.

current layout for one TableViewRow (13.0.0.GA):

Bildschirmfoto_20251019_180811

After this PR:

Bildschirmfoto_20251019_180801

Same for the listView:

Bildschirmfoto_20251023_103217

Demo:

var win = Ti.UI.createWindow();
var tblSection1 = Ti.UI.createTableViewSection();
var tblSection2 = Ti.UI.createTableViewSection();
var listData = [];
for (var i = 0; i < 50; ++i) {
	var row1 = Ti.UI.createTableViewRow({
		height: 50,
	})
	var lbl = Ti.UI.createLabel({
		text: "test"
	});
	row1.add(lbl)
	tblSection1.add(row1);

	var row2 = Ti.UI.createTableViewRow({
		height: 50,
	})
	var lbl = Ti.UI.createLabel({
		text: "test"
	});
	row2.add(lbl)
	tblSection2.add(row2);

	listData.push({
		info: {
			text: 'Apple'
		}
	})
}

var table1 = Ti.UI.createTableView({
	data: [tblSection1],
	width: "49%",
	left: 0,
	height: "49%",
	top: 0
});
var table2 = Ti.UI.createTableView({
	data: [tblSection2],
	flatLayout: true,
	width: "49%",
	right: 0,
	height: "49%",
	top: 0,
});


var listView1 = Ti.UI.createListView({
	height: "49%",
	width: "49%",
	left: 0,
	bottom: 0,
	templates: {
		'template': {
			childTemplates: [{
				type: 'Ti.UI.Label',
				bindId: 'info',
				properties: {
					font: {
						fontSize: 20,
						fontWeight: 'bold'
					},
					left: 10,
					top: 0,
				}
			}]
		}
	},
	defaultItemTemplate: 'template',
	sections: [Ti.UI.createListSection({
		items: listData
	})]
});
var listView2 = Ti.UI.createListView({
	height: "49%",
	width: "49%",
	flatLayout: true,
	right: 0,
	bottom: 0,
	templates: {
		'template': {
			childTemplates: [{
				type: 'Ti.UI.Label',
				bindId: 'info',
				properties: {
					font: {
						fontSize: 20,
						fontWeight: 'bold'
					},
					left: 10,
					top: 0,
				}
			}]
		}
	},
	defaultItemTemplate: 'template',
	sections: [Ti.UI.createListSection({
		items: listData
	})]
});

win.add([table1, table2, listView1, listView2]);
win.open();

@m1ga m1ga changed the title feat(android): reduce TableView layout feat(android): reduce TableView/ListView layout Oct 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant