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

  

• This is an OOP function based off of what Paul and James created, but instead uses a scrollview, so that the table view rows don't get highlighted.

  Use it like:

  var gridView = createScrollableGridView({
      data: data, //An array of views
      cellWidth: 100,
      cellHeight: 100,
      xSpacer: 5, //Space in between two columns
      ySpacer: 5, //Space in between two rows
      xGrid: 3 //Number of columns
  });
  

  var P = function (densityPixels) {
      return densityPixels*Ti.Platform.displayCaps.dpi/160;
  };
  
  var iconNums = 1;
  var newIcon = function(color) {
      var v = Ti.UI.createView({
          width:P(95),
          height:P(95),
          backgroundColor: (color)?color: "#d85a1a"
      });
      v.add(Ti.UI.createLabel({
          text: iconNums++
      }));
      return v;
  };
  
  var dataR = [];
  for (var i=0; i<24; i++) {dataR.push(newIcon());} 
  
  
  var createScrollableGridView = function (params) {
      var _p = function (densityPixels) {
          return densityPixels*Ti.Platform.displayCaps.dpi/160;
      }
  
      var view = Ti.UI.createScrollView({
          scrollType: "vertical",
          cellWidth: (params.cellWidth)?params.cellWidth: _p(95),
          cellHeight: (params.cellHeight)?params.cellHeight: _p(95),
          xSpacer: (params.cellWidth)?params.cellWidth: _p(10),
          ySpacer: (params.cellHeight)?params.cellHeight: _p(10),
          xGrid: (params.xGrid)?params.xGrid:3,
          data: params.data
      });
  
      var objSetIndex = 0;
      var yGrid = view.data.length/view.xGrid;
  
      for (var y=0; y<yGrid; y++){
          var row = Ti.UI.createView({
              layout: "horizontal",
              focusable: false,
              top: y*(view.cellHeight+(2*view.ySpacer)),
              height: view.cellHeight+(2*view.ySpacer)
          });        
  
          for (var x=0; x<view.xGrid; x++){
              if(view.data[objSetIndex]){
                  var thisView = Ti.UI.createView({
                      left: view.ySpacer,
                      height: view.cellHeight,
                      width: view.cellWidth
                  });
                  thisView.add(view.data[objSetIndex]);
                  row.add(thisView);
                  objSetIndex++;
             }
          }
          view.add(row);
      }
  
      return view;
  };
  
  var win = Ti.UI.createWindow({
      backgroundColor:"black",
      navBarHidden:false,
      title:"Main Window"
  });
  win.add(createScrollableGridView({
      data: dataR
  }));
  
  win.open();
  

• Thanks to Paul's answer, i was able to come up with this more dynamic solution. notice that it will now create the number of rows (yGrid) based on the number of elements in the objSet.

  var objSet = buttons; //an object array i.e. buttons, images, whatever...
  
  //settings
  var cellWidth = 75;
  var cellHeight = 95;
  var xSpacer = 10;
  var ySpacer = 10;
  var xGrid = 3;
  
  // no need to change anything below
  var objSetIndex = 0;
  var yGrid = objSet.length/xGrid;
  var tableData = [];
  
  for (var y=0; y<yGrid; y++){
      var thisRow = Ti.UI.createTableViewRow({
          layout: "horizontal",
          height: cellHeight+(2*ySpacer)
      });
      for (var x=0; x<xGrid; x++){
          if(objSet[objSetIndex]){
              var thisView = Ti.UI.createView({
                  left: ySpacer,
                  height: cellHeight,
                  width: cellWidth
              });
              thisView.add(objSet[objSetIndex]);
              thisRow.add(thisView);
              objSetIndex++;
         }
      }
      tableData.push(thisRow);
  }
  var tableview = Ti.UI.createTableView({
      data:tableData,
      separatorColor:'transparent' // remove the line between rows
  });
  

  one can easily convert this into an OOP function. Hope this helps. :)

  -James Candan
  DesignEscape.net
  Web Application Development

• Came up with a very simple solution to this. The important key concept is to use a container view with a horizontal layout.

  Next you can iterate through whatever data you want to show in a loop, with the items you're adding wrapped in a container that specifies it's width to a fraction of the container view to generate columns.

  Everything automagically lines up evenly and you're good to go!

  
    var section = Ti.UI.createView({
      layout: 'horizontal' //<--- the important part here
    });
    section.width = Ti.Platform.displayCaps.platformWidth;
  
    var containerWidth = section.width / 4; // the 4 here can be however many columns you want
    for (var i = 0; i < 50; i++) {
      var container = Ti.UI.createView({
        width : containerWidth,
        height : containerWidth
      });
  
      var imageView = Ti.UI.createImageView({
        width : 70, // I set the 70 manually, which fits within 4 columns
        height : 70,
        image : 'default.png'
      });
  
      container.add(imageView);
      section.add(container);
    }
  
    var win = Ti.UI.createWindow();
    win.add(section);
    win.open();
  

• thanks for the post. very helpful.

• I always use this function I created years ago in Flash :) Could probably be more optimized, but it does the trick. Implementation is up to you, to handle orientation changes just run the function again, with different parameters and position your views with the coordinates.

  function getGridCoordinates($columns, $rows, $xSpacing, $ySpacing, $xPadding, $yPadding, $vertical) {
      var coordinates = [];
  
      var row, col, p;
      var num = $columns * $rows;
  
      for(var i = 0; i < num; i++) {
          if($vertical === true) {
              row = (i % $rows);
              col = Math.floor(i / $rows);
              p = {
                  x:(col * ($xSpacing + $xPadding)),
                  y:(row * ($ySpacing + $yPadding))
              };
          } else {
              row = (i % $columns);
              col = Math.floor(i / $columns);
              p = {
                  x:(row * ($xSpacing + $xPadding)),
                  y:(col * ($ySpacing + $yPadding))
              };
          }
  
          coordinates.push(p);
      }
  
      return coordinates;
  }
  

• its working great..but when i click on any label (on ios),whole tablerow gets focused(after commenting selectedBackgroundColor:"red" also).So please let us know how to get only label focused.
  Waiting for reply.

• My Alloy widget for Grids.

  Hope it helps somebody!

• DashBoard…
  http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.DashboardView-object