Cell padding with AQGridView

Continuing form my last post about using AQGridView in iOS, I will explain how to play with the margins in AQGridView. AQGridView tries to do most of the things behind the curtains with this and therefore makes it really hard to customize the margins if you don’t understand the basics about how the grid is rendered. Lets start with the basiscs. I assume that you already have a project set up with AQGridView. If not, follow my previous tutorial.

AQGridView takes the coordinates for the container view and creates as strictly defined grid with the coordinates. So how many cells you would have in a row would depend on what width you decide for your cells in the grid. You can inform AQGridView about the size of the cells by implementing - (CGSize)portraitGridCellSizeForGridView: (AQGridView *)aGridView in your AQGridViewDelegate. Most often this would be the controller where your AQGridView is added to. The name for the function is a bit misleading as there is no lanscapeGridCellSizeForGridView and you should return the cell size for both portrait and landscape rendering of the cells from this function.

Now, we know how to tell AQGridView what size we are going to use for the cells. AQGridView now renders as many cells as it can in one row and then distributes the remaining space evenly around each cell. So if you have two cells in the one row and have 24px of space remaining to be distributed, AQGridView will leave 6px on the left and the right and have 12px between the two cells (6px to the right of left cell and 6px to the left of right cell).

We can also force AQGridView to leave some more space on the left and the right by defining the leftContentInset and rightContentInset. This tells AQGridView that it should do its calculations after leaving the specified space on the left and the right. As an example, suppose that you again have two cells in one row of your grid and have 24px space to be distributed between these cells. However, now we want that the space to be evenly distributed around and in between the cells, i.e. to have 8px space on the left, right and center. To force this, we can specify leftContentInset and rightContentInset to be 4 each so that AQGridView is left with 16px to put in 4 gaps and therefore distributed evenly by putting 4px everywhere thereby giving you a padding of 8px everywhere.