水平 UICollectionView 单行布局

Question

我正在尝试使用UICollectionView 设置应该是简单的水平布局，在没有达到预期结果的情况下转圈，因此任何指针或示例将不胜感激。

我粘贴经常更改但没有成功的代码可能没什么意义。

图片显示了两行，第一行是单个商品，大小正确且居中对齐。第二行有 3 个项目，第一个应该与上面的项目大小相同，下一个项目边缘仅可见，表示另一个项目。当项目向左滑动时，它们应该是 3 个可见的项目 - 主要项目在中心完全可见，项目 1 和 3 在左右边缘可见。

我尝试设置分页，更改insetForSectionAtIndex、minimumLineSpacingForSectionAtIndex、minimumInteritemSpacingForSectionAtIndex。

---

编辑 - 12 月 16 日

我没有很好地解释或说明这一点，所以最好在下面说明。 我知道如何创建集合视图、设置项目大小等，但无法获得所需的布局。

这是水平的单行UICollectionView，其中一个项目始终处于全视图中，其相邻项目处于部分视图中，向用户表明左侧或右侧还有更多项目，具体取决于滚动位置和项目数。

• 当项目 1 为全视图时，项目 2 为部分视图
• 当项目 2 处于全视图时，项目 1 和 3 处于部分视图（左和右）
• 当项目 3 为全视图时，项目 2 为部分视图（左）

Answer 1

好的，我已经这样做了；

在我的情况下坚持使用 288x180 的项目尺寸

1/.设置项目大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(288, 180);
}

2/.设置 insetForSectionAtIndex

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    //top, left, bottom, right
    return UIEdgeInsetsMake(0, 16, 0, 16);
}

3/.设置 minimumInteritemSpacingForSectionAtIndex 以确保间距

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

4/.创建单元格 ID 时执行以下操作；

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell* cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath];

    if (!cell)
    {
        cell  = [self.collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath];

        cell.contentView.width = 288;
        cell.contentView.backgroundColor = [UIColor whiteColor];

    }

    return cell;
}

5/.要正确实现分页效果，请确保 collectionView.paging = NO 和子类 UICollectionViewFlowLayout 使用 targetContentOffsetForProposedContentOffset 正确设置滚动视图偏移量

不确定这是否是最好的方法，但它给了我想要的结果..

Answer 2

创建一个集合视图并根据您的第二行中项目的高度设置高度，然后将滚动方向设置为水平。还有

这是附上的图片，请相应检查集合视图的设置。

以下方法将根据您的第二行设置单元格宽度。第一个单元格将显示在屏幕的 3/4 处，第二个单元格将显示在屏幕的 1/4 部分。

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

return CGSizeMake( (self.view.frame.size.width / 4) * 3, "YOUR SECOND ROW ITEM HEIGHT");

}

我已经为屏幕上的 5 个单元格做了这个 附上以下代码。

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

    return CGSizeMake( self.view.frame.size.width / 5, 70);

}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    if(indexPath.row > pos)
    {
        if (indexPath.row - pos == 2) {
            pos = pos + 1;
        }
        [self changeDate];
    }
    else if (indexPath.row == pos)
    {
        NSLog(@"Do Nothing");
    }
    else
    {
        if (indexPath.row + 2 == pos) {
            pos = pos - 1;
        }
        [self changeDate1];
    }
    //NSLog(@"%@",[arrDate objectAtIndex:indexPath.row]);
}


-(void)changeDate
{
    if (pos<(arrDate.count - 2)) {
        pos=pos+1;
        [self.tpCollectionView selectItemAtIndexPath:[NSIndexPath indexPathForRow:pos inSection:0] animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally];
        NSLog(@"%@",[arrDate objectAtIndex:pos]);
        self.lblMovieName.text =[arrDate objectAtIndex:pos];
    }
}
-(void)changeDate1
{
    if(pos>2)
    {
        pos=pos-1;
        [self.tpCollectionView selectItemAtIndexPath:[NSIndexPath indexPathForRow:pos inSection:0] animated:YES scrollPosition:UICollectionViewScrollPositionCenteredHorizontally];
        NSLog(@"%@",[arrDate objectAtIndex:pos]);
        self.lblMovieName.text =[arrDate objectAtIndex:pos];
    }
    else{

    }
}