Question

我尝试使用UICollectionView设置应该是简单的水平布局，绕圈而不会达到预期效果，因此任何指针或示例都会感激不尽。

在我修改代码时可能没有什么意义，因为经常改变而没有成功。

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

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

编辑 - 12月16日

我还没有解释或说明这一点，所以下面有更好的说明。 I know how to create the collection view, set the item size etc but can not get the desired layout。

这是单行水平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 /。创建单元格时，执行以下操作;

- (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来正确设置scrollview偏移量

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

Answer 2

创建一个集合视图并根据YOUR SECOND ROW中项目的高度设置高度，然后将滚动方向设置为Horizontal。还

这是附加的图像，相应地检查集合视图的设置。

以下方法将根据您的第二行设置单元格宽度。第一个单元格将显示在屏幕的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{

    }
}

水平UICollectionView单行布局

编辑 - 12月16日

2 个答案: