Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

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.

— asked March 11th 2010 by Ben Bahrenburg
  • layout
  • mobile
0 Comments

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

    screenshot

    — answered April 12th 2011 by Paul Dowsett
    permalink
    6 Comments
    • The click events in this example (which is cross-posted to multiple threads) do not work. Any suggestions for doing a grid layout where you can actually click/tap/select items?

      (By "do not work" I mean I created a new project in Ti, pasted your code in app.js, launched and tested - no output of events. I even removed the if criteria from the function, still no output.)

      — commented April 21st 2011 by Jesse Silverstein
    • Um, apparently you can disregard my previous comment. I closed my emulator and Ti, relaunched both, and the click events now work as expected. Sorry for the confusion! Must have been low on memory in one or the other, I suppose.

      — commented April 21st 2011 by Jesse Silverstein
    • Jesse

      I have written a variation of this code that uses backgroundImage rather than backgroundColor, and changes the image to the next one in the series when an image is clicked.

      It uses the technique that you would use to answer your question.

      — commented August 19th 2011 by Paul Dowsett
    • Hi Paul,

      I really like your grid view code. I was just wondering how do you handle on orientationchange event to re-draw the grid with new values for xGrid and yGrid?

      — commented August 22nd 2011 by Dominik Koscielak
    • Dominik

      Please see my response to your same comment in the other thread. Thank you.

      — commented August 22nd 2011 by Paul Dowsett
    • Thanks Paul

      — commented August 22nd 2011 by Dominik Koscielak
  • 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.

    — answered March 11th 2010 by Kevin Whinnery
    permalink
    0 Comments
  • thanks Paul Dowsett so much

    — answered July 13th 2011 by mahmoud kamal
    permalink
    0 Comments
  • Thanks Paul Dowsett :)

    — answered July 13th 2011 by Ahmed Tawfik
    permalink
    0 Comments
  • 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.

    — answered August 1st 2011 by Peter Schmand
    permalink
    0 Comments
  • refer http://www.tiresources.org/resource/TiFlexiGrid

    — answered May 21st 2014 by DIXON THANKACHAN
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.