将CollectionView单元调整为居中以适应不同的iphone尺寸

时间:2016-01-19 06:01:44

标签: ios objective-c uicollectionview

我试图将我的collectionView单元集中在iOS中。我有内容插入左和右;正如:

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

这允许第一个单元格和最后一个单元格停在屏幕中心。

我试图通过以上方式实现的是当视图加载时,我希望中间单元格位于视图的中心。如果有细胞1,2,3,4,5。我想在中间加载3个视图。

所以我试图用contentOffset来完成它。但是,我很难找到细胞,嵌入和偏移的关系。

我的细胞宽80,边距为10。

集合视图只有一行。

编辑:

View post on 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);
}

Cell 1& 5将超出范围,仅在用户水平滚动时才会看到。

| _1__ | | _2__ | | _3__ || _4__ | | _5__ |

更新:我想要做的是使collectionView滚动到中间单元格并将该单元格置于屏幕中心。

2 个答案:

答案 0 :(得分:0)

设置集合单元格布局:

@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];
}

答案 1 :(得分:0)

将此flowlayout用于您的集合视图,它会根据您想要在屏幕上显示的行数调整您的集合视图

//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;
 }