On iPhoneX, the layout of the UICollectionView is out of alignment.

Asked 2 months ago, Updated 2 months ago, 3 views

I have a problem with iPhoneX layout.

The app we are currently developing has not added LaunchScreenImage (1124x2436, 2436x1124) for iPhone X.
I expect the iPhone X to have the same layout as the 4.7 inch screen (iPhone 6/7/8) up and down.

One feature uses a UICollectionView with six elements in a horizontal row at the top of the screen.

This UICollectionView is
·On the 4.7 inch screen (iPhone 6/7/8) it will be displayed as intended. 6 UICollectionViewCell will be displayed side by side
On the other hand
·On iPhoneX, it becomes two lines and the first line becomes empty. You can scroll vertically

Enter a description of the image here

The code looks like the following (no storyboard)

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: NSSstringFromClass ([UICollectionViewCell class]);

        self.backgroundColor=UIColor.grayColor;
    }

    return self;
}

#pragma mark-
# pragma mark UICollectionViewDataSource

- (UICollectionViewCell*) collectionView: (UICollectionView*) collectionView cellForItemAtIndexPath: (nonnull NSIndexPath*) indexPath
{
    NSSstring* cellName = NSSstringFromClass ([UICollectionViewCell class]);
    UICollectionViewCell*cell= [collectionView requestReusableCellWithReuseIdentifier: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
{
    return6;
}

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

    return CGSizeMake (width,48);
}

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

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

Under the following conditions, we would like to display the elements of the above UICollectionView perfectly in the horizontal line.

  • Language does not use Objective-C.storyboard
  • Supported iOS is "9.3" or higher
  • iPhoneX displays a 4.7 inch screen layout (because LaunchImage for iPhoneX is not added, there are many functions and screens of the app, and it is difficult to handle all screens due to schedule)

Please let me know if there is a good way. Thank you.

ios uicollectionview uicollectionviewcell iphone-x

2022-09-30 11:55

1 Answers

I'm sorry to ask you a question myself, but
The solution was solved by the following method, so I will write down the method.

init() in GridView.m set the following properties.

if(@available(iOS11,*)){
        self.contentInsetAdjustmentBehavior=UIScrollViewContentInsetAdjustmentNever;
    }


2022-09-30 11:55

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.