Hi, I would like to make a design like this, I have a collectionView that has different sections, the first one has to be different... how can I do?
I have made different types of cells but it always has the same width as specified in the storyboard... Is there any way to set the width of the cell?
Thank you very much.
You have to use UICollectionViewDelegateFlowLayout, specifically this method:
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
Just return there the size you want at the section or indexPath you need.
You will need to adopt the UICollectionViewDelegateFlowLayout protocol and implement the collectionView(_:layout:sizeForItemAtIndexPath:) method. This method is implemented to specify the size of individual items to the UICollectionViewFlowLayout object that does the layout in a collection view by default.
Here is a link to the relevant documentation.
Related
One of my storyboard has a table view cell which calls the collection view defined in the separate scene. Collection view includes a UIImage view with a page control till ios 10 each of the images used to display fully within the imageview after the upgrade all the images are showing up as stacked on one another as in the attached image.once i click on this stacked image everything becomes proper until i revisit the storyboard. Is there anything which changed with respect to UIImage or collectionview in the new upgrade?
The same code works fine in ipod.
Code Sample:
#pragma mark - UICollectionViewDelegateFlowLayout
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return collectionView.bounds.size;
}
Is it something to do with pagecontrol being used??
I hope you would have used sizeForItemAtIndexPath for specifying collection view cell size previously and would have added UICollectionViewDataSource, UICollectionViewDelegate delegate methods.
Now for iOS 10 we need to add UICollectionViewDelegateFlowLayout delegate, only then sizeForItemAtIndexPath will be executed.
Try it I hope it will fix your issue.
Try explicitly providing the height and width of collectionView.bounds.size
i already display the image as grid view using UICollectionView with equal size like follows
Next step i want to display cell as different size but the images fit into the that cell like this
this need to be work in the storyboard because other functions done in the storyboard so somebody help me..
In your collection view controller add:
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout*)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
//return the size of the cell based on image size or other criteria
}
Add constraints to the image:
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
http://postimg.org/image/6bws3catp/
As you can see on the image I need something that gives me the possibility of resizing a cell depending on the length of the text that contains.
I' ve been trying to do that with a UICollectionview but the cells have always the same size and if I try to alterate the size playing with the frame.size and location parameters the scroll gets crazy.
Maybe the UICollectionView isn't the best choice...
Thank you very much
EDIT:
Because of your answers my cells are able to change dynamically their size but the margins aren't behaving as I expected.
The margins of the cells depends always on the biggest cell of the same row
http://postimg.org/image/3scthf9rv/
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 6;
}
I have implement this to set my margin value between cells in 6 points, but maybe this only works when you have one cell in each row in a vertical collection view..
Thank you again for all your help
You can check out https://github.com/bryceredd/RFQuiltLayout . Looks
like something you can use for this...
you can override the following method and return a CGSize object that specifies the size you want to use for each cell. Using this method, you can actually have each cell be a different size:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
Example:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake(100, 100);
}
Your view controller needs to be a delegate of UICollectionViewDelegateFlowLayout in order for this method to be called. So don't forget to add that delegate declaration to your view controller's .h file, such as:
#interface MyViewController () <UICollectionViewDelegateFlowLayout>
UICollectionView is the correct choice. You just need to customise the flow layout attributes.
Read Customizing the Flow Layout Attributes
Specifically you would need to implement Collection View Delegate method:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
// In this method you can calculate the size of the string for each cell
UIFont *font = // font to create the text for each cell
NSString *string = // text string for each cell
CGSize size = [string sizeWithFont];
return size;
}
I have a UICollectionView in IB with a bunch of different prototype cells.
I have tried to give each cell its own size in IB so that when I instantiate it with dequeueReusable..., it will have that size. What I am finding however is that it doesn't matter what your settings in IB are for your cell, your collectionview uses its own cell size for all cells used inside it.
Is this a bug? If not what is the best way to set a custom size for all your cells?
I have also tried:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
NSString* cellIdentifier = self.cellIdentifier;
ImageCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:self.cellIdentifier forIndexPath:indexPath];
return [cell sizeOfCell];
}
But for some reason the app crashes when dequeuing cells in this function.
I have subclassed all the prototype cells and have a function that has them return their own size. Is there any other way to instantiate a cell with the Identifier you gave it in IB?
The sizing of cells (for collection views and table views) in IB is just for layout purposes, it has no effect on the size at run time. You should implement the UICollectionViewDelegateFlowLayout method collectionView:layout:sizeForItemAtIndexPath: to return the correct size for each item.