Add more images to an already running UICollectionView - ios

Question

I have a UICollectionView that i set up in the viewDidLoad and add the images immediately after that. When the user scrolls to a certain point i try to add more images but The collection view won't load the new images
How do i reload or add more images to my scrollview
#pragma mark - New Retrieve
- (void) rwDataToPlist {
// Step1: Get plist file path
NSArray *sysPaths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory ,NSUserDomainMask, YES);
NSString *documentsDirectory = [sysPaths objectAtIndex:0];
NSString *filePath = [documentsDirectory stringByAppendingPathComponent:#"news.plist"];
NSLog(#"Plist File Path: %#", filePath);
if ([[NSFileManager defaultManager] fileExistsAtPath:filePath]) {
stuff = [[NSArray alloc] initWithContentsOfFile:filePath];
//NSLog(#"Stuff %#", stuff);
[self sortRetrievedData];
} else {
}
}
-(void)sortRetrievedData {
titles = [stuff valueForKey:kKeyTitle];
thumbMediaUrl = [stuff valueForKey:kKeyThumbUrl];
thumbWidth = [stuff valueForKey:kKeyThumbWidth];
thumbHeight = [stuff valueForKey:kKeyThumbHeight];
for(NSArray *array in titles) {
for (NSArray *realArray in array) {
titles = realArray;
}
}
for(NSArray *array in thumbMediaUrl) {
for(NSDictionary *dict in array) {
thumbMediaUrl = dict;
}
}
for(NSArray *array in thumbWidth) {
for(NSDictionary *dict in array) {
thumbWidth = dict;
}
}
for(NSArray *array in thumbHeight) {
for(NSDictionary *dict in array) {
thumbHeight = dict;
}
}
}
#pragma mark - Collection View
#pragma mark - Display Collection
-(void)displayCollection {
UIColor *myColor = [UIColor colorWithRed:(245.0 / 255.0) green:(245.0 / 255.0) blue:(245.0 / 255.0) alpha: 1];
CGRect screenBound = [[UIScreen mainScreen] bounds];
CGSize screenSize = screenBound.size;
CGFloat screenWidth = screenSize.width;
CGFloat screenHeight = screenSize.height;
self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
CGRect locOfScree = CGRectMake(0, 64, screenWidth, screenHeight - 44);
UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
imageDisplayer = [[UICollectionView alloc] initWithFrame:locOfScree collectionViewLayout:layout];
[imageDisplayer setDataSource:self];
[imageDisplayer setDelegate:self];
UINib *nib = [UINib nibWithNibName:#"CollectionViewCell" bundle:nil];
[imageDisplayer registerNib:nib forCellWithReuseIdentifier:CellIdentifier];
[imageDisplayer setBackgroundColor:myColor];
[self.view insertSubview:imageDisplayer belowSubview:navBar];
//[self.view addSubview:imageDisplayer];
}
#pragma mark - Setup
- (void)setupData
{
self.imageURLStrings = [NSMutableArray array];
// Save image to docs directory so we can get a nice URL
// Not sure how to get the URL from an asset catalog off the top of my head
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
NSString *path = [documentsDirectory stringByAppendingPathComponent:#"greyBurger.png"];
UIImage *image = [UIImage imageNamed:#"greyBurger"];
NSData *data = UIImagePNGRepresentation(image);
[data writeToFile:path atomically:YES];
// Populate our imageURLStrings array with many paths
for (NSInteger i = 0; i < NumberOfImages; i++)
{
[self.imageURLStrings addObject:path];
//NSLog(#"Path %#", path);
}
}
- (void)setupCollectionView
{
UINib *nib = [UINib nibWithNibName:#"CollectionViewCell" bundle:nil];
[self.collectionView registerNib:nib forCellWithReuseIdentifier:CellIdentifier];
}
#pragma mark - UICollectionView Datasource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
//return [self.imageURLStrings count];
return [titles count];
//return 2;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
//NSLog(#"CELL FOR COUNT:%lu", [titles count]);
NSString *title = [titles objectAtIndex:indexPath.row];
cell.backgroundColor = [UIColor whiteColor];
NSString *imageUrl = [thumbMediaUrl objectForKey:title];
NSURL *thumbUrl = [NSURL URLWithString:imageUrl];
UIImageView *imageView = [[UIImageView alloc] init];
NSData *imageData = [NSData dataWithContentsOfURL:thumbUrl];
imageView.image = [UIImage imageWithData:imageData];
cell.backgroundView = imageView;
cell.layer.shouldRasterize = YES;
cell.layer.rasterizationScale = [UIScreen mainScreen].scale;
//cell.frame = CGRectMake(0, 0, 100, 100);
//cell.imageURLString = [self.imageURLStrings objectAtIndex:indexPath.item];
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGRect screenBound = [[UIScreen mainScreen] bounds];
CGSize screenSize = screenBound.size;
CGFloat screenWidth = screenSize.width;
NSString *title = [titles objectAtIndex:indexPath.row];
float width = [[thumbWidth objectForKey:title] floatValue];
float height = [[thumbHeight objectForKey:title] floatValue];
float imageWidth = (screenWidth / 2) - 3;
float scale = imageWidth / width;
float imageHeight = height * scale;
CGSize imageSize = CGSizeMake(imageWidth, imageHeight);
return imageSize;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 2.0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 2.0;
}
// Layout: Set Edges
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
// return UIEdgeInsetsMake(0,8,0,8); // top, left, bottom, right
return UIEdgeInsetsMake(0,0,0,0); // top, left, bottom, right
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray* attributesToReturn = [self layoutAttributesForElementsInRect:rect];
for (UICollectionViewLayoutAttributes* attributes in attributesToReturn)
{
if (nil == attributes.representedElementKind)
{
NSIndexPath* indexPath = attributes.indexPath;
attributes.frame = [self layoutAttributesForItemAtIndexPath:indexPath].frame;
}
}
return attributesToReturn;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes* currentItemAttributes = [self layoutAttributesForItemAtIndexPath:indexPath];
if (indexPath.item < numColumns){
CGRect f = currentItemAttributes.frame;
f.origin.y = 0;
currentItemAttributes.frame = f;
return currentItemAttributes;
}
NSIndexPath* ipPrev = [NSIndexPath indexPathForItem:indexPath.item-numColumns inSection:indexPath.section];
CGRect fPrev = [self layoutAttributesForItemAtIndexPath:ipPrev].frame;
CGFloat YPointNew = fPrev.origin.y + fPrev.size.height + 10;
CGRect f = currentItemAttributes.frame;
f.origin.y = YPointNew;
currentItemAttributes.frame = f;
return currentItemAttributes;
}
I have changed my code based on suggestions of The first two answers, now i have to to get the images to add to a running view. and make each column have their own independent height so there is a 2px spacing at each edge, This is what i tried for reloading data
-(void)refreshView {
[self rwDataToPlist];
[self.collectionView reloadData];
[self setupCollectionView];
}

Answer 1

With starting iOS6 itself Apple Introduced for UICollectionView. You can Use UICollectionView with Pull to Bottom Refresh to Achieve your Goal. Its look like UITableView Pull to Bottom Refresh.
Here Are Some Reference for UIcollectionView:
Source Code
Beginning UICollectionView
UICollectionView with StoryBoard
Once You create UICollectionView then You need to Add PulltoBottom Refresh for your UICollectionView like following code:
-(void)viewWillAppear:(BOOL)animated
{
[self.collectionView.infiniteScrollingView setActivityIndicatorViewStyle:UIActivityIndicatorViewStyleWhite];
[self.collectionView addInfiniteScrollingWithActionHandler:^{
////(#"Infinitescroll");
#try {
int64_t delayInSeconds = 2.0;
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, delayInSeconds * NSEC_PER_SEC);
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
//[self.dataSource addObjectsFromArray:tmp];
[self.collectionView performBatchUpdates:^{
} completion:nil];
[self.collectionView.infiniteScrollingView stopAnimating];
});
}
#catch (NSException *exception) {
}
}];
[super viewWillAppear:animated];
}
For Below code you must Add some files:
SVPulltoReferesh Link

Answer 2

A few suggestions / questions:
Not knowing the constraints of your particular problem, it sounds like you're trying to display some semblance of a grid of images, and load the "next page" of images when a user scrolls beyond a certain point. It seems like a UITableView or UICollectionView would be a more appropriate mechanism to do what you're trying to do. Both of those classes will handle lazy loading of images, pagination via a properly configured datasource, automatic contentSize adjustments, and will be blazing fast without mainThread freezes. They're also based on the MVC design pattern and will likely clarify some of the design in the code above.
The reason the UI/scrolling freezes when you load more images is likely due to reading both userDefaults and the image data itself from disk. Disk operations can be expensive, especially many at a time. If you must load the metadata and image files this way, consider doing this processing on a background thread via GCD's dispatch_async.
The reason the second set of images is not appearing is likely due to image frame or scrollView contentSize miscalculation. Consider debugging by adding a series of colored UIViews to the scrollView instead of UIImageViews, and consider hard coding the contentSize.height to something much larger than you need. Also, have you NSLogged the image frames and contentSize to make sure they match up?
Edit:
Here's a link to a quick sample project using a UICollectionView and a background thread for reading UIImage data from disk (which isn't really necessary anymore due to using UICollectionView):
https://github.com/alfiehanssen/SOImageGrid
Let me know if you have questions, hopefully I'm not totally off the mark in terms of your goals.

Answer 3

I used a UICollectionView as suggested in the first two answers and added CHTCollectionViewWaterfallLayout to it to allow the image spacing i wanted
My Code:
#pragma mark - Collection View
#pragma mark - Display Collection
-(void)displayCollection {
UIColor *myColor = [UIColor colorWithRed:(245.0 / 255.0) green:(245.0 / 255.0) blue:(245.0 / 255.0) alpha: 1];
CGRect screenBound = [[UIScreen mainScreen] bounds];
CGSize screenSize = screenBound.size;
CGFloat screenWidth = screenSize.width;
CGFloat screenHeight = screenSize.height;
self.view = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
CGRect locOfScree = CGRectMake(0, 44, screenWidth, screenHeight - 44);
CHTCollectionViewWaterfallLayout *layout = [[CHTCollectionViewWaterfallLayout alloc] init];
layout.sectionInset = UIEdgeInsetsMake(2, 2, 2, 2);
layout.headerHeight = 0;
layout.footerHeight = 0;
layout.minimumColumnSpacing = 2;
layout.minimumInteritemSpacing = 2;
//UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc] init];
imageDisplayer = [[UICollectionView alloc] initWithFrame:locOfScree collectionViewLayout:layout];
imageDisplayer.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[imageDisplayer setDataSource:self];
[imageDisplayer setDelegate:self];
UINib *nib = [UINib nibWithNibName:#"CollectionViewCell" bundle:nil];
[imageDisplayer registerNib:nib forCellWithReuseIdentifier:CellIdentifier];
[imageDisplayer setBackgroundColor:myColor];
[self.view insertSubview:imageDisplayer belowSubview:navBar];
//[self.view addSubview:imageDisplayer];
imageDisplayer = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
imageDisplayer.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
imageDisplayer.dataSource = self;
imageDisplayer.delegate = self;
imageDisplayer.backgroundColor = [UIColor whiteColor];
[imageDisplayer registerClass:[CHTCollectionViewWaterfallCell class]
forCellWithReuseIdentifier:CellIdentifier];
}
#pragma mark - Setup
- (void)setupCollectionView
{
UINib *nib = [UINib nibWithNibName:#"CollectionViewCell" bundle:nil];
[self.collectionView registerNib:nib forCellWithReuseIdentifier:CellIdentifier];
}
#pragma mark - UICollectionView Datasource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
//return [self.imageURLStrings count];
return [titles count];
//return 2;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
/*
CollectionViewCell *cell = (CollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];
*/
CHTCollectionViewWaterfallCell *cell =
(CHTCollectionViewWaterfallCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier
forIndexPath:indexPath];
NSString *title = [titles objectAtIndex:indexPath.row];
cell.backgroundColor = [UIColor whiteColor];
NSString *imageUrl = [thumbMediaUrl objectForKey:title];
NSURL *thumbUrl = [NSURL URLWithString:imageUrl];
UIImageView *imageView = [[UIImageView alloc] init];
NSData *imageData = [NSData dataWithContentsOfURL:thumbUrl];
imageView.image = [UIImage imageWithData:imageData];
cell.backgroundView = imageView;
cell.layer.shouldRasterize = YES;
cell.layer.rasterizationScale = [UIScreen mainScreen].scale;
return cell;
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
CGRect screenBound = [[UIScreen mainScreen] bounds];
CGSize screenSize = screenBound.size;
CGFloat screenWidth = screenSize.width;
NSString *title = [titles objectAtIndex:indexPath.row];
float width = [[thumbWidth objectForKey:title] floatValue];
float height = [[thumbHeight objectForKey:title] floatValue];
float imageWidth = (screenWidth / 2) - 3;
float scale = imageWidth / width;
float imageHeight = height * scale;
CGSize imageSize = CGSizeMake(imageWidth, imageHeight);
return imageSize;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
return 2.0;
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 2.0;
}
// Layout: Set Edges
- (UIEdgeInsets)collectionView:
(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
// return UIEdgeInsetsMake(0,8,0,8); // top, left, bottom, right
return UIEdgeInsetsMake(0,0,0,0); // top, left, bottom, right
}
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
NSArray* attributesToReturn = [self layoutAttributesForElementsInRect:rect];
for (UICollectionViewLayoutAttributes* attributes in attributesToReturn)
{
if (nil == attributes.representedElementKind)
{
NSIndexPath* indexPath = attributes.indexPath;
attributes.frame = [self layoutAttributesForItemAtIndexPath:indexPath].frame;
}
}
return attributesToReturn;
}
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes* currentItemAttributes = [self layoutAttributesForItemAtIndexPath:indexPath];
if (indexPath.item < numColumns){
CGRect f = currentItemAttributes.frame;
f.origin.y = 0;
currentItemAttributes.frame = f;
return currentItemAttributes;
}
NSIndexPath* ipPrev = [NSIndexPath indexPathForItem:indexPath.item-numColumns inSection:indexPath.section];
CGRect fPrev = [self layoutAttributesForItemAtIndexPath:ipPrev].frame;
CGFloat YPointNew = fPrev.origin.y + fPrev.size.height + 10;
CGRect f = currentItemAttributes.frame;
f.origin.y = YPointNew;
currentItemAttributes.frame = f;
return currentItemAttributes;
}