Here's a simple UICollectionView in yellow
The red arrow sets the width of the cell. (TBC: clicking on the pink cell: for 'size' select 'Default', then what you set at the red arrow becomes the size of the cell.)
Example, for an upright iPhone set width to 320.
But this seems crazy ... surely I can set the cell width based on the width of the UICollectionView?
There's no problem autosizing the view itself ..
That works fine.
But it seems crazy that I can't set the width of the CELL to be "same as the view". It seems hard to believe one has to set it manually, in code?
TBC In other words, as Nikita points out,
-(CGSize) collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return self.view.frame.size;
}
(indeed you also typically need this ...)
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout*)collectionViewLayout
insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(0,0,0,0); //t,l,b,r
}
In fact - you have to do that in code?! There's no way to do that in Storyboard, with autolayout, or anything else?!
I think you need to take a look at
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
of UICollectionViewLayout where you can set size based on orientation and current frame.
It would indeed seem that you simply have to do this in code.
There is a simple way to do this. Here is the swift code. Assumes you want one item wide and in the example my cells are 64 pts high, and I want 8 pts for side margins, and finally collectionView is the name of your UICollectionView.
Insert this into viewDidLoad :
let layout = collectionView?.collectionViewLayout as! UICollectionViewFlowLayout
layout.itemSize = CGSize.init(width: (UIScreen.main.bounds.width - 16), height: 64.0)
This will set all the cells to default to that size. You can still override individual cells if you subclass UICollectionViewLayout or UICollectionViewFlowLayout, as mentioned in other answers. But if you simply want to have more table view like behavior this should work.
I my case cell inset making extra shapes
Related
I have collection view with cells I'm presenting horizontally + paging enabled. However I have above cell space that I cant remove (green on screenshot - collection view background). Size of cell is same as containers frame. For better understanding what I mean check screenshot. Any ideas? Thank you very much.
automaticallyAdjustsScrollViewInsets doesn't works for me
[self.calendarView setContentInset:UIEdgeInsetsMake(-64, 0, 0, 0)]; works but I don't know how to get these -64 programatically.
Did you try to implement these methods below and set zero insets and spacings?
You also need to check if the size of the cell is appropriate, may be the way you see the top spacing is the only way layout engine can put the cell. Please, check what size is set as expected
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsZero;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 0.0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 0.0;
}
I've came across similar issue many times.
When a UIScrollView or its subclass, e.g. UITableView and UICollectionView, is the first child of viewController.view, it will get a unexpected contentInset.
My solution:
If there are other siblings of UIScrollView, make one of
non-UIScrollView as first child.
If there is no other siblings, add a dummy UIView as the first child, and either hide the UIView or set the height to 0
I'm trying to achieve such effect using Collection View :
UICollectionView image
Width of these cells should auto resize to width of the screen. Heights of each cell should be like 45% (10% is for this black gap). I tried a lot of combinations but I cannot achieve this in any way. Thank's in advance for any help.
Best regards,
Adrian.
Set the collectionView width to full screen. Implement these delegate method
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(collectionView.bounds.size.width, height);
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(0, 0, bottom, 0);
}
I have attached an image here
I have taken a CollectionView Cell fitting the size of the width of the screen and half the size of the screen, taken a UIView and dropped it inside the collection view cell with a padding of 10-15 px from the bottom, clear the colour of the collection view background and that should give u the illusion of the CollectionViewCell cells having a padding to each other.
Whatever elements you want to show in the CollectionView Please add it to the view inside the view inside the CollectionViewCell cell
I'm trying to display pictures in a collection view, 1 picture at a time and allow them to be scrolled horizontally.
so i was hoping to have the cell fit the size of the collection view, perhaps with a bit of margin.
I've tried to do it by setting the cell frame to the same as the collection view's frame
CGRect containerFrame = self.photoCollectionView.frame;
cell.frame = CGRectMake(containerFrame.origin.x, containerFrame.origin.y, containerFrame.size.width, containerFrame.size.height);
but the cell just disappears all together.
Is there a standard way to do it?
Take a look at the UICollectionViewFlowLayout Class Reference. You should use UICollectionViewDelegateFlowLayout.
Implement this method to change the size of cells
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
and to change the spacing between cells
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
All,
I have a View Controller with a UICollectionView , and the UICollection has a collection of small images (35x35) to make a grid. I am using an inferred size of VC. I have set the top, bottom, left and right constraints..
The problem is that on the iPhone 6 the amount of cells are correct, but obviously on a iPhone 5 and iPhone 4 there is a smaller amount vertically.
How did I get it so that there is an exact amount of cells vertically on all devices ?
I am not familiar with swift, but i hope that this objective-c explanation helps:
In your -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath method you can specify the width and height of your cell.
for example if you only want 2 cells per row and 3 per column user this:
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGRect screen = [[UIScreen mainScreen]bounds];
return CGSizeMake(screen.size.width/2 - YourHorizontalPadding, screen.size.height/3- YourVerticalPadding);
}
The vertical and horizontal padding is the space you have between your cells, you will have to tweak them to get the desired result.
Hope that helps, let me know if something is not clear.
I have a collectionview that is full width of the screen, but I want the collectionview and the collectionview cell to adjust size according to the iPhone screen.
One cell takes up the collectionview and scrolls across.
So I want the cell and collectionview to be 320 x 125 for iPhone 4, 4s, 5, and 5s;
375 x 146 for iPhone 6 and 414 x 162 for iPhone 6 Plus.
It wasn't possible to use autolayout on the cell but I was able to for the collectionview.
Any help is appreciated.
Thanks
You could implement the delegate method for the cell size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
You can return there the size you want.
What I did not really understand from your question was if the collection view already has the size you want. If so, in the delegate method you could do something like:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(CGRectGetWidth(self.collectionView.frame), CGRectGetHeight(self.collectionView.frame));
}
With this the cells should have the right size.
Hope this helps!
While defining frame of UICollectionView or UICollectionViewCell, define width frame value as self.view.frame.size.width.
It will automatically pick the full width which you want.
Maybe this will help! I put in this post - How to scale cells dynamically and proportionally depending on device screen!!!
UICollectionView cells not horizontal after rotation