开发者

Eternal scrolling UITableView

I'm trying to create a UITableView with dates, shouldn't be very exciting, I know. It starts around the current date, but the user should be able to scroll down (the future) and up (the past) as far as he/sh开发者_JAVA百科e wants. This results in a potentially infinite number of rows. So what's the way to go about creating this?

Returning NSIntegerMax as the number of rows already crashes the app, but even if it wouldn't, that still doesn't account for being able to scroll up. I could start half way of course, but eventually there's a maximum.

Any ideas how to do or fake this? Can I update/reload the table somehow without the user noticing, so I never run into a border?

SOLUTION:

I went with @ender's suggestion and made a table with a fixed amount of cells. But instead of reloading it when the user scrolls to near the edges of the fixed cells, I went with reloading the table when the scrolling grinds to a halt. To accomodate with a user scrolling great distances without stopping, I just increased the row count to 1000, putting the ROW_CENTER constant to 500. This is the method that takes care of updating the rows.

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    NSArray *visible = [self.tableView indexPathsForVisibleRows];
    NSIndexPath *upper = [visible objectAtIndex:0];
    NSIndexPath *lower = [visible lastObject];

    // adjust the table to compensate for the up- or downward scrolling
    NSInteger upperDiff = ROW_CENTER - upper.row;
    NSInteger lowerDiff = lower.row - ROW_CENTER;

    // the greater difference marks the direction we need to compensate
    NSInteger magnitude = (lowerDiff > upperDiff) ? lowerDiff : -upperDiff;

    self.offset += magnitude;
    CGFloat height = [self tableView:self.tableView heightForRowAtIndexPath:lower];
    CGPoint current = self.tableView.contentOffset;
    current.y -= magnitude * height;
    [self.tableView setContentOffset:current animated:NO];

    NSIndexPath *selection = [self.tableView indexPathForSelectedRow];
    [self.tableView reloadData];
    if (selection)
    {
        // reselect a prior selected cell after the reload.
        selection = [NSIndexPath indexPathForRow:selection.row - magnitude inSection:selection.section];
        [self.tableView selectRowAtIndexPath:selection animated:NO scrollPosition:UITableViewScrollPositionNone];
    }
}

The magic breaks when a user scrolls to the edge of the table without stopping, but with the table view bounces property disabled, this merely feels like a minor glitch, yet totally acceptable. As always, thanks StackOverflow!


You should establish a fixed number of cells and adjust your datasource when the user scrolls near the end of the tableview. For example, you have an array with 51 dates (today, 25 future and 25 past). When the app tries to render a cell near one of the borders, reconfigure your array and call reloadData


You might also have a look at the "Advanced Scroll View Techniques" talk of the WWDC 2011. They showed how you would create a UIScrollView which scrolls indefinitely. It starts at about 5 mins. in.


Two thoughts:

  1. Do you really need a UITableView? You could use a UIScrollView, three screens high. If end of scrolling is reached, layout your content and adjust scrolling position. This gives the illusion of infinite scrolling. Creating some date labels and arranging them in layoutSubviews: should not be too much of an effort.

  2. If you really want to stick to UITableView you could think about having two UITableViews. If scrolling in your first one reaches a critical point, spin off a thread and populate the second one. Then at some point, exchange the views and trigger the scrolling manually so that the user does not note the change. This is just some idea from the top of my head. I have not implemented something like this yet, but I implemented the infinite UIScrollView.


I answered this question in another post: https://stackoverflow.com/a/15305937/2030823

Include:

https://github.com/samvermette/SVPullToRefresh

SVPullToRefresh handles the logic when UITableView reaches the bottom. A spinner is shown automatically and a callback block is fired. You add in your business logic to the callback block.

#import "UIScrollView+SVInfiniteScrolling.h"

// ...

[tableView addInfiniteScrollingWithActionHandler:^{
    // append data to data source, insert new cells at the end of table view
    // call [tableView.infiniteScrollingView stopAnimating] when done
}];


This question has already been asked: implementing a cyclic UITableView I'm copying that answer here to make it easier because the asker hasn't ticked my answer.

UITableView is same as UIScrollView in scrollViewDidScroll method.

So, its easy to emulate infinite scrolling.

  1. double the array so that head and tail are joined together to emulate circular table

  2. use my following code to make user switch between 1st part of doubled table and 2nd part of doubled table when they tend to reach the start or the end of the table.

:

/* To emulate infinite scrolling...

The table data was doubled to join the head and tail: (suppose table had 1,2,3,4)
1 2 3 4|1 2 3 4 (actual data doubled)
---------------
1 2 3 4 5 6 7 8 (visualizing joined table in eight parts)

When the user scrolls backwards to 1/8th of the joined table, user is actually at the 1/4th of actual data, so we scroll instantly (we take user) to the 5/8th of the joined table where the cells are exactly the same.

Similarly, when user scrolls to 6/8th of the table, we will scroll back to 2/8th where the cells are same. (I'm using 6/8th when 7/8th sound more logical because 6/8th is good for small tables.)

In simple words, when user reaches 1/4th of the first half of table, we scroll to 1/4th of the second half, when he reaches 2/4th of the second half of table, we scroll to the 2/4 of first half. This is done simply by subtracting OR adding half the length of the new/joined table.

 Written and posted by Anup Kattel. Feel free to use this code. Please keep these comments if you don't mind.
*/


-(void)scrollViewDidScroll:(UIScrollView *)scrollView_ 
{  

    CGFloat currentOffsetX = scrollView_.contentOffset.x;
    CGFloat currentOffSetY = scrollView_.contentOffset.y;
    CGFloat contentHeight = scrollView_.contentSize.height;

    if (currentOffSetY < (contentHeight / 8.0)) {
    scrollView_.contentOffset = CGPointMake(currentOffsetX,(currentOffSetY + (contentHeight/2)));
    }
   if (currentOffSetY > ((contentHeight * 6)/ 8.0)) {
       scrollView_.contentOffset = CGPointMake(currentOffsetX,(currentOffSetY - (contentHeight/2)));
    }

}

P.S. - I've used this code on one of my apps called NT Time Table (Lite). If you want the preview, you can check out the app: https://itunes.apple.com/au/app/nt-time-table-lite/id528213278?mt=8

If your table can sometimes be too short, at the beginning of the above method you can add a if logic to exit when data count is say for example less than 9.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜