CollectionViewItem aren't allocated correctly on iPhoneX screen

Question

My iOS application has not yet support iPhoneX layout.

That is my application doesn't have Launch Screen for iPhoneX (1124x2436, 2436x1124).

Thus on iPhoneX, UI my application is shown on 735x1334 area. It's OK.

Now I added UICollectionView on the top of my view. I assigned the size of CollectionViewItem so that the CollectionView has 6 items horizontally.

On iPhone8(iOS11.2) the CollectionViewItems were allocated as I intended.

But on iPhoneX(iOS11.2) the CollectionView has 2 rows and first row is blank, so it's even scrollable.

I'd appreciate it if you would tell me the way to layout my collectionview as I intended.

My code is like below,

View Controller.m

- (void)loadView
{
    self.view = [[FirstView alloc] init];
}

FirstView.m

- (id)init
{
    self = [super init];
    if (self) {
        self.backgroundColor = UIColor.whiteColor;

        [self initGridView];
    }
    return self;
}

- (void)initGridView
{
    _gridView = [[GridView alloc] init];

    [self addSubview:_gridView];
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    [self layoutGridView];
}

- (void)layoutGridView
{
    CGSize parentSize = _gridView.superview.frame.size;

    _gridView.frame = CGRectMake(0, 0, parentSize.width, 48);
}

GridView.m

- (id)init
{
    self = [super initWithFrame:CGRectZero collectionViewLayout:[[UICollectionViewFlowLayout alloc] init]];
    if (self) {
        self.delegate = self;
        self.dataSource = self;

        [self registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class])];

        self.backgroundColor = UIColor.grayColor;
    }

    return self;
}

#pragma mark -
#pragma mark UICollectionViewDataSource

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath
{
    NSString *cellName = NSStringFromClass([UICollectionViewCell class]);
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellName forIndexPath:indexPath];

    if (indexPath.row % 2  == 0) {
        cell.contentView.backgroundColor = UIColor.blueColor;
    }
    else {
        cell.contentView.backgroundColor = UIColor.orangeColor;
    }

    return cell;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 6;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    CGSize selfSize = self.frame.size;
    CGFloat width = selfSize.width / 6;

    return CGSizeMake(width, 48);
}

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

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

If I use safe area, I need to add LaunchScreen image for iPhoneX(1124x2436, 2436x1124). Otherwise my CollectionView is allocated 44pt below more. But if I add iPhoneX LaunchScreen, I need to change all layout for the screens of my application. I don't have so much time because my application has a lot of functions and screens. — M.Masa, Jan 09 '18 at 07:39
Safe area layout is good option - https://stackoverflow.com/questions/44492404/safe-area-of-xcode-9/45334411#45334411 — Krunal, Jan 11 '18 at 06:48
You should use LaunchScreen Storyboard instead of LaunchScreen images. — atulkhatri, Jan 11 '18 at 07:51
@atulkhatri Yes. I'll use LaunchScreen.storyboard for the successor application. — M.Masa, Jan 11 '18 at 08:11

score 1 · Answer 1 · edited May 04 '18 at 16:46

1

I've resolved the issue by adding the following line in my init() method of GridView.m file.

if #available(iOS 11.0, *) {
  self.collectionView.contentInsetAdjustmentBehavior = .never
} else {
  // Fallback on earlier versions
}

Thank you.

edited May 04 '18 at 16:46

boraseoksoon

2,164
1
20
25

answered Jan 11 '18 at 06:44

M.Masa

532
4
20

CollectionViewItem aren't allocated correctly on iPhoneX screen

1 Answers1