iOS UICollectionvView单元格横向和纵向的不同布局

I want make screen in which collection view Cell should fill whole width of screen while device is in portrait , and when device rotates collection view shows 2 cells in 1 section.

我想要制作屏幕,其中集合视图Cell应该在设备处于纵向时填充屏幕的整个宽度,并且当设备旋转时集合视图在1个部分中显示2个单元格。

For better visualisation see below image.

为了更好的可视化,请参见下图

I tried to make cell width = device width (for portrait) but in landscape cell shows in centre of screen.

我试图使单元格宽度=设备宽度(对于肖像),但在屏幕中心的横向单元格显示中。

Will it possible to make such design using collection view ? If it is possible then how do I achieve this? OR any other idea will be appreciated.

是否可以使用集合视图进行此类设计?如果有可能那么我该如何实现呢?或任何其他想法将不胜感激。

2 个解决方案

#1

Use size class to position landscape or portrait in different ways.

使用大小类以不同方式定位横向或纵向。

Have a look to this detailled article go to Add constraints for generic size class

看看这篇详细文章,请参阅为通用大小类添加约束

#2

You can try this

你可以试试这个

#define kNumberOfCellsInARowPortrait 1
#define kNumberOfCellsInARowLandscape 2

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

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (UIInterfaceOrientationIsLandscape(UIApplication.sharedApplication.statusBarOrientation)) {
        CGFloat cellWidth = floor((CGRectGetWidth(collectionView.bounds)-5) / kNumberOfCellsInARowLandscape);
        return CGSizeMake(cellWidth, cellWidth);
    } else {
        CGFloat cellWidth = floor((CGRectGetWidth(collectionView.bounds)-5) / kNumberOfCellsInARowPortrait);
        return CGSizeMake(cellWidth, cellWidth);
    }
}

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [self.collectionView reloadData];
}