CollectionView Jerks/Stutters When Scrolling - ios

I have a UICollectionView which shows a list of playlists and an image from one of the songs in the playlist.
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath; {
playlistCell* cell = [cv dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
if(!cell)
{
cell = [[playlistCell alloc] init];
}
// Configure the cell...
MPMediaItem *rowItem = [[playlists objectAtIndex:indexPath.row] representativeItem];
UIImage *cellBG = [self getAlbumArtworkWithSize:CGSizeMake(320, 320) forPlaylist:[playlists objectAtIndex:indexPath.item]];
cell.image = cellBG;
return cell;
}
However, it jerks/stutters when I scroll. It's not smooth at all and can be a pain to scroll through.
How would I make this smoother?

You can make the UI more responsive simply by loading your images in the background with GCD like this:
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath; {
playlistCell * cell = [cv dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
if(!cell)
{
cell = [[playlistCell alloc] init];
}
// Configure the cell...
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0), ^{
MPMediaItem *rowItem = [[playlists objectAtIndex:indexPath.row] representativeItem];
UIImage *cellBG = [self getAlbumArtworkWithSize:CGSizeMake(320, 320) forPlaylist:[playlists objectAtIndex:indexPath.item]];
dispatch_async(dispatch_get_main_queue(), ^{
cell.image = cellBG;
});
});
return cell;
}

Related

How to change an image within UICollectionViewCell on tap?

I am trying to change an image that is displayed inside a UICollectionViewCell on tap. Here is my code:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
UIImageView *cellImageView = (UIImageView *)[cell viewWithTag:100];
cellImageView.image = [[allActivities objectAtIndex:indexPath.row] obverseIcon];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(#"%# was selected", [[allActivities objectAtIndex:indexPath.row] name]);
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
UIImageView *cellImageView = (UIImageView *)[cell viewWithTag:100];
Activity *activity = [allActivities objectAtIndex:indexPath.row];
if (activity.isMy)
{
activity.isMy = NO;
cellImageView.image = [[allActivities objectAtIndex:indexPath.row] obverseIcon];
}
else
{
activity.isMy = YES;
cellImageView.image = [[allActivities objectAtIndex:indexPath.row] reverseIcon];
}
[allActivities replaceObjectAtIndex:indexPath.row withObject:activity];
[self.collectionView reloadData];
}
When I tap a cell, image does not change.
try this:
- (UICollectionViewCellSubclass *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCellSubclass *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
Activity *activity = allActivities[indexPath.row];
cell.imageView.image = activity.isMy ? activity.obverseIcon : activity.reverseIcon;
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
Activity *activity = allActivities[indexPath.row];
activity.isMy = !activity.isMy;
[self.collectionView reloadItemsAtIndexPaths:#[indexPath]];
}
where UICollectionViewCellSubclass is your custom class which inherit from UICollectionViewCell and implement:
#property (nonatomic, strong) UIImageView *imageView;
Create custom cell class with super class UICollectionViewCell.
Create an outlet from your cell's image to that class .h file.
In your didSelectItemAtIndexPath method replace UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:#"Cell" forIndexPath:indexPath];
with your cell's class name.
Change the image. For example cell.imageView.hidden = YES;
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
questionImageCollectionViewCell * cell=[self.questionCollectionView dequeueReusableCellWithReuseIdentifier:#"coustomCell" forIndexPath:indexPath];
cell.optionImageView.image=[UIImage imageNamed:[_optionImageArr objectAtIndex:indexPath.item]];
[cell.rightTickImg setHidden:YES];
if(self.array==nil)
{
[cell.rightTickImg setHidden:YES];
}
else
{
[cell.rightTickImg setHidden:YES];
NSDictionary *dic = self.array[indexPath.row];
NSLog(#"ouput DIC=%#",dic);
NSLog(#"objeject for key=%#",[dic objectForKey:#"option"]);
// if ([dic[#"option"] boolValue])
if([[dic objectForKey:#"option"] isEqualToString:#"1"])
{
[cell.rightTickImg setHidden:NO];
}
else
{
[cell.rightTickImg setHidden:YES];
}
}
return cell;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return
CGSizeMake(collectionView.frame.size.width/2.2,collectionView.frame.size.height/2.3);
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
[self dicData];
NSLog(#"First=%#",self.array);
[self.array removeObjectAtIndex:indexPath.row];
NSDictionary *dic = #{#"option":#"1"};
[self.array insertObject:dic atIndex:indexPath.row];
NSLog(#"Second=%#",self.array);
NSMutableArray * indexArry=[[NSMutableArray alloc]init];
for (NSInteger i=0; i< _optionImageArr.count; i++)
{
NSIndexPath * index =[NSIndexPath indexPathForRow:i inSection:0] ;
[indexArry addObject:index];
NSLog(#"%#",indexArry);
}
[collectionView reloadItemsAtIndexPaths:indexArry];
}
Heading

UICollectionViewCell background color change works in cellForItemAtIndexPath but not didSelectItemAtIndexPath

I can change my collection view cell background color in cellforitematindexpath but not in didselectitematindexpath using the code below (i only change the color in one place however). How does this happen? I know that didselectitematindexpath is being called.
- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {
CollectionViewCell *cell = [cv dequeueReusableCellWithReuseIdentifier:#"CollectionView" forIndexPath:indexPath];
cell.layer.borderWidth=1.0f;
cell.layer.borderColor=[UIColor grayColor].CGColor;
cell.label.text = #"test"
cell.contentView.backgroundColor = [UIColor redColor];
return cell;
}
-(void)collectionView:(UICollectionView *)cv didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(#"selected cell");
CollectionViewCell *cell = [self collectionView:cv cellForItemAtIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor redColor];
}
Several things wrong here.
You're using the wrong method to get the selected cell. Never call the delegate method directly, instead ask the collection view for the cell directly like this:
CollectionViewCell *cell = [cv cellForItemAtIndexPath:indexPath];
You're modifying the cell in a place where those modifications will not persist. When you scroll and that cell gets reused, the color will get wiped out. Instead you should call reloadItemsAtIndexPaths: when the cell gets selected, and have some code in collectionView:cellForRowAtIndexPath that checks the selected property of the cell and sets the color you want based on that. That way, the layout will remain consistent when you scroll and cells are reused.
use this..
self.collectionView.allowsMultipleSelection = YES;
then..
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath**
{
static NSString *identifier = #"Cell";
RecipeViewCell *cell = (RecipeViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[recipeImages[indexPath.section] objectAtIndex:indexPath.row]];
cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame-2.png"]];
cell.selectedBackgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame.png"]];
return cell;
}
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
if (shareEnabled) {
NSString *selectedRecipe = [recipeImages[indexPath.section] objectAtIndex:indexPath.row];
[selectedRecipes addObject:selectedRecipe];
}
}
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath
{
if (shareEnabled) {
NSString *deSelectedRecipe = [recipeImages[indexPath.section] objectAtIndex:indexPath.row];
[selectedRecipes removeObject:deSelectedRecipe];
}
}

Reusing cell causes unwanted behaviour when updating cell view

I want ot set a border to a selected cell, i save a cell property that represents the selected one and manipulate it:
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSArray *eyeArray = [self eyesArrayConfigure][indexPath.row];
if (indexPath.row==5) {
int r = arc4random() % 6;
eyeArray = [self eyesArrayConfigure][r];
}
[borderedCell.contentView.layer setBorderWidth:0.0f] ;
UICollectionViewCell *cell = [collectionView cellForItemAtIndexPath:indexPath];
borderedCell = cell;
[borderedCell.contentView.layer setBorderColor:self.view.tintColor.CGColor];
[borderedCell.contentView.layer setBorderWidth:3.0f];
}
and the cellForView: (Im usinng 2 types of cell identifiers because one cell contains a label - "Random cell":
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.row ==5) {
UICollectionViewCell *randomCell =[collectionView
dequeueReusableCellWithReuseIdentifier:#"randomCell"
forIndexPath:indexPath];
randomCell.backgroundColor = [UIColor purpleColor];
borderedCell = randomCell;
[borderedCell.contentView.layer setBorderColor:self.view.tintColor.CGColor];
[borderedCell.contentView.layer setBorderWidth:3.0f];
return randomCell;
}
UICollectionViewCell *myCell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cell" forIndexPath:indexPath];
NSArray *eyeArray = [self eyesArrayConfigure][indexPath.row];
myCell.backgroundView = [[UIImageView alloc] initWithImage:eyeArray[1]];
return myCell;
}
What i get is if a click one cell it will be fine till i scroll and then i get weird behaviour when couple of cells might be with the border.
Thanks for the help.
The solution is to use a view model. You are already doing this for your cells' background views. Apply the same concept for the border.
#interface MyCollectionView ()
#property (nonatomic) NSInteger selectedRow;
#end
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
//update self.selectedRow and either reload entire collection view or just the currently selected and previously selected.
self.selectedRow = indexPath.row;
[collectionView reloadData];
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *myCell = [collectionView dequeueReusableCellWithReuseIdentifier:#"cell" forIndexPath:indexPath];
CGFloat borderWidth = (indexPath.row == self.selectedRow) ? 3.0 : 0.0;
[myCell.contentView.layer setBorderWidth:borderWidth];
return myCell;
}

Create a gallery using UICollectionView iOS

I wanna create a gallery using uicollectionview above tab bar controller. the problem that i have is i’m getting a SIGABRT crash when i’m connecting uicollectionview datasource. but when i didnt connecting it, the controller view did not show any image. did somebody know what to do?
this is the code I've made :
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
NSLog(#"stiker : %d", stickers1.count);
return stickers1.count;
}
// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"Cell";
NSLog(#"indexpath row : %d", indexPath.row);
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *recipeImageView = (UIImageView *)[cell viewWithTag:100];
recipeImageView.image = [UIImage imageNamed:[stickers1 objectAtIndex:indexPath.row]];
// cell.backgroundView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"photo-frame.png"]];
return cell;
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
NSLog(#"numberOfSectionsInCollectionView coll : %d, stic : %d", collectionView.numberOfSections, stickers1Collection.numberOfSections);
return collectionView.numberOfSections;
}
I've connected the uicollectionview datasource in xib
Set number of items
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
set content
Just add UIImageView and UIlabel and set there tags in storyboard assign data in cellForItemAtIndexPath method
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"Cell";
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
UIImageView *ImageView = (UIImageView *)[cell viewWithTag:100];
ImageView.image = [UIImage imageNamed:[[arrCategoryValue objectAtIndex:indexPath.row] objectForKey:#"image"]];
UILabel *lbl = (UILabel *)[cell viewWithTag:200];
lbl.text = [[arrCategoryValue objectAtIndex:indexPath.row] objectForKey:#"name"];
cell.tag = indexPath.row;
return cell;
}
for more info you can go here

Cells are hidden using CollectionView

I have a Navigation Controller pushing to a Collection View Controller. This collectionView has an NSArray of images, and I'm sure there are some elements in the collectionView using the method visibleCells.
But when I launch it there is no displaying cells.
Here is my code :
- (void)viewDidLoad
{
[super viewDidLoad];
images = [NSArray arrayWithObjects:#"angry_birds_cake.jpg", #"creme_brelee.jpg", #"egg_benedict.jpg", #"full_breakfast.jpg", #"green_tea.jpg", #"ham_and_cheese_panini.jpg", #"ham_and_egg_sandwich.jpg", #"hamburger.jpg", #"instant_noodle_with_egg.jpg", #"japanese_noodle_with_pork.jpg", #"mushroom_risotto.jpg", #"noodle_with_bbq_pork.jpg", #"starbucks_coffee.jpg", #"thai_shrimp_cake.jpg", #"vegetable_curry.jpg", #"white_chocolate_donut.jpg", nil];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return images.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifier = #"Cell";
UICollectionViewCell *cell;
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:#"Cell"];
cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];
NSArray *tab = [collectionView visibleCells];
for (int i = 0; i < [tab count]; ++i)
{
NSLog(#"%d", i);
}
[collectionView setBackgroundColor:[UIColor blueColor]];
UIImageView *imageView = (UIImageView *)[cell viewWithTag:100];
imageView.image = [UIImage imageNamed:[images objectAtIndex:indexPath.row]];
return cell;
}
Where am I wrong ? Thanks a lot.

Resources