Grid view is Possible or not?

You must Login before you can answer or comment on any questions.

Is there is any method is available to create grid view in titanium?

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

— answered 3 years ago by Paul Dowsett
answer permalink
4 Comments
  • how do you handle orientationchange event?

    — commented 3 years ago by Dominik Koscielak

  • Dominik, that's a new question. :) Please open a new thread to get help with it. Thanks.

    — commented 3 years ago by Paul Dowsett

  • Thanks Paul, I like to implement following features in my Titanium cross platform app - iPhone and Android
    1. Check box kind of control for selecting images 2. Want to open image when user click on the icon. Is it possible to implement this using Tableview?

    — commented 2 years ago by Saamy

  • Show 1 more comment

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

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

— answered 3 years ago by Byron Carasco
answer permalink
3 Comments
  • If you want it to work on iOS you'll need to add:

    contentHeight: "auto",
    contentWidth: "auto"
    to the scrollView.

    — commented 3 years ago by Byron Carasco

  • You'll also need to replace:

    xSpacer: (params.cellWidth)?params.cellWidth: _p(10),
    ySpacer: (params.cellHeight)?params.cellHeight: _p(10),
    with:
    xSpacer: (params.xSpacer)?params.xSpacer: _p(10),
    ySpacer: (params.ySpacer)?params.ySpacer: _p(10),
    if you want the x and y spacer paramaters to work and for this to render properly.

    — commented 2 years ago by Matthew Sielski

  • is this using dp or px?

    — commented 8 months ago by Tom Brennan

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

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.

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

Your Answer

Think you can help? Login to answer this question!