TiledScrollView doesn't display some tiles when scrolled to that area - ios

Question

I'm having some problems in my usage of the TiledScrollView from Apple (3_Tiling/​Classes/​TiledScrollView.m) where sometimes the tiles don't show as I scroll and other times they do show. To clarify, the problem I'm seeing is analogous to having a tableview list of 100 rows and only 10 rows are being displayed at a time. As you scroll through the list, sometimes one or more rows are blank and stay blank because once they're displayed on the screen there is no reloading to make sure the content is there. However once these blank rows go off screen and say you scroll back to them, they show up with the content.
It seems to be completely random with no discernible patterns to it's behaviour. I know the delegate method ((UIView *)tiledScrollView:(TiledScrollView *)tiledScrollView tileForRow:(int)row column:(int)column resolution:(int)resolution) is executing thru NSLog's.
My Question is:
1. Have you encountered this phenomenon and how did you solve it? or
2. My debugging skill are very rudimentary. If I wanted to isolate the problem by seeing whether the tile or subviews exists, or the imageView was not able to fetch the image or if its a rendering problem... how would I go about debugging this?
Note- the delegate method shown below is a stripped down version of the above tiledScrollView delegate method where I removed the row and resolution portions of the code since there is no need for it if I'm just scrolling horizontally.
- (UIView *)tiledScrollView:(HorizontalTiledScrollView *)tiledScrollView column:(int)column {
NSLog(#"+++ %s +++", __PRETTY_FUNCTION__);
// re-use a tile rather than creating a new one, if possible
UIView *tile = [tiledScrollView dequeueReusableTile];
if (!tile) {
// the scroll view will handle setting the tile's frame, so we don't have to worry about it
if (tiledScrollView == self.timeHour) {
tile = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, TIMEHOUR_COLUMN_WIDTH, TIMEHOUR_COLUMN_HEIGHT)] autorelease];
} else if (tiledScrollView == self.timeMinute) {
tile = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, TIMEMINUTE_COLUMN_WIDTH, TIMEMINUTE_COLUMN_HEIGHT)] autorelease];
}
// Some of the tiles won't be completely filled, because they're on the right or bottom edge.
// By default, the image would be stretched to fill the frame of the image view, but we don't
// want this. Setting the content mode to "top left" ensures that the images around the edge are
// positioned properly in their tiles.
[tile setContentMode:UIViewContentModeTopLeft];
}
for(UIView *subview in [tile subviews]) {
if (subview.tag != 3) {
[subview removeFromSuperview]; //remove all previous subviews in tile except tile annotation if present
}
}
UIImageView *imgView = [[UIImageView alloc] init];
UILabel *digitLabel;
// Add blank UIImageView as filler or UIImageView with PNG or UILabel if no PNG sized correctly and offsetted from tile's origin as subviews in the tile
if (tiledScrollView == self.timeHour) {
if (column < 1) {
imgView.frame = CGRectZero;
[tile addSubview:imgView];
[tile bringSubviewToFront:imgView];
} else {
int digitH = ((column - 1) % 12 + 1);
imgView.frame = CGRectMake(9, 0, 17, 21);
[imgView setContentMode:UIViewContentModeScaleToFill];
if ((imgView.image = [UIImage imageNamed:[NSString stringWithFormat:#"TimeHour_%02d.png", digitH]])) {
[tile addSubview:imgView];
[tile bringSubviewToFront:imgView];
} else {
// NSLog(#"No TimeHour_%02d.png", digitH);
digitLabel = [self makeDigitLabel:digitH frame:imgView.frame fontSize:14.0];
[tile addSubview:digitLabel];
[tile bringSubviewToFront:digitLabel];
}
}
} else if (tiledScrollView == self.timeMinute) {
// if (column % 2) {
// tile.backgroundColor = [UIColor redColor];
// } else {
// tile.backgroundColor = [UIColor blueColor];
// }
if (column < 1) {
imgView.frame = CGRectZero;
[tile addSubview:imgView];
[tile bringSubviewToFront:imgView];
} else {
int digitM = ((column - 1) % 60);
imgView.frame = CGRectMake(9, 0, 16, 15);
[imgView setContentMode:UIViewContentModeScaleToFill];
if ((imgView.image = [UIImage imageNamed:[NSString stringWithFormat:#"TimeMinute_%02d.png", digitM]])) {
[tile addSubview:imgView];
[tile bringSubviewToFront:imgView];
} else {
NSLog(#"No TimeMinute_%02d.png", digitM);
digitLabel = [self makeDigitLabel:digitM frame:imgView.frame fontSize:12.0];
[tile addSubview:digitLabel];
[tile bringSubviewToFront:digitLabel];
}
}
}
}
[imgView release];
NSLog(#"Tile: %d",[tile.subviews count]);
return tile;
}
Hope it's clear.
Thanks for helping,
Hiren

Answer 1

I finally solved this!
The issue wasn't in the code posted above. It was in the layoutSubviews method of Apple's TiledScrollView. There is a line of code that calculates the maximum column shown below (max row has a similar calculation)
int lastNeededCol = MIN(maxCol, floorf(CGRectGetMaxX(visibleBounds) / scaledTileWidth));
In my case, this formula calculates one extra column than is needed and this column tile ends up sitting off screen. This is fine when you're not scrolling around and setting animated to NO. But when you do scroll around and/or set animated to YES in scrollview setContentOffset method call, you will sometimes end up with a missing tile because of the delay due to animation or if you scrolled really slowly. The animation or moving really slowly causes the scrollview to detect there is a movement and thus calls the layoutSubviews method where a line of code checks to see which tiles are visible and drops non-visible tiles. Now if you did this just right, then the extra tile created earlier gets dropped because its still off-screen and is never created again until the tile has moved far enough off-screen triggering a reload of that tile.
The fix I did was to change the above line to:
int lastNeededCol = MIN(maxCol, floorf((CGRectGetMaxX(visibleBounds)-0.1) / scaledTileWidth));
This new formula calculates the right number of columns of tiles needed to be displayed on screen thereby eliminating the whole thing of dropping extra tiles sitting off-screen.
I create an example code on github that helps demonstrates this.
https://github.com/hmistry/TiledScrollViewDebug