Grid Layout
Hello,
Is there any plans for a grid layout option similar to the vertical?
My use case is I need to develop something similar to a calendar. This would allow me to define "day" view objects and not have to worry about how they are positioned on the page.
6 Answers
-
For those that need a cross-platform grid layout can use this code as a starting point:
// to fit in a 320-wide space var cellWidth = 92; var cellHeight = 92; var xSpacer = 10; var ySpacer = 10; var xGrid = 3; var yGrid = 12; var tableData = []; var colorSet = [ "#D44646", "#46D463", "#46D4BE", "#C2D446", "#D446D5", "#4575D5", "#E39127", "#879181", "#E291D4" ]; var colorSetIndex = 0; var cellIndex = 0; for (var y=0; y<yGrid; y++){ var thisRow = Ti.UI.createTableViewRow({ className: "grid", layout: "horizontal", height: cellHeight+(2*ySpacer), selectedBackgroundColor:"red" }); for (var x=0; x<xGrid; x++){ var thisView = Ti.UI.createView({ objName:"grid-view", objIndex:cellIndex.toString(), backgroundColor: colorSet[colorSetIndex], left: ySpacer, height: cellHeight, width: cellWidth }); var thisLabel = Ti.UI.createLabel({ color:"white", font:{fontSize:48,fontWeight:'bold'}, text:cellIndex.toString(), touchEnabled:false }); thisView.add(thisLabel); thisRow.add(thisView); cellIndex++; colorSetIndex++; if( colorSetIndex === colorSet.length ){ colorSetIndex = 0; } } tableData.push(thisRow); } var tableview = Ti.UI.createTableView({ data:tableData }); tableview.addEventListener("click", function(e){ if(e.source.objName){ Ti.API.info("---> " + e.source.objName+e.source.objIndex + " was clicked!"); } }); var win = Ti.UI.createWindow({ backgroundColor:"black", navBarHidden:false, title:"Main Window" }); win.add(tableview); win.open();
-
Not currently - if you'd like to formally request such a feature, head out to our issue tracking system, Lighthouse and describe the functionality you would be looking for in as much detail as you can, and add the "feature" tag to the ticket.
-
thanks Paul Dowsett so much
-
Thanks Paul Dowsett :)
-
If you need to have a quick solution for some sort of grid layout/table and don't have the time to finish this sample, you should consider Universal Grid. It is based on the same ui elements (tableview and views), supports the orientationchange event and runs on android and iOS.
-
refer http://www.tiresources.org/resource/TiFlexiGrid