UICollectionView不会在屏幕旋转时更新其布局

Question

I have a custom UIView with a UICollectionView .

On screen rotation I am trying to get the UICollectionView to stretch across the screen, and then redraw its cells.

After I had the data downloaded I tried both [grid setNeedsLayout] and [grid setNeedsDisplay] but that didn't work.

This is what I want to happen:

Portrait

Landscape

(This is also how it appears when the app is started in landscape, but if you change to portrait it doens't update.)

But this is what I get if I start in Portrait mode and switch to Landscape .

I am creating these views programmatically. I am not using any Storyboards.

I have tried:

-(void)viewDidLayoutSubviews {
    grid = [[MyThumbnailGridView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height/2, self.view.frame.size.width, self.view.frame.size.height/2)];

}

I have also tried toying with:

- (void) viewWillLayoutSubviews {

    UIInterfaceOrientation interfaceOrientation = [[UIApplication sharedApplication] statusBarOrientation];

    if (UIInterfaceOrientationIsLandscape(interfaceOrientation))
    {
        //LANDSCAPE
        if(grid){
            NSLog(@"Grid Needs Landscape Layout");
            grid.frame =CGRectMake(0, self.view.frame.size.height/2, self.view.frame.size.width, self.view.frame.size.height/2);
            [grid refreshData];
        }

    }else {
        //PORTRIAT
        if(grid){
            NSLog(@"Grid Needs Portrait Layout");
            grid.frame =CGRectMake(0, self.view.frame.size.height/2, self.view.frame.size.width, self.view.frame.size.height/2);
            [grid refreshData];
        }
    }
}

But I can't get it to stretch.

Any help?

MyThumbnailGridView

@interface ViewController () <UINavigationControllerDelegate> {

    MyThumbnailGridView *grid;

    NSMutableArray * arrImages;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    arrImages = [NSMutableArray new];

    grid = [[MyThumbnailGridView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height/2, self.view.frame.size.width, self.view.frame.size.height/2)];
    //grid = [[MyThumbnailGridView alloc] initWithFrame:CGRectZero];
    NSLog(@"showThumbnailGrid Grid View Size: %@", NSStringFromCGRect(grid.frame));

    [self.view addSubview:grid];

    [self getListOfImages];
}


-(void) getListOfImages {
        //Do background task to get images  and fill arrImages
         [self onDownloadImageDataComplete];    
}


- (void) onDownloadImageDataComplete{
    grid.imageDataSource = arrImages;
    //  [grid setNeedsLayout];
    //  [grid setNeedsDisplay];
}

//...
@end

*MyThumbnailGridView.h

@interface MyThumbnailGridView : UIView

-(id)initWithFrame:(CGRect)frame;
-(void) refreshData;

@property (nonatomic,strong) NSArray *imageDataSource;

@end

*MyThumbnailGridView.m

@interface MyThumbnailGridView () <UICollectionViewDelegate, UICollectionViewDataSource>{
    UICollectionView *collectionView;
}

@end

@implementation MyThumbnailGridView


- (instancetype) initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if(self){
        [self customInit];

    }
    return self;
}
- (void) customInit {
    collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:[[MyFlowLayout alloc] init]];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    collectionView.allowsMultipleSelection = NO;
    collectionView.showsVerticalScrollIndicator = YES;
    [collectionView setBackgroundColor:[UIColor darkGrayColor]];
    [collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"MyId"];
    [self addSubview:collectionView];
}
- (void) refreshData {
    NSLog(@"Refresh Grid Data");
    [collectionView reloadData];
}

////other code
@end

MyFlowLayout

@interface MyFlowLayout : UICollectionViewFlowLayout
@end

@implementation MyFlowLayout
- (instancetype)init{
    self = [super init];
    if (self)
    {
        self.minimumLineSpacing = 1.0;
        self.minimumInteritemSpacing = 1.0;
        self.scrollDirection = UICollectionViewScrollDirectionVertical;

    }
    return self;
}

- (CGSize)itemSize {
    NSInteger numberOfColumns = 3;
    CGFloat itemWidth = (CGRectGetWidth(self.collectionView.frame) - (numberOfColumns - 1)) / numberOfColumns;
    return CGSizeMake(itemWidth, itemWidth);
}

@end

MyCollectionViewCell

@interface MyCollectionViewCell : UICollectionViewCell
@property (strong, nonatomic)  UIImageView *imageView;
@end
@implementation MyCollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        self.imageView = [UIImageView new];
        [self.imageView setContentMode:UIViewContentModeScaleAspectFill];
        [self.imageView setClipsToBounds:YES];
        [self.imageView setBackgroundColor:[UIColor darkGrayColor]];
        [self.contentView addSubview:self.imageView];

    }
    return self;
}

- (void)prepareForReuse {
    [super prepareForReuse];
    self.imageView.image = nil;
    [self.imageView setHidden:NO];
}

- (void)layoutSubviews {
    [super layoutSubviews];
    [self.imageView setFrame:self.contentView.bounds];
}
@end

Answer 1

This can be solved with either you can change the frame of MyThumbnailGridView view in delegate function of orientation or create the view with constraints like this

(void)viewDidLoad {

   [super viewDidLoad];

    arrImages = [NSMutableArray new];

    grid = [[MyThumbnailGridView alloc] initWithFrame:CGRectMake(0, self.view.frame.size.height/2, self.view.frame.size.width, self.view.frame.size.height/2)];

    [self.view addSubview:grid];    

    [self getListOfImages];

 }

-(void)viewDidLayoutSubviews
{  
   if(Once){

        Once = NO;

       // adding constraints

  MyThumbnailGridView.translatesAutoresizingMaskIntoConstraints = NO;

  [self.MyThumbnailGridView.widthAnchor constraintEqualToConstant:self.view.frame.size.width].active = YES;

  [self.MyThumbnailGridView.heightAnchor constraintEqualToConstant:self.view.frame.size.height/2].active = YES;

  [self.MyThumbnailGridView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;

  [self.MyThumbnailGridView.topAnchor  constraintEqualToAnchor:self.view.topAnchor constant:self.view.frame.size.height/2].active = YES;



    }
}

Also implement this

- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
    [self.view layoutIfNeeded];
    [MyThumbnailGridView.collectionView invalidate];
// Do view manipulation here.
    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
}

Answer 2

The problem is that the collection view itself is not changing size when the app rotates. You have given the collection view a fixed frame and then just walked away. So it never changes. So never lays itself out again.

You should give your MyThumbnailGridView and its collection view subview autolayout contraints to their superviews, so that they change size correctly when the app rotates.