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.
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.
I managed to gain more control on the horizontal and vertical spacing by using the portraitGridCellSizeForGridView method and returning a slightly large CGRect compared to the one I used to initialise the cell in the gridView:cellForItemAtIndex: method.
I hope this helps.
Related
I have a table of the type inset grouped style. Depending on some selections I want to hide some cells by reducing their height to 0. Now is there anyway to still show rounded corners even if the respective cell has height 0? Or how would you do that? I don't want to "delete" the cell, otherwise it is much more complex to keep track of the cells for me.
Is it possible to give a WatchKit table cell or WKInterfaceGroup a border width of 2px and a red border color? If not, are there any work-arounds?
It can't be done programmatically, but you can give the impression of a boarder in IB.
Add a separator above and below the cell's sub-group.
Give the cell's main group a background color.
Make the first separator an alpha of 0 and a top vertical alignment.
Give the cell's sub-group a center vertical alignment.
Give the second separator an alpha of 0 and a bottom vertical alignment.
I'm pleased with the result.
I have a NSCollectionView which uses a NSCollectionViewGridLayout to create a single row of collection view items. The row can have one or more items and can scroll horizontally is needed, i.e. one row, unlimited columns (one item per column).
The collection view items have a minimum size of 240x160 and have an aspect ration constraint of 3:2 (the width is 1.5 times the height). There is no maximum size.
All the spacing/insets are set to zero so that the items are next to each other horizontally, starting at the left-hand side of the collection view (though ideally I'd like to center the items horizontally if the total width of the items is less than the width of the collection view.)
The collection view is in the top half of a split view. When dragging the divider up/down (vertically), I'd like to resize the collection view items while maintaining the aspect ratio. The problem is that the aspect ratio constraint conflicts with the leading/trailing constraints and causes a constraint exception.
1) I've tried removing the leading/trailing constraints from the collection item view, but then the items are not flush together. I can't have gaps between the items and I can't the items overlapping each other.
2) I've tried removing the aspect ratio and the items resize correctly but don't maintain their aspect ratio.
3) I've also tried setting an aspect ratio on the collection view width such that it equals the height of the collection times the number of items times the aspect ratio, but wasn't able to get it to work correctly (and it seems kind of hack-ish). I also tried a custom layout object but I ran into different errors.
3) I was considering, but didn't try, de-activtating the aspect ratio constraint when the drag starts, and re-acivating the constraint when the drag ends but wasn't sure if this would work (it seems kind of hack-ish).
// setting up the grid layout
NSCollectionViewGridLayout* layout = [[[NSCollectionViewGridLayout alloc] init] autorelease];
layout.minimumInteritemSpacing = 0.0;
layout.minimumLineSpacing = 0.0;
layout.margins = NSEdgeInsetsMake(0.0, 0.0, 0.0, 0.0);
layout.maximumNumberOfRows = 1;
layout.maximumNumberOfColumns = 0;
layout.minimumItemSize = NSMakeSize(260.0, 160.0);
layout.maximumItemSize = NSZeroSize;
self.theCollectionView.collectionViewLayout = layout;
(not shown are the constraints in the collection view item xib file)
The desired result is to have:
a) User resizing a single row of collection view items by dragging a split view divider, and they maintain their aspect ratio while being resized.
b) Ideally, collection view items would be centered horizontally in collection view if the items don't scroll horizontally.
I have several Buttons each with three UILabels alongside them, half of these buttons two labels to the left as shown below. Each label has a number within it between 1 and 3 digits and will expand (using the UIView method 'sizeToFit') to fit this number. However when the labels are on the left the view overlaps the button when it expands. How can I fix this?
when I scroll position end of UItableview the last UItableview row seems half. how can I show the last row fully and how can I detect scroll to last row?
I don't know what you mean by "seems half". I suppose that means only half of the cell is shown? Make sure the frame of the whole table view is visible first.
If you want a cell to appear within the bounds of the table view, use
[tableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:? section:?]
atScrollPosition:UITableViewScrollPositionBottom animated:YES];
I think there is something (like a tabBar) at the bottom of your screen and it is overlapping the UITableView .. am I right, am I right?!
Just make the frame of the UITableView 48 pixels shorter. That's the average size of a tabBar..
Or perhaps you have not taken in account that the bar at the top (the status bar) also counts, which is about 15 pixels high. In that case, take 15 pixels of the height of your UITableView's frame.