Titanium: I Got 99 Problems and a Grid Ain't 1

A Grid View is pretty common in many applications nowadays, displaying images or a variety of image and text content to the user in repeated pattern cells in a vertical and horizontal layout. This component is highly favored over List Views and Table Views when wanting to compare similar data types as well as having a better visual comprehension that helps to distinguish the subsets of items.

However, when it comes to Titanium, they don’t have any reference to a Grid View. So what does that mean for our image-heavy applications that would like to display a list of images? You could use a list view if you are able to supply enough information that would allow the user to easily read and comprehend the list. But, if you have limited data or none at all it would be more visually appealing to display a Grid View. Which brings us back to the problem at hand, Titanium does not have any reference to a Grid View.

Let us explore our options:

Option 1:

If you know that your data won’t change you could just do some calculations to disperse your views across the screen in the XML. This would be good for navigation where each button would have separate functionality when clicked.

<Alloy>
    <Window layout="horizontal" horizontalWrap="true" backgroundColor="white">
        <Button width="50%" height="50%" title="TopLeft"/>
        <Button width="50%" height="50%" title="TopRight"/>
        <Button width="50%" height="50%" title="BottomLeft"/>
        <Button width="50%" height="50%" title="BottomRight"/>
    </Window>
</Alloy>

However, this may get a bit messy and annoying when you have to calculate for up to 20 or more views. Which brings us to

Option 2:

Let’s create a Grid View that has three columns and four rows.

// to fit in a 320-wide space 
var cellWidth = 92;
var cellHeight = 92;
var padding = 5; // padding between cells
var xGrid = 3; // how many cells wide
var yGrid = 4; // how many cells tall

/**
 * This will create a 3 x 4 gridview of 12 images
 * you can do some math to determine how many rows will be needed for your data set
 */

var tableData = [];

// array of team objects
var teams = [
    {name : 'Dragons', logo : '/images/dragon.png'}
    {name : 'Tigers', logo : '/images/tiger.png'},
    {name : 'Foxes', logo : '/images/fox.png'},
    {name : 'Dare Devils', logo : '/images/dare_devil.png'},
    {name : 'Cyclones', logo : '/images/cyclone.png'},
    {name : 'Majors', logo : '/images/major.png'},
    {name : 'Hawks', logo : '/images/hawk.png'},
    {name : 'Stallions', logo : '/images/stallion.png'}.
    {name : 'Knights', logo : '/images/knight.png'},
    {name : 'Pirates', logo : '/images/pirate.png'},
    {name : 'Crusaders', logo : '/images/crusader.png'},
    {name : 'Wolves', logo : '/images/wolf.png'},
];

var cellIndex = 0;

//

for (var y=0; y < yGrid; y++){

    var row = Ti.UI.createTableViewRow({
        className : "grid",
        layout : "horizontal",
        height : cellHeight + padding,
        selectedBackgroundColor : 'white'
    });

    for (var x=0; x < xGrid; x++){
        // the cell that will hold the logo and the team name
        var view = Ti.UI.createView({
            teamID : teams[cellIndex].name + cellIndex.toString()
            left : padding,
            right : padding,
            height : cellHeight,
            width : cellWidth
        });
        // image of the logo of the team
        var teamLogo = Ti.createImageView({
            image : teams[cellIndex].logo,
            teamID : teams[cellIndex].name + cellIndex.toString()
        })
        // label of the team's name
        var teamName = Ti.UI.createLabel({
            font : {
                fontSize:14,
                fontWeight:'bold'
            },
            text : teams[cellIndex].name,
            touchEnabled : false,
            teamID : teams[cellIndex].name + cellIndex.toString()
        });

        view.add(teamLogo);
        view.add(teamName);
        row.add(view);

        cellIndex++;
    }

    tableData.push(row);
}

var tableview = Ti.UI.createTableView({
    data : tableData
});


tableview.addEventListener("click", function(e){
    //teamId property set for each view will determine what view was clicked in the table
    if(e.source.teamID){
        Ti.API.info('Clicked: ' + e.source.teamID);
    }
});

This option gives us a very faux Grid View by using Table View as a crutch by populating each row with several cells. This is a good option and simply by doing some math to determine the number of rows you’d need for your data set you can make this very flexible to allow for an undetermined data length. However, a problem with this approach is that a user may notice that the entire row shows feedback for being selected. This can be avoided by substituting the Table view for a Scroll View and instead of using Table Rows, just use a View that spans the entire width and adds the cell View accordingly.

Option 3:

Simply use a module. There are several good modules out there that not only make it very easy to add a grid to your project but they also add a lot of extra cool features to the Grid View like TiCollectionView and TiFlexiGrid

There are plenty of other ways to create a Grid View that isn’t mentioned above. Titanium allows for an immense of other possibilities for creating a Grid View and the only thing that you need is imagination and some problem-solving skills. So even though Titanium lacks a simple way to incorporate a Grid View within your app, that does not mean you can’t Jimmy Rig your own.

Tagged blog