水平UICollectionView单行布局

我正在尝试使用UICollectionView设置应该是简单的水平布局, UICollectionView所需的结果,因此任何指针或示例都将非常感激。

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

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

我已经尝试设置分页,更改insetForSectionAtIndexminimumLineSpacingForSectionAtIndexminimumInteritemSpacingForSectionAtIndex


编辑 – 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处于局部视图(左)

好的,我这样做了如下;

对于我的情况,坚持使用288×180的物品尺寸

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

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

创建一个集合视图并根据YOUR SECOND ROW中项目的高度设置高度,然后将滚动方向设置为Horizo​​ntal。 也

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

在此处输入图像描述

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