Change the space between UICollecionViewCell - ios

Question

I have a CollectionView. Here is the implementation for my CollectionView.
- (void)setupCollectionView{
self.flowLayout = [[UICollectionViewFlowLayout alloc] init];
[self.flowLayout setSectionInset:UIEdgeInsetsMake(0, 20, 0, 0)];
self.flowLayout.itemSize = CGSizeMake(150, 35);
self.flowLayout.minimumLineSpacing = 20;
[self.flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
self.vwCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.vwQuickReplyContainer.frame.size.width, self.vwQuickReplyContainer.frame.size.height) collectionViewLayout:self.flowLayout];
self.vwCollectionView.backgroundColor = [UIColor clearColor];
[self.vwCollectionView registerNib:[UINib nibWithNibName:#"QuickrepliesCell" bundle:nil] forCellWithReuseIdentifier:#"QuickrepliesCell"];
[self.vwQuickReplyContainer addSubview:self.vwCollectionView];
self.vwQuickReplyContainer.hidden = YES;
[self.vwCollectionView setShowsHorizontalScrollIndicator:NO];
[self.vwCollectionView setDataSource:self];
[self.vwCollectionView setDelegate:self];
[self.vwCollectionView reloadData];
}
Here I set the minimumLineSpacing to set the minimum spacing between successive columns. According to this documentation, I understand that value represents the minimum spacing between successive columns for a horizontally scrolling grid. I was also set the space between my cells. Here is the outcomes of doing that .
But to get more looking good. I want to change my cell's width according to its content's size. So I've updated my cell's frame like this.
- (QuickrepliesCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
self.cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"QuickrepliesCell" forIndexPath:indexPath];
QuickReply *model = [[QuickReply alloc]initWithDictionary:self.quickRepliesArr[indexPath.row] error:nil];
self.cell.lblOpion.text = model.title;
CGFloat width = [self.cell.lblOpion.text sizeWithFont:WWLATOREGULAR(15)].width;
self.cell.frame = CGRectMake(self.cell.frame.origin.x, self.cell.frame.origin.y, width + 24, self.cell.frame.size.height);
return self.cell;
}
Here is the outcomes after updating the cell's width..
I don't know the reason why the space between my cells was changed after changing the cell's size. Can anyone advice on this? thanks.

Answer 1

Instead of setting the itemSize property of the layout to fixed size, implement the collectionView:layout:sizeForItemAtIndexPath: layout delegate method.
Then you can set the proper size of each item.

Answer 2

To achieve it, you need to calculate and change item size in collectionView:layout:sizeForItemAtIndexPath:
- (QuickrepliesCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
self.cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"QuickrepliesCell" forIndexPath:indexPath];
QuickReply *model = [[QuickReply alloc]initWithDictionary:self.quickRepliesArr[indexPath.row] error:nil];
self.cell.lblOpion.text = model.title;
return self.cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
QuickReply *model = [[QuickReply alloc]initWithDictionary:self.quickRepliesArr[indexPath.row] error:nil];
CGFloat width = [model.title sizeWithFont:WWLATOREGULAR(15)].width;
return CGSizeMake(width + 24, 35);
}