Images do not load correctly unless reloadData is called - ios

Question

I have a UICollectionViewController with a custom UICollectionViewCell with an image and a label outlet. The images only fill correctly AFTER I press reload to reload the data. I notice that the labels disappear too, though I feel they
are just behind the images.
What am I doing wrong?
ON LOAD
AFTER RELOADING THE DATA
This is how big the images should be when the view is loaded.
I set the cells to be a factor of how big the screen size is. NSLogging the Frames I can see that the Cell size and the image size are the same.
Cell size: 124.85
PhotoView size: {{0, 0}, {124.85, 124.85}}
CollectionViewController.h
#import <UIKit/UIKit.h>
#import "HomeModel.h"
#interface CollectionViewController : UICollectionViewController <UICollectionViewDelegateFlowLayout>
#end
CollectionViewController.m
#import "CollectionViewController.h"
#import "CollectionViewCell.h"
#define SPACE_BETWEEN_CELLS 0.05
#interface CollectionViewController () {
NSArray * _feedItems;
}
- (IBAction)reloadUserData:(id)sender;
#end
#implementation CollectionViewController
static NSString * const reuseIdentifier = #"Cell";
- (IBAction)reloadUserData:(id)sender {
[self.collectionView reloadData];
}
- (void)viewDidLoad {
[super viewDidLoad];
// Uncomment the following line to preserve selection between presentations
self.clearsSelectionOnViewWillAppear = YES;
self.collectionView.allowsMultipleSelection = NO;
_feedItems = [NSArray arrayWithObjects:#"1.jpg", #"2.jpg", #"3.jpg", #"4.jpg", #"5.jpg", nil];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark <UICollectionViewDataSource>
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return [_feedItems count];
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath];
//IMAGE
cell.photoView.frame = CGRectMake(0, 0, cell.bounds.size.width, cell.bounds.size.height);
cell.photoView.backgroundColor = [UIColor colorWithRed:128 green:128 blue:128 alpha:0.5];
cell.photoView.image = [UIImage imageNamed:[_feedItems objectAtIndex:indexPath.row]];
NSLog(#"PhotoView size: %#", NSStringFromCGRect(cell.photoView.frame) );
return cell;
}
#pragma mark <UICollectionViewDelegateFlowLayout>
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
CGFloat size = ( [[UIScreen mainScreen] bounds].size.width / 3 ) - ( SPACE_BETWEEN_CELLS * 3);
NSLog(#"Cell size: %f ", size);
return CGSizeMake( size, size);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return SPACE_BETWEEN_CELLS;
}
#end
Here is my custom cell
CollectionViewCell.h
#import <UIKit/UIKit.h>
#interface CollectionViewCell : UICollectionViewCell
#property (weak, nonatomic) IBOutlet UIImageView *photoView;
#property (weak, nonatomic) IBOutlet UILabel *textLabel;
#end
CollectionViewCell.m
#import "CollectionViewCell.h"
#implementation CollectionViewCell
- (void)awakeFromNib {}
#end

Answer 1

Reduce the height of the image view (Photo view),
Do not keep its height same as the height of the cell, otherwise the label will also disappear.
cell.photoView.frame = CGRectMake(0, 0, cell.bounds.size.width, cell.bounds.size.height - 20);
If using auto layout give the image view, constraints from (top, left and right and set its height), and for the label give constraints (bottom and align it horizontally center in the cell).
If using auto resizing then set the following settings,
for image view
and for the label