UICollectionViewCell scrambled position when re-entering screen? - ios

I have a UICollectionView which should show thumbnails of photos received from a server, much like the Photo app in iOS.
When the cells disappear from the view and then re-appear, their positions are reversed up until the point the finger releases the screen.
As soon as the finger releases the screen, the cells get properly re-positioned as well.
I can't figure out why iOS does this.
In the following GIF you'll see the cells, and a label inside indicating their index in their section.
As you can see, the index changes as I explained above.
Why is this happening?
Btw ignore the sixth image, I was just drinking soup.
EDIT: I noticed a pattern when the line of cells re-enter the screen.
This pattern is not visible in the image above, so I'll just have to explain it in text.
Ok, so at start as you can see the index of the images are increasing, from 0 to 4, right?
As I hold the finger down and scroll the line of cells in and out of view
the cell indexes change to 3, 1, 4, 2, 0.
followed by the second re-entering which changes their
indexes to 2, 1, 0, 4, 3.
On the third re-entering they change to 4, 1, 3, 0, 2.
And finally on the fourth re-entering they change back
to original indexes 0,1,2,3,4.
This happens as long as I scroll the first line of cells in and out of view.
This is super-weird and makes no sense at all to me.
EDIT 2:
Ok, so it seems that the re-ordering of the cells to their correct index occurs only when the their images are changed/re-applied.
I added a variable which indicates if they've already been cached which I call bool TNCached, and upon cellForItemAtIndexPath I call a method from within the cell which is called requestTN, which in turn downloads the thumbnail of that specific cell from the server.
When the app fully receives the thumbnail, it sets the variable TNCached to TRUE, so next time the cell re-enters the view it won't re-download the thumbnail, thus not updating the cell, which causes the weird re-ordering of the cells indexes to persist even after I release my finger from the screen.
Edit 3:
Yaaay fixed it!
Turns out that the re-use of my UICollectionView cells is the "problem".
Not really a problem, but whenever a cell is reused, the UICollectionView reuses random cells of any given cell of the ones that disappeared when scrolled outside the screen.
So my question now is if the efficiency of my re-use of cells is maybe not that efficient?

What's happening is that your cells are being re-used,
which means that any of the cells that have disappeared from the screen can be used again, in any order.
What you need to do at cellForItemAtIndexPath is to setup your cell again.
By "setup" I mean to take the information from the data-source and apply it to your cell again.
So if cell 0 re-appears at NSIndexPath section 0 and item 4, then you simply go to your datasource and read the data that should be presented at NSIndexPath section 0 and item 4.

Related

The Amount of times a tableviewcell has been viewed and run a function based on it

I want to fetch the amount of times a cell in a tableview has been viewed when it is completely in the view. That should only happen when it is completely in the view, minor parts of top and bottom cells shouldn't count.
And after a certain amount of time(~3 sec) has passed, it should trigger a function of print "hello".
I tried creating a timer and scheduling it in willDisplay method and invalidating it in didEndDisplayingCell method. It somehow takes into consideration the cells which are not fully in the view.
Also tried tableView.visibleCells and iterating cells in tableView.indexPathsForVisibleRows but nothing helped.
Any Help on this would be much appreciated.
Cheers!
While you want to keep track of how long a cell is displaying for (and the number of times it's been displayed), you don't actually want to keep these numbers in your custom (subclassed) UITableViewCell, because these cells get recycled and reused very quickly as they are scrolled on and offscreen.
Whatever your datasource object is, you should add a property (or two) to it to keep track of when the object is displayed in a cell (i.e. a "var displayCount : Int" property?), and you can start a Timer (or NSTimer) to count X seconds before displaying your "Hello" message.
You can detect whether a cell is fully visible via the methods found in the answers to this related question, which is when you can start up your Timer.
To detect when the cell is scrolled offscreen (so you can increment the display count and/or cancel the timer), use the delegate method didEndDisplayingCell.

iOS infinite scroll items disapearing (sometimes)

This is a very rare occurring bug from hell,
I have an infinite scroll controller that displays products, 2 in each row. Rarely, something affects the controller and causes items to vanish, when I tap the empty area where the item should be, it works as expected and directs the user to the item details controller. When I back out back to the list, sometimes the cell shows its content, and others get hidden.
Sometimes it just a couple of items missing, sometimes there are so many missing items that makes the list appear empty, like only 1 or 2 cells are visible per screen height.
An even stranger situation is, when I scroll really fast to the end and stretch the screen really fast out of the visible area, and there are no more items to load, the visible items can jump from left to right.
Please see these two videos.
https://www.dropbox.com/s/jibflcouz1ena8n/missingProductImages.mov?dl=0
https://www.dropbox.com/s/uz13fzorypnp38t/again.mov?dl=0
I could send code but I didn't want to clutter this place with full length code, let me know if you want to see a specific section of the code please. Maybe someone could have an idea of what might be going on by looking at the vids.
What's probably going on here is a state problem with your collection view cells. The code assigning model values to the cell's views would be of use here. But absent any actual information, the first thing to review would be the cell's prepareForReuse implementation:
Does it call super?
Does it clear out all current values?
Does it cancel any pending asynchronous operations?
Are fetches and cancellations correctly matched?
Next, check if there's any essential configuration in the cell's init/initWithCoder methods -- those are only called on first creation, not on reuse.
Those are the normal pitfalls of UICollectionView cell handling. If they don't suggest the problem, please post the cell code.
It looks like your cells are not being reused correctly.
Can you check that you have set the same reuseIdentifier for your cell in Interface Builder that you are assigning in your code?
Update: Attached image to show where to set the identifier in the storyboard/xib
Update: added layout solution
Another problem could be due to the layout bounds of your collectionViewCell. When you load your cells they bounds are not calculated until they have been added to your collectionView and rendered. This can cause the elements in your cell to layout with the wrong values. This happens commonly with async image frameworks as they cache a resized version of the image for performance. When you cell loads, the cached image is loaded at the wrong the wrong size.
Add the following code to your collectionViewCell:
- (void)setBounds:(CGRect)bounds {
[super setBounds:bounds];
self.contentView.frame = bounds;
[self setHighlighted:NO];
}

deleteRowsAtIndexPaths resets custom cells

I'm relatively new to Swift and iOS and I have one issue - I have a custom SwipeCell class that extends UITableViewCell. It's a cell that can be swiped left and right, and has buttons on each side. For some reason if I made the buttons out of the frame of the cell when user swipes the cell they would appear but could not call an action, so my solution was to make cell wider than it is (so buttons can fit in it). Because it was done this way my cell has to have an offset by default for the total width of the buttons of the left (let's say 100), so it's position is X:-100.
And that's fine, and everything works fines with the cells, however there is one huge issue - if I call the deletion of any cell from the tableView like this
tableView.deleteRowsAtIndexPaths([tableView.indexPathForCell(activeCell)!], withRowAnimation: .None)
tableView then deletes the cell, and all of the other cells that are currently visible (doesn't happen with cells above or below the screen bounds) get moved to X:0 instead of staying at X:-100, so I assume that deleteRowsAtIndexPaths calls some function that resets the visible cells positions to 0,0. I'm currently setting swipe cells positions with layoutSubviews() since the number of buttons is dynamic and couldn't be determined upfront, but layoutSubviews is not the function where the bug happens.
So to sum up question - what function does deleteRowsAtIndexPaths call after deleting a cell that resets/redraws the visible cells?
deleteRowsAtIndexPaths deletes a row(s) from the tableView. This is handled internally by iOS. From Apple documentation:
Deletes the rows specified by an array of index paths, with an option
to animate the deletion.
Another interesting thing to note here is that this method does not modify your model (object that holds data used by your table view cells to render on themselves). You have to do that yourself. The cells are deleted, but if you call reloadData without deleting the row from your Model, cell will reappear.
Expect that cells get deleted and created all the time. Cells are very, very temporary objects. Write the code to create one when needed, and don't make any assumptions. Don't assume the cell is there later, don't assume it's in the same row, don't assume it displays the same data (because cells are recycled).
Since I could find out what happens inside of deleteRowAtIndexPaths, and why it changes frames of each Cell, I decided to just do my own function that deletes a row, by obtaining cells with tableView.visibleCells, and then just moving cells bellow the deleted cell up by a height of deleted cell. Thank you all for trying to help me, and especially thanks to Abhinav who told me that it was handled internally, which help me decide to write a custom code for the deletion.

adding a control to a custom cell view

I am getting really frustrated trying to solve this problem i tried implementing it in many many ways but no solution. I have a UIStepper in a custom cell and i want to change a value on the cell. Everything works fine expect when i scroll around the tableView the values from the UIStepper changes from one cell to another. Please help here are my screen shoots.
Link to tableview implementation and link to cell implementation
You are trying to store the stepper value inside each individual cell. That's not going to work because cells are reused; the cell that you now see in row 2 may reappear in row 20 when the user scrolls.
That is why you must store the value for the stepper in the model (your data) on a row-by-row basis, so that you can set it freshly and correctly for that row every single time cellForRowAtIndexPath: is called.
This, in turn, means that as the user steps the stepper, its valueChanged is going to need to talk to the table view data source so that the model can be updated ("the stepper value for row 5 has just been changed to 3") and maintained in the model.

Graphical glitches when adding cells and scrolling with UITableView

I am using a UITableView to display the results of a series of calculations. When the user hits 'calculate', I add the latest result to the screen. When I add a new cell, the UITableViewCell object is added to an array (which is indexed by tableView:cellForRowAtIndexPath:), and then I use the following code to add this new row to what is displayed on the screen:
[thisView beginUpdates];
[thisView insertRowsAtIndexPaths:[NSArray arrayWithObject:newIndexPath] withRowAnimation: UITableViewRowAnimationFade];
[thisView endUpdates];
This results in the new cell being displayed. However, I then want to immediately scroll the screen down so that the new cell is the lowermost cell on-screen. I use the following code:
[thisView scrollToRowAtIndexPath:newIndexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];
This almost works great. However, the first time a cell is added and scrolled to, it appears onscreen only briefly before vanishing. The view scrolls down to the correct place, but the cell is not there. Scrolling the view by hand until this invisible new cell's position is offscreen, then back again, causes the cell to appear - after which it behaves normally. This only happens the first time a cell is added; subsequent cells don't have this problem. It also happens regardless of the combination of scrollToRowAtIndexPath and insertRowsAtIndexPath animation settings.
EDIT:
I've now started inserting cells at the second-to-last position of the table, rather than the end, and the problem still occurs - when first inserted, a cell is 'invisible' until it goes offscreen and comes back on again. What could be causing this, and how can I force the cell to be drawn as soon as it is added to the table?
You're having problems because your updating the table without updating the data model backing it. Tables don't actually know how many rows they have nor what cells to display. They depend on the datasource and the delegate to tell them these things. Your design expects the table itself to track them.
insertRowsAtIndexPaths: is intended to be used for moving existing rows around a table, not for adding entirely new logical rows. When you insert an entirely new cell, the tableview looses track of how many rows it actually has.
Before you display a new row, the first thing you should do is update the values returned by:
– numberOfSectionsInTableView:
– tableView:numberOfRowsInSection:
... to reflect the addition of the new rows. This will allow the table to understand how big it is.
Then you need to update cellForRowAtIndexPath: to return the correct cell for the added row. Then you need to reload the table.
After you've done that, you should be able to scroll the tableview to the end and have the cell display properly.
The important thing to remember about tables is that they are dumb. The table itself holds no data, doesn't know how many sections and rows it has or what order the rows and sections come in. All the logic about data, sections, rows, cells and cell contents comes from the datasource and/or the delegate. When you want to change a table, you actually change the datasource and/or the delegate and then the table will reflect those changes automatically.
Edit:
Upon rereading the parent, I see that your putting the actual UITableViewCell objects in your data array and that you have one cell for each row.
This is not how tableviews are supposed to work and this will not scale beyond a few dozen rows at most.
Tableviews are intended to be an illusion that allows you display a lOGICAL table which has an arbitrary high number or rows. To that end, it only keeps enough UITableViewCell objects alive to cover the visually displayed area in the UI. With a default cell height of 44 pixels this means a tableview will never have more than 9 cell objects at a time.
Instead of eating memory holding cells that are not displayed, the tableview lets the delegate dequeue a cell that has scrolled off screen, repopulate it with the data of another LOGICAL row and then display it in a new position. This is done in cellForRowAtIndexPath:
You really need to start over here with your design. Your data needs to be kept separate from the user interface objects. You don't want to have more cells alive at anyone time than absolutely necessary because your memory use will balloon and your response time will degrade. Your current problem is the result of this unusual design.
When you've done that, you can add the result row as outlined above.
Try to scroll with some time shift after cell update via NSTimer or performSelector:withDelay:. It can help but to fix all problems I think there need to do more work.
The glitches may be caused because a UITableView considers itself the owner of any UITableViewCell instances it is displaying, and reuses them as needed. Part of that process is calling prepareForReuse on the cell. Since you are keeping the cells in an array, you do not want them reused. Try implementing an empty prepareForReuse in your UITableViewCell class. Or just create cells dynamically in tableView:cellForRowAtIndexPath: as apple recommends.
I used what Skie suggested to avoid the problem in the following way:
Immediately after adding the row:
[self performSelector:#selector(scrollToDesiredArea:) withObject:newIndexPath afterDelay:0.4f];
This called the following:
-(void)scrollToDesiredArea:(NSIndexPath *)indexPath{
UITableView *thisView = (UITableView*)self.view;
[thisView scrollToRowAtIndexPath:indexPath atScrollPosition:UITableViewScrollPositionBottom animated:YES];
}
The delay of 0.4s seems to be sufficient to avoid the glitching; any less and it still happens. It may have to be different on varying models of iPhone hardware, though - I only tested on emulator.

Resources