調整CollectionView單元以居中以適應不同的iPhone尺寸

Question

我正在嘗試將iOS中的collectionView單元居中放置。 我有左右的內容插圖為：

([UIScreen mainScreen].bounds.size.width - 80)/2

這使第一個單元格和最后一個單元格停在屏幕中央。

我試圖通過以上方法實現的是在加載視圖時，我希望中間單元位於視圖的中心。 如果有單元1,2,3,4,5 我想在中間加載3個視圖。

所以我正在嘗試用contentOffset完成它。 但是，我很難找到單元格的關系，插圖和偏移量。

我的單元格寬度為80，邊距為10。

集合視圖將只有1行。

編輯：

查看imgur.com上的帖子

所附圖片是我想要完成的。 抱歉，如果我的最初描述不清楚。 collectionView將只有1行，但單元格很寬。

更新的代碼：

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
 return UIEdgeInsetsMake(0, ([UIScreen mainScreen].bounds.size.width - 80)/2, 0, ([UIScreen mainScreen].bounds.size.width - 80)/2);
}

單元格1和5將超出范圍，只有在用戶水平滾動時才能看到。

| _1__ | | _2__ | | _3__ || __4__ | | _5__ |

更新：我想要做的是將collectionView滾動到中間單元格並將該單元格在屏幕上居中。

Answer 1

設置收集單元的布局：

@property(nonatomic, strong)UICollectionViewFlowLayout *flowLayout;

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.collectionView registerClass:[CellClass class] forCellWithReuseIdentifier:@"CellIdentifier"];
    self.collectionView.backgroundColor = [UIColor clearColor];

    // Configure layout
    self.flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [self.flowLayout setItemSize:CGSizeMake((30*screenWidth)/100, desiredHeight)];
    [self.flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
    self.flowLayout.minimumInteritemSpacing = 8.0f;//set desired item spacing
    [self.collectionView setCollectionViewLayout:self.flowLayout];
}

滾動到所需的單元格：

- (void)viewWillAppear:(BOOL)animated 
{
    //get the item index to scroll to
    NSInteger focusItem = floor(array.count/2);//this may cause some error, debug yourself  

    NSIndexPath *indexPath= [NSIndexPath indexPathForItem:focusItem  inSection:0];
    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:NO];
}

Answer 2

對您的collectionview使用此布局，它將根據您想在屏幕上顯示多少行來調整collectionview

//initial values
leftMargin = 5;
rightMargin = 5;
lineSpacing = 0;
cellSpacing = 0;
topSpacing = 0;
numberOfCellInRow = 3;

 #pragma mark - CollectionView FlowLayout
-(UICollectionViewFlowLayout *)flowLayout{

if(!_flowLayout){

    _flowLayout = [[UICollectionViewFlowLayout alloc] init];
    [_flowLayout setSectionInset:UIEdgeInsetsMake(topSpacing, leftMargin, 0, rightMargin)];
    [_flowLayout setMinimumInteritemSpacing:cellSpacing];
    [_flowLayout setMinimumLineSpacing:lineSpacing];
    [_flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

    CGSize screenSize = self.view.frame.size;
    CGFloat cellWidth = (screenSize.width - ((leftMargin + rightMargin) + ((numberOfCellInRow -1)*cellSpacing)))/numberOfCellInRow;
    CGFloat cellHeight = // height of cell here;
    [_flowLayout setItemSize:CGSizeMake(cellWidth, cellHeight)];
  }

  return _flowLayout;
}

//Set CollectionView Layout
[self.collectionView setCollectionViewLayout:self.flowLayout];

 -(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

  CGSize rect = self.collectionView.frame.size;
  rect.width = rect.width / 3;

   return rect;
 }