Problems spreading out cells in UICollectionViewFlowLayout - ios

I'm currently trying to space out some custom cells in a UICollectionViewFlowLayout with dynamically sized cells. What I'm finding out is that the spacing in between the cells is inconsistent. I've been reading up on the layout, and I've implemented all the delegate methods to control minimum sizing, but those seem to have no effect. Here is the view as it stands now
And here is my code for sizing:
In the layout and view delegate:
- (CGFloat) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 5;
}
- (CGFloat) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 5;
}
- (CGSize) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
Tag *tag = [[Search sharedManager] tagAtIndexPath:indexPath];
NSString *labelText = tag[#"Name"];
CGSize labelTextSize = [labelText sizeWithAttributes:#{NSFontAttributeName: [UIFont systemFontOfSize:8.0f]}];
return labelTextSize;
}
The custom cell
#implementation TagCellCollectionViewCell
- (id) initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.tagBtn.titleLabel.font = [UIFont systemFontOfSize:8.0f];
self.tagBtn = [UIButton buttonWithType:UIButtonTypeCustom];
// self.tagBtn.frame = CGRectMake(-frame.size.width/4+20, -frame.size.width/4+5, frame.size.width, frame.size.height);
[[self.tagBtn layer] setBorderColor:[[UIColor colorWithRed:234.0f/255.0f green:99.0f/255.0f blue:74.0f/255.0f alpha:1.0f] CGColor]];
[[self.tagBtn layer] setBorderWidth:1.0f];
self.tagBtn.backgroundColor = [UIColor whiteColor];
[self.tagBtn setTitleColor:[UIColor colorWithRed:234.0f/255.0f green:99.0f/255.0f blue:74.0f/255.0f alpha:1.0f] forState:UIControlStateNormal];
[self.contentView addSubview:self.tagBtn];
}
return self;
}
#end
What am I missing here that will put a consistent amount of space between each cell?

The problem here was that the item being returned from
- (CGSize) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
was overlapping the minimumInterimSpacing value. Since I was looking for something with systemfontofsize = 8, I needed to ensure that my interim spacing went above that value. Setting it to the 5 I had above caused it to conflict in odd ways, setting it to 15 spaces the cells out evenly because the number of pixels in between the cells is greater than the calculated size.

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

uicollectionview scrolling change cell indexpath

I'm trying to create a week calendar by using uiclloectionview. here is what it would look like when the view come to focus:
original view
when I scroll to bottom and scroll back to top. those cells that were disappeared because of scrolling change text.
scrolled view
Here is my code:
#interface ViewController ()
#end
#implementation ViewController
#synthesize calendar;
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
//[self.calendar setCollectionViewLayout:[[CalendarFlowLayout alloc]init]];
timeline = [NSArray arrayWithObjects:#"8:00", #"9:00",#"10:00",#"11:00",#"12:00",#"13:00",#"14:00",#"15:00",#"16:00",#"17:00",#"18:00",#"19:00",#"20:00",#"21:00",#"22:00",nil];
weekline=[NSArray arrayWithObjects:#"Mon", #"Tue",#"Wen",#"Thr",#"Fri",#"Sat",#"Sun",nil];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
-(NSInteger) numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 128;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cell" forIndexPath:indexPath];
if (![cell.contentView viewWithTag:2]) {
UILabel * title;
UIView *message;
title =[[UILabel alloc]initWithFrame:CGRectMake(0, 0, cell.frame.size.width, cell.frame.size.height)];
title.font=[UIFont systemFontOfSize:14.0];
title.textAlignment=NSTextAlignmentCenter;
//title.backgroundColor=[UIColor redColor];
if (indexPath.row%8==0) {
int time =indexPath.row/8;
if (time<[timeline count]) {
title.text =[NSString stringWithFormat:#"%#",[timeline objectAtIndex:time]];
}
}else if(indexPath.row>0&&indexPath.row<8){
if (indexPath.row<[weekline count]+1) {
title.text =[NSString stringWithFormat:#"%#",[weekline objectAtIndex:indexPath.row-1]];
}
[cell.layer setBorderColor:[UIColor blackColor].CGColor];
[cell.layer setBorderWidth:1.0f];
}else{
[cell.layer setBorderColor:[UIColor blackColor].CGColor];
[cell.layer setBorderWidth:1.0f];
}
title.textColor=[UIColor blackColor];
message = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, cell.frame.size.width, cell.frame.size.height)];
message.tag = 2;
message.backgroundColor =[UIColor clearColor];
[message addSubview:title];
[cell.contentView addSubview:message];
}
return cell;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
CGFloat width =[[UIScreen mainScreen]bounds].size.width/8;
return CGSizeMake(width, width);
}
-(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 0.0;
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
return 0.0;
}
#end
I just wonder why indexpath keep changing and how to fix this issue? thank you.
You only configure the cell if it doesn't have the message UIView (tag 2) - so when cells are reused you are simply returning them as they were configured previously - however there is no guarantee that the cell be reused in the same indexPath as it was previously - in fact you can pretty much guarantee that it won't.
You need to correctly configure your cell every time. This will be much easier if you configure your prototype cell in the storyboard, or if you don't want to do that create a UICollectionViewCell subclass that adds the title and message controls in its init method.

uicollectionview rotation cell visibility & position and order

I have a UICollectionView which should have 3 columns and 5 rows. They are static and won't be changed. the UICollectionView should not scroll, so the cells are visible the whole time. It looks good in portrait mode, but the view is messed up in landscape mode. How to reorder cells in meaningful way? or is it possible to stretch the content so that all cells are visible?
portrait:
landscape:
- (void)viewDidLoad
{
[super viewDidLoad];
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
UICollectionView *collec = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 160, 320, 280) collectionViewLayout:layout];
[collec registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"test"];
collec.backgroundColor = [UIColor yellowColor];
collec.delegate = self;
collec.dataSource = self;
collec.scrollEnabled = NO;
collec.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:collec];
NSDictionary *headerViewDic = #{#"collec" : collec};
NSArray *constraintsHeaderView = [NSLayoutConstraint constraintsWithVisualFormat:#"|[collec]|" options:0 metrics:nil views:headerViewDic];
NSArray *constraintsHeaderViewV = [NSLayoutConstraint constraintsWithVisualFormat:#"V:|-160-[collec]-8-|" options:0 metrics:nil views:headerViewDic];
[self.view addConstraints:constraintsHeaderView];
[self.view addConstraints:constraintsHeaderViewV];
[collec setContentHuggingPriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal | UILayoutConstraintAxisVertical ];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 3;
}
-(NSInteger) numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 5;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"test" forIndexPath:indexPath];
cell.backgroundColor = [UIColor blueColor];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGSize mElementSize = CGSizeMake(97, 50);
return mElementSize;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 0;
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(0,7,7,7); // top, left, bottom, right
}
Try to find the device orientation and then swap your section and row values so that your row take place

UICollectionView insertItemAtIndexPath not working

I am using a UICollectionView to produce a grid of cells say total of 10 i.e. 0-9.
Now, I want to insert a new cell in the grid on click of one of the cells.
so I have added the following line of code [_collectionView insertItemsAtIndexPaths:#[[NSIndexPath indexPathForItem:10 inSection:0]]]; inside the function didSelectItemAtIndexPath.
So now, if I set indexPathForItem: as 10 (i.e. insert at last) then I get 'Assertion failure' error on this line. If I set `indexPathForItem:' anything between 0-9 then I get 'EXC_BAD_ACCESS...' error on this line.
This is my complete code implementing UICollectionView:
- (void)loadView
{
self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
_collectionView=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 97.5, self.view.frame.size.width, self.view.frame.size.height-67.5) collectionViewLayout:layout];
[_collectionView setDataSource:self];
[_collectionView setDelegate:self];
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"cellIdentifier"];
[_collectionView setBackgroundColor:[UIColor whiteColor]];
[self.view addSubview:_collectionView];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection: (NSInteger)section
{
return 35;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
cell.layer.borderWidth=.5f;
cell.layer.borderColor=[UIColor blackColor].CGColor;
if(indexPath.item<31)
{
_dayNumber = [[UILabel alloc] initWithFrame:CGRectMake(30, 30, 15, 15)];
_dayNumber.font = [UIFont systemFontOfSize:12];
_dayNumber.text = [NSString stringWithFormat:#"%ld",(indexPath.item + 1)];
[cell addSubview:_dayNumber];
}
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout: (UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(self.view.frame.size.width/7, self.view.frame.size.width/7);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout: (UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex: (NSInteger)section
{
return 0.0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 0.0;
}
// Layout: Set Edges
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout: (UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(0,0,0,0); // top, left, bottom, right
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath: (NSIndexPath *)indexPath
{
[_collectionView insertItemsAtIndexPaths:#[[NSIndexPath indexPathForItem:0 inSection:0]]];
}
Any help?
Well,
first let's consider this method,
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection: (NSInteger)section
{
return 35; // returning constant value means that you can't add or remove cells later
}
so let me change this to
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection: (NSInteger)section
{
return self.itemsCount;
}
declare itemsCount property in your class interface, like this
#interface YourClass ()
#property (nonatomic) NSInteger itemsCount;
#end
initialize it in loadView or init method,
_itemsCount = 35; // or whatever you want, initial count
now we can insert/delete items, right ? when we call insertItemAtIndexPaths all we have to do is updating actual data before that call, (for example self.itemsCount++, [self.myItems addObject:newItem] )
here is changes in your code
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
self.itemsCount++; // updating data
[_collectionView insertItemsAtIndexPaths:#[[NSIndexPath indexPathForItem:0 inSection:0]]];
}
One last important thing, in cellForItemAtIndexPath don't alloc init any kind of view and add as subview on cell, this code every time creates UILabels on cell, if you want custom view on cell (like an imageview, button, etc ..) you should subclass UICollectionViewCell and create this stuff in it's init method, here is how it will look like
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
YourCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:#"cellIdentifier" forIndexPath:indexPath];
cell.layer.borderWidth = 0.5;
cell.layer.borderColor = [UIColor blackColor].CGColor;
cell.dayNumber.font = [UIFont systemFontOfSize:12];
cell.dayNumber.text = [NSString stringWithFormat:#"%d",(indexPath.row + 1)];
return cell;
}
assuming you also changed this line,
[_collectionView registerClass:[YourCell class] forCellWithReuseIdentifier:#"cellIdentifier"];
note that YourCell is a subclass of UICollectionViewCell and has property dayNumber
Apple has a great guide about collection views. I recommend to read it.
Good luck.

Wrong UICollectionViewCell size

I want to change size of my UICollectionViewCell
In Interface Builder I set custom size
In my code I want change size of cell
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(274, 274);
}
In future I need have different size of cell
In my cell I have next method
- (void)awakeFromNib
{
backImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.width, self.height / 1.32)];
[self addSubview:backImageView];
lineImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, backImageView.height, self.width, self.height / 9.67)];
[self addSubview:lineImageView];
nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(28, lineImageView.originY + 5, self.width - 28, 15)];
nameLabel.font = [UIFont fontWithName:FontStyleBold size:14];
[self addSubview:nameLabel];
descriptLabel = [[UILabel alloc] initWithFrame:CGRectMake(nameLabel.originX, lineImageView.originY + lineImageView.height + 3, nameLabel.width - nameLabel.originX, 25)];
descriptLabel.numberOfLines = 2;
descriptLabel.font = [UIFont fontWithName:FontStyle size:8];
[self addSubview:descriptLabel];
self.backgroundColor = [UIColor whiteColor];
self.layer.masksToBounds = NO;
self.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(-1, 2.0, self.width + 2, self.height + 2) cornerRadius:0.f].CGPath;
self.layer.shadowColor = [[UIColor blackColor] CGColor];
self.layer.shadowOpacity = .4f;
self.layer.shadowRadius = 2.0f;
}
In simulator I have next bad result
If I set in Interface Builder size
In simulator all good
I thought that next method must change size of cell, but it change size of item
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(274, 274);
}
So how can I change size of UICollectionViewCell programmatically, without help of Interface Builder?
Is your view controller a UICollectionViewDelegateFlowLayout?
Otherwise sizeForItemAtIndexPath won't get called.
Maybe insert an NSLog inside sizeForItemAtIndexPath to see if it gets called at all.
I find my mistake.
In awakeFromNib I set height of subviews but in
- (CGSize)collectionView:(UICollectionView *)collectionView
layout:(UICollectionViewLayout *)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
forgot update frames of subviews

Resources