UICollectionView 单元格未正确显示

Question

在我水平的 CollectionView 中，无法正确显示视图。为什么？

在下面显示的图片中，粉色是 CollectionView，橙色是单元格，为什么单元格显示奇怪。对于单元格 1，有右侧空间，对于单元格 2，有左侧空间，对于单元格 3，左侧的大小增加了一点。为什么会有这种奇怪的行为？

这是我的代码：

- (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];
}

它的显示如下

还有单元格2

还有单元格 3

Answer 1

您添加到集合视图单元格的子视图似乎没有设置。问题出在这里：

// 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;
}

您只是调用addSubview，但您没有在要添加的子视图上添加任何类型的约束。它应该是什么样子的：

// 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;
}

约束使您的albumView 填充单元格。据我了解，这是想要的效果。

如果您使用类似PureLayout 的东西，约束部分看起来会简单得多。

让我知道它是否适合你

Answer 2

在您的类中添加此方法并根据需要进行更改。

- (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;
}

Answer 3

您必须为此使用 UICollectionView 的委托方法， 您必须为每个 Cell 提及您的 itemSize。

像这样创建一个 UICollectionViewFlowLayout：

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

   layOut.itemSize = CGSizeMake(cellWidth, cellHeight);

   layOut.scrollDirection = UICollectionViewScrollDirectionHorizontal;

   layOut.minimumInteritemSpacing = 0;

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

并使用此委托方法：

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

  {
     CGSize itemSize = CGSizeMake(cellWidth, cellHeight);

    return itemSize;
  }