Question

I’m trying to implement the AQGridView in my iPad app. Please see my below image — sorry for the strong colors, but I think it would help you understand my problem.

Each cell (the blue box) has a margin left and right (yellow color), i.e. 8 pixels. This means that the first yellow coloum has a width of 8px, the second 16px, third 16px, and the last 8px. That’s maybe fine in some situations, but I would like the yellow columns to have the same width. In my example the total width of the columns are 48 (8+16+16+8) so instead I would like each column to have a width of 12 (48/4). How can I change the AQGridView to do this?

I’ve tried to change the frame and bounce the AQGridView, but that did not do anything.

Answer 1

AQGridView actually takes the container view’s coordinates and creates a strictly-defined grid from that. So when you have a 768px-wide grid view, and items which are a little under 1/3 of that in width, then it will create a rigid grid in which to place these items. By default your AQGridViewCell views will be centred within each grid square (although you can call -setResizesCellWidthToFit:YES to change that); you can adjust that positioning by implementing -gridView:adjustCellFrame:withinGridCellFrame: in your AQGridViewDelegate implementation.

In your case, every single cell has a margin of 8px on its left and right sides. On the outer edges this is seen alone, but in between pairs it appears doubled to 16px (8px from each cell).

What you want, then, is for each cell to have a 6px margin, and for the grid itself to have another 6px of margin space to the left & right of all cells. There’s an API for this:

@property (nonatomic, assign) CGFloat leftContentInset;
@property (nonatomic, assign) CGFloat rightContentInset;

What you should be able to do is set myGridView.leftContentInset = 6.0; and myGridView.rightContentInset = 6.0;. The grid view will then lay out cells with a content width of 756px instead of 768px, which should give you a 6px margin around each cell. Combine that with the 6px left & right content insets and you’ll have a clean 12px visible margin between every cell and the outer edges of the grid view.

Side note: the content inset properties were actually created to assist with laying out a certain number of cells per row. For instance, 1024 doesn’t divide by 5, so it could end up with some fairly small cells being quite spread out since the layout grid would only contain 4 items in width. However, by adding left & right content insets of 2px each, the view would use a width of 1020 to calculate its layout grid, resulting in 5 cells per row. This is, in fact, exactly what we do in the Kobo iPad app when rotated to landscape mode; without that change, our portrait-mode 4 items per row just got spread out & it looked a little too sparse.