水平UICollectionView单行布局 [英] Horizontal UICollectionView single row layout

问题描述

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

I'm trying to setup what should be a simple horizontal layout using UICollectionView, going around in circles without achieving the desired result so any pointer or examples would be gratefully appreciated.

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

Probably little point in me pasting code as changed so often without success.

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

The image shows two rows, the first is a single item and is the correct size and aligned correctly in the centre. The second row has 3 items, the first should be the same size as the item above, with the next item edge being just visible indicating another item. When the item is swiped to the left their should be 3 items visible — the main item fully visible in the centre and items 1 & 3 just visible at the left and right edges.

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

I have tried setting paging on, changing insetForSectionAtIndex, minimumLineSpacingForSectionAtIndex, minimumInteritemSpacingForSectionAtIndex.

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

I haven't explained or illustrated this very well, so have better illustrated below. I know how to create the collection view, set the item size etc but can not get the desired layout.

这是单行水平 UICollectionView ，其中一个项目始终处于完整视图，其中相邻项目位于部分视图中，向用户显示更多项目根据滚动位置和项目计数向左或向右。

This is a single row horizontal UICollectionView with one item always in full view and its neighbouring items in partial view indicating to the user there are more items to the left or right depending on the scroll position and item count.

• 当项目1处于完整视图时，项目2处于局部视图中


• 当项目2处于完整视图时，项目1和3处于局部视图（左和右）


• 当项目3处于完整视图时，第2项是局部视图（左）

推荐答案

好的，我按照以下方式完成了这项工作;

Ok, I've done this as follows;

我的案例大小为288x180

sticking with an item size of 288x180 for my case

1 /。设置项目大小

1/. Set the item size

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

2 /。设置insetForSectionAtIndex

2/. Set insetForSectionAtIndex

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

3 /。设置minimumInteritemSpacingForSectionAtIndex以确保间距

3/. Set minimumInteritemSpacingForSectionAtIndex to ensure spacing

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

4 /。创建单元格ID时执行以下操作;

4/. When creating the cell id did the following;

- (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偏移量

5/. To achieve the paging effect correctly ensure collectionView.paging = NO and subclass UICollectionViewFlowLayout to use targetContentOffsetForProposedContentOffset for correctly setting the scrollview offset

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

Not sure if this is the best way but it has given me the desired result..

这篇关于水平UICollectionView单行布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！