水平UICollectionView单行布局
我正在尝试使用UICollectionView
设置应该是简单的水平布局, UICollectionView
所需的结果,因此任何指针或示例都将非常感激。
在我粘贴代码时可能没有什么意义,因为经常改变而没有成功。
图像显示两行,第一行是单个项目,大小正确并在中心正确对齐。 第二行有3个项目,第一行应该与上面的项目大小相同,下一个项目边缘只是可见,表示另一个项目。 当项目向左滑动时,它们应该是3个可见项目 – 主要项目在中心完全可见,项目1和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处于局部视图(左)
好的,我这样做了如下;
对于我的情况,坚持使用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中项目的高度设置高度,然后将滚动方向设置为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]); }