A Grid View is pretty common in many applications nowadays, displaying images or a variety of image and text content to the user in a 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 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.

 

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.

This option gives us a very faux Grid View by using the 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 amount 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 add 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 aren’t mentioned above. Titanium allows for a immense of other possibilities to 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.