UICollectionViewCell size animation - ios

I am using a UICollectionView with 2 columns in it. i have a requirement to resize (expand) a cell when it is tapped. Im using the following bit of code which seems to be working except that the whole row gets expanded instead of a single cell... Im sure there must be a way to avoid using UICollectionView,dont want to use two seperate tableviews just coz of this minor problem..
PFB the code that im using to adjust the size of the cell..
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize itemSize;
if([self.selectedOrder isEqual:indexPath]) {
NSLog(#"coming");
itemSize = (CGSize ){.width = 330, .height = 150};
}
else {
itemSize = (CGSize ){.width = 330, .height = 75};
}
return itemSize;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
if([self.selectedOrder isEqual:indexPath]) {
self.selectedOrder = [NSIndexPath indexPathForItem:-1 inSection:-1];
}
else {
self.selectedOrder = indexPath;
}
[collectionView performBatchUpdates:^{
// append your data model to return a larger size for
// cell at this index path
// [collectionView invalidateIntrinsicContentSize];
[collectionView.collectionViewLayout invalidateLayout];
[collectionView reloadItemsAtIndexPaths:[NSArray arrayWithObject:indexPath]];
} completion:^(BOOL finished) {
}];
}

Related

set Dynamic width and height of collection view cell

Actually i want to set button dynamically and title of button appear Dynamic i have try this and got width of Dynamic content but am not setting cell width and height.
- (void)viewDidLoad {
[super viewDidLoad];
ContentArray = [[NSMutableArray alloc]init];
self.collectionview.delegate = self;
self.collectionview.dataSource =self;
self.collectionview.backgroundColor = [UIColor clearColor];
[ContentArray addObject:#"Planning"];
[ContentArray addObject:#"Resources"];
[ContentArray addObject:#"Human Resources"];
[ContentArray addObject:#"Agriculture"];
[ContentArray addObject:#"Resources management"];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return ContentArray.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell * Cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"CollectionViewCell"forIndexPath:indexPath];
[Cell.button setTitle:[ContentArray objectAtIndex:indexPath.row] forState:UIControlStateNormal];
return Cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGRect rect = [[ContentArray objectAtIndex:indexPath.row ] boundingRectWithSize:CGSizeMake(HUGE_VALF, 50) options:NSStringDrawingUsesFontLeading attributes:nil context:nil] ;
return CGSizeMake(rect.size.width, 50);
}
and output is like this
This is perfect i think if i make cell dynamic width and height, so please guide me through this.
pragma mark - GetHeightFromString
- (CGFloat)getTextHeightFromString:(NSString *)text ViewWidth:(CGFloat)width WithPading:(CGFloat)pading FontName:(NSString *)fontName AndFontSize:(CGFloat)fontSize
{
NSDictionary *attributes = #{NSFontAttributeName: [UIFont fontWithName:fontName size:fontSize]};
CGRect rect = [text boundingRectWithSize:CGSizeMake(width, MAXFLOAT)
options:NSStringDrawingUsesLineFragmentOrigin
attributes:attributes
context:nil];
//NSLog(#"rect.size.height: %f", rect.size.height);
return rect.size.height + pading;
}
Get height of the string from this method and add this to origional height of your cell or label or button whatever you want to use.
For example:
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
YourCellClass *myCell = (YourCellClass*) [collectionView cellForItemAtIndexPath:indexPath];
CGFloat sizeFromString = [self getTextHeightFromString:itemObject.MenuDescription ViewWidth:myCell.frame.size.width WithPading:10 FontName:#"HelveticaNeue" AndFontSize:13];
return CGSizeMake(sizeFromString, sizeFromString);
}
You might need to change the height of inner label too, for this use same method in cellForItemAtIndexPath method of your UICollectionView.
Further more you can customize your own way.
In Swift 2.0:
Using a UICollectionViewFlowLayout enable cell auto-sizing.
The following code inside a UICollectionViewController subclass will enable auto-sizing for it’s flow layout.
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
if let cvl = collectionViewLayout as? UICollectionViewFlowLayout {
cvl.estimatedItemSize = CGSize(width: 150, height: 75)
}
}
You can put different sizes in landscape & portrait mode try this -
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
// Adjust cell size for orientation
if (UIDeviceOrientationIsLandscape([[UIApplication sharedApplication] statusBarOrientation])) {
return CGSizeMake(rect.size.width, 50);
}
return CGSizeMake(rect.size.width, 50);
}
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
[self.collectionView performBatchUpdates:nil completion:nil];
}
you can call invalidateLayout method on the .collectionViewLayout property of your UICollectionView
- (void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews];
[yourCollectionView.collectionViewLayout invalidateLayout];
}
You can try this...
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(width, height);
}
width, height are the dynamically calculated value
Thanks

Cell disappears after reloading when using estimatedSize

I'm having a weird issue, when using a collection view with dynamic sizes, this issue doesn't happens while using fixed sizes.
After a reload the first cell of each section disappears, but only if they are out of the screen. After a few tests I realize that the cell didn't disappear, but its hidden bellow the section header.
Do you have any idea what is causing this?
Collection without reloading:
Collection after reloading with cell visible:
Collection after reloading with cell out of screen:
3D view of the cell after reloading:
The code:
#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return self.sections.count;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)sectionIndex {
Section *section = [self.sections objectAtIndex:sectionIndex];
return section.items.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
Section *section = [self.sections objectAtIndex:indexPath.section];
Item *item = [section.items objectAtIndex:indexPath.row];
if (self.editing) {
EditingCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cell-editing" forIndexPath:indexPath];
cell.item = item;
return cell;
} else {
BasicCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cell" forIndexPath:indexPath];
cell.item = item;
return cell;
}
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
HeaderCollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:#"header" forIndexPath:indexPath];
Section *section = [self.sections objectAtIndex:indexPath.section];
header.title = section.title;
return header;
} else {
UICollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:#"footer" forIndexPath:indexPath];
return footer;
}
}
#implementation DetailCollectionViewLayout
- (instancetype)init {
if (self = [super init]) {
[self initialize];
}
return self;
}
- (instancetype)initWithCoder:(NSCoder *)aDecoder {
if (self = [super initWithCoder:aDecoder]) {
[self initialize];
}
return self;
}
- (void)prepareLayout {
CGFloat cellWidth = (isIPAD) ? 288 : CGRectGetWidth(self.collectionView.bounds);
CGFloat headerWidth = CGRectGetWidth(self.collectionView.bounds);
// CGFloat ratio = (isIPAD) ? 0.33 : 0.66;
self.estimatedItemSize = CGSizeMake(cellWidth, 53);
self.headerReferenceSize = CGSizeMake(headerWidth, 50);
self.footerReferenceSize = CGSizeMake(headerWidth, 1 + self.minimumInteritemSpacing);
[super prepareLayout];
}
- (void)initialize {
self.minimumLineSpacing = 0;
self.minimumInteritemSpacing = (isIPAD) ? 5 : 10;
self.estimatedItemSize = CGSizeZero;
self.scrollDirection = UICollectionViewScrollDirectionVertical;
self.sectionInset = UIEdgeInsetsZero;
}
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
return YES;
}
#end
I made a simple sample project and record a video: http://sendvid.com/330uo5jm
It looks like the issue is the position from the first cell.
UICollectionViewCell autosizing can be a little, uh... interesting even at the best of times. I've had this exact issue in the past, and similar issues too.
Use a different value for .estimatedItemSize, the closer to the actual item size the better. I noticed you're using a size of CGRectZero at first. I wouldn't recommend doing that. Just set it once, at the start, with a value close to your size. Try a few values, see what works for you. For me, it took a bit of fine tuning.
For anyone developing for iOS 10 (at the time of writing this hasn't been released) there is a new collection view property that lets the collection view determine the estimated size itself. Set the itemSize to UICollectionViewFlowLayoutAutomaticSize, you shouldn't need to set .estimatedItemSize explicitly.
make sure your estimatedItemSize in your code same as size of cell in your xib or storyboard.Don't changes it's size runtime.
can you check with use of identifier like...
NSString *CellIdentifier = [NSString stringWithFormat:#"%d_%d",indexPath.section,indexPath.row];
Sometimes it happens if you have a big difference between estimated size and real size of cell.
Check you have a clear consequence of top to bottom constraints (if you are using autolayout).
Is there something that can break the autolayout to work properly ? E.g compresion resistance settings ?
Are you sure there are data for the cell after reload ? (Will be weird, but to be sure, just double check that.)
Also as Apple denotes here Apple - self sizing guide try to set the estimation of size as close as possible to real dimensions.
You can also try to refer to invalidation of collection layout as you are using your own. Refer to Possible flow-layout help
Try to set the estimation as close as possible and you will see if it solve your problem.

how to make dynamic size for the uicollection view cell in iOS?

I am using uicollection view to display the images in grid view format.I am able to display the cells but the height & width is not increased for iPad it only display as the small blocks.Please tell me how can i make it dynamic.
[![enter image description here][1]][1]
I have used following code for make it dynamic.
pragma mark Collection view layout things
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
if (collectionView==self.album_collection_view) {
return 2.0;
}
else
return 2.0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
if (collectionView==self.album_collection_view) {
return 2.0;
}
else
return 2.0;
}
// Layout: Set Edges
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
// return UIEdgeInsetsMake(0,8,0,8); // top, left, bottom, right
if (collectionView==self.album_collection_view) {
return UIEdgeInsetsMake(5,0,0,0);
}// top, left, bottom, right
else
return UIEdgeInsetsMake(5,0,0,0);
}
Please tell me how can i resolve this issue?
here is the solution
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
YourCollectionCell * cell = (YourCollectionCell *) [YourCollectionViewObj cellForItemAtIndexPath:indexPath];
if (cell == nil) {
NSArray *topLevelObjects = [[NSBundle mainBundle] loadNibNamed:#"YourCollectionCell" owner:self options:nil];
cell = [topLevelObjects objectAtIndex:0];
cell.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 20);
// SET YOUR CONTENT
[cell layoutIfNeeded];
}
CGSize CellSize = [cell systemLayoutSizeFittingSize:UILayoutFittingCompressedSize withHorizontalFittingPriority:UILayoutPriorityDefaultHigh verticalFittingPriority:UILayoutPriorityDefaultLow];
return CellSize;}
In case above solution not meet your needs,To obtain what you want, you should create your own UICollectionViewLayout (or maybe UICollectionViewFlowLayout) subclass, where you perform all the computations needed for placing every item in the right frame.
Take a look here for a great tutorial and here for something similar to what you want.
If you want to increase cell height and width you have to use sizeForItemAtIndexPath method. for that you have to add UICollectionViewDelegateFlowLayout delegate.
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(100, 100);
}

UICollectionView: minimumInteritemSpacing change on cell selection

In my collection view I want to scale the collection view cell that is selected. Along with that I also want to maintain same interItemSpacing between cells before the selection and after the selection, including enlarged cell. But if I just scale the cell by setting cell.transform property scaled cell overlaps on the neighbor cell.Other cells should adjust themselves to maintain the space. How do I solve this ?
i.e,
cell -50pix- cell -50pix- cell
cell -50pix- scaled cell -50pix- cell
By applying a transform, you are just scaling the view up in size. To adjust the size and allow the rest of the UICollectionView to adjust you will need to return a new size in sizeForItemAtIndexPath:
When the item is selected, you should reload that item at that indexPath using:
[collectionView reloadItemAtIndexPath:selectedIndexPath]
Replace selectedIndexPath with name of your variable storing the selected indexPath.
You don't want to invalidateLayout because you're just changing the appearance of one item.
I don't know whether this is the best solution,
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
CollectionViewCell *cell = (CollectionViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:#"cell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor redColor];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
if ([indexPath isEqual:selectedIndexPath]) {
return CGSizeMake(175, 175); // return enlarged size if selected cell
}
return CGSizeMake(150, 150);
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
selectedIndexPath = indexPath; // set selected indexPath
[collectionView performBatchUpdates:^{
[collectionView.collectionViewLayout invalidateLayout];
} completion:^(BOOL finished) {
}];
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(0, 0,0, 0);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return 20;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 20;
}

UICollectionViewCell height based on label size

I have a view which contains UICollectionView that loads external cellnib file of UICollectionViewCell. I have the data showing properly just the way I want. I want to keep the cell height based on the textlabel inside it but I am not sure what am I missing in the code below. I have tried going through answers but it did not make much sense on how to tackle it. Please help. Thanks in advance.
- (UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
MyCollectionViewCell *cell = (MyCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:#" mycell" forIndexPath:indexPath];
NSString *string = cell.lblContact.text;
CGSize size = [self getLabelSize:string];
NSLog(#"%f and %f",size.width ,size.height);
return cell;
}
- (CGSize)getLabelSize:(NSString *)string {
UIFont *updatedFont = [UIFont fontWithName:#"myFont" size:18.0];
CGRect rect = [string boundingRectWithSize:(CGSize){maxWidth, CGFLOAT_MAX} options:NSStringDrawingUsesLineFragmentOrigin attributes:#{ NSFontAttributeName: updatedFont } context:nil];
return rect.size;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
CGSize retval = CGSizeMake(collectionView.frame.size.width, 75);
return retval;
}
- (UIEdgeInsets)collectionView: (UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(0, 0, 0, 0);
}
I found the solution. I created a string in sizeForItemAtIndexPath that was getting a value out from the same place as cell.lblContact.text.
MyObject *mc = (MyObject *) [contactArray objectAtIndex:indexPath.row];
NSString *myString = mc.contactName;
CGSize size = [self getLabelSize:myString];
NSLog(#"%#", myString);
NSLog(#"%f", size.height);
if (myString.length > 25) {
CGSize retval = CGSizeMake(collectionView.frame.size.width, size.height);
[collectionView layoutIfNeeded];
return retval;
} else {
CGSize retval = CGSizeMake(collectionView.frame.size.width, 75);
return retval;
}
You retrieve the size of the label, but it looks like you are using a different CGSize to size the label. Instead of CGSizeMake(collectionView.frame.size.width, 75), try keeping a reference to the size of the label and using that as the return value:
- (UICollectionViewCell *) collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
MyCollectionViewCell *cell = (MyCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:#" mycell" forIndexPath:indexPath];
NSString *string = cell.lblContact.text;
self.labelSize = [self getLabelSize:string];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return self.labelSize;
}
EDIT
Have you tried accessing the frame of the label and storing it?
self.labelSize = CGSizeMake(self.myCell.frame.size.width, self.myCell.frame.size.height);

Resources