feat(android): reduce TableView/ListView layout

[m1ga]

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):

After this PR:

Same for the listView:

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();

[prashantsaini1]

1. I believe the Left/Right images are used internally for drag handle, delete icon, etc.
2. headerView/footerView are very much used in many apps as we know so far, but headerTitle/footerTitle are rarely used due to barely any customisations on them (no font, no dark/light mode colors, etc.).

[m1ga]

the idea was that this setting can be used when you know you don't use the settings so you have the smallest layout.
If you want to use a header/footer or allow editing/deleting rows with the icons you don't use it.

But yes, we could remove the header-/footerTitle as a simple label will be better already. Since we have it in the docs as the examples we should remap the properties for a normal label in the main content. That way we can remove the two fields from the layout

[hansemannn]

Can't it be added dynamically using code instead of pre-adding them via layout? Should be good to refactor (detect properties that were set, add if relevant properties for the views)