UICollectionView cells are not displayed properly

Question

In my CollectionView which is horizontal, not displaying the views properly. Why?

In the pictures shown below pink color is CollectionView and orange color is cell why cells are displayed oddly. For cell 1 there is right side space and for cell 2 there is leftside space and for cell 3 the size is increased on left a bit. why this odd behavior?

Here is my code :

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
        return 3;
}

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
        CollectionViewCell* cell = (CollectionViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:@"pagerCell" forIndexPath:indexPath];
        [cell.PagerViewCell addSubview:  [[[NSBundle mainBundle] loadNibNamed:@"AlbumsView" owner:self options:nil] objectAtIndex:0]];

    return cell;
}

- (CGSize)collectionView:(UICollectionView *)collectionView
                  layout:(UICollectionViewLayout*)collectionViewLayout
  sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    return CGSizeMake(pagerView.frame.size.width    , pagerView.frame.size.height);
}

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 1;
}

- (void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];
    [pagerView.collectionViewLayout invalidateLayout];
}

and its displayed like this

And cell 2

And Cell 3

Have you referred these links ? https://stackoverflow.com/questions/17229350/cell-spacing-in-uicollectionview https://stackoverflow.com/questions/19250284/ios-uicollectionview-spacing-still-there-when-set-to-0-how-to-set-with-no-sp — Venk, Jul 21 '17 at 11:50
and this too. https://stackoverflow.com/questions/21281462/how-to-remove-the-margin-between-two-uicollectionview-columns — Venk, Jul 21 '17 at 11:50
Are you created a UICollectionViewFlowLayout for your collectionview ?? — Parvendra Singh, Jul 21 '17 at 12:00

score 2 · Accepted Answer · answered Jul 21 '17 at 13:28

It seems that the subview you are adding to the collection view cells is not being setup. The problem is here:

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
        CollectionViewCell* cell = (CollectionViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:@"pagerCell" forIndexPath:indexPath];
        [cell.PagerViewCell addSubview:  [[[NSBundle mainBundle] loadNibNamed:@"AlbumsView" owner:self options:nil] objectAtIndex:0]];

    return cell;
}

You are just calling addSubview but you dont add any type of constraints on the subview you are adding. How it should look like is something as:

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
        CollectionViewCell* cell = (CollectionViewCell*)[collectionView dequeueReusableCellWithReuseIdentifier:@"pagerCell" forIndexPath:indexPath];
        UIView *albumsView = [[[NSBundle mainBundle] loadNibNamed:@"AlbumsView" owner:self options:nil] objectAtIndex:0]
        [cell.PagerViewCell addSubview: albumsView];

        // Adding constraints: 
        NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(albumsView);
        [cell.PagerViewCell addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[albumsView]|" options:0 metrics:nil views:viewsDictionary]];
        [cell.PagerViewCell addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[albumsView]|" options:0 metrics:nil views: viewsDictionary]];

    return cell;
}

The constraints make your albumView fill the cell. As I understood this is the desired effect.

If you are using something like PureLayout the constraints part would look much simpler.

Let me know if it worked for you

score 1 · Answer 2 · answered Jul 21 '17 at 12:01

Add this methods in your class and change until your needs.

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    return UIEdgeInsetsMake(0, 0, 0, 0);
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    return 10.0f;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 10.0f;
}

Parvendra Singh · Answer 3 · 2017-07-21T12:09:30.683

-1

You have to use UICollectionView's delegate method for this, you have to mentions your itemSize for every Cell.

Create a UICollectionViewFlowLayout like this:

   UICollectionViewFlowLayout *layOut = [[UICollectionViewFlowLayout alloc] init]; 

   layOut.itemSize = CGSizeMake(cellWidth, cellHeight);

   layOut.scrollDirection = UICollectionViewScrollDirectionHorizontal;

   layOut.minimumInteritemSpacing = 0;

   layOut.minimumLineSpacing = 0;
   yourCollectionViewObject.collectionViewLayout = layOut;

And Use this Delegate Method:

-(CGSize)collectionView:(UICollectionView *)collectionView
              layout:(UICollectionViewLayout *)collectionViewLayout  sizeForItemAtIndexPath:(NSIndexPath *)indexPath

  {
     CGSize itemSize = CGSizeMake(cellWidth, cellHeight);

    return itemSize;
  }

edited Jul 21 '17 at 12:09

answered Jul 21 '17 at 11:51

Parvendra Singh

965
7
19

Have you read the question? He already has this method implemented – mag_zbc Jul 21 '17 at 11:54
Okay then you have to suggest the main problem behind this. @mag_zbc. He is not set UICollectionviewFlowlayout initially or after And he give the minimum cell spacing 1.0 – Parvendra Singh Jul 21 '17 at 11:59

UICollectionView cells are not displayed properly

3 Answers3