iPad: table view with multiple flowing columns possible?

Question

I've searched for this online and haven't found anything. On the iPad, is it possible, rather than flowing off the screen, items 'flow' to a new column on the right, and so on?

Don't want:

--------------  top of screen
01
02
03
04
05
-------------- bottom of screen
06
07
08
09    <-- these items are "scrolled" off the screen
10
11
12
13

Want:

--------------  top of screen
01 |06 |11
02 |07 |12
03 |08 |13     --> Columns grow to the right
04 |09 |
05 |10 |
-------------- bottom of screen

This is the kind of UI design that Apple would love to reject. Tread lightly. — Shaggy Frog, Dec 10 '10 at 08:25

score 2 · Answer 1 · answered Dec 10 '10 at 01:07

2

You'll have to write your own custom class to do this. The whole point of a table view is to keep the list in a single vertical column. This is why the split view works so well on the iPad; you can show two levels of a data hierarchy at once.

answered Dec 10 '10 at 01:07

Shaggy Frog

27,575
16
91
128

score 2 · Accepted Answer · edited May 23 '17 at 11:44

Thought experiment: Use three tableviews, but use the same datasource/delegate. Wire it up so whenever one view scrolls (i.e. through –scrollViewDidScroll:), you also manually scroll the other views with -setContentOffset to the appropriate position. You should beware of possible circular calls though. I can't guarantee this will work, but this is as close as you can get that I can think of.

You may also want to add extra rows above and below for particular views if you want the leftmost view to be able to scroll to the bottom, or the rightmost view to scroll to the top.

Edit: For the most part, it's as basic as it seems. I just tried it out and wasn't too bad. There are some little quirks you will have to take care of though, including the circular calls, and the deceleration of scrollviews.

For the circular calls I mentioned earlier, I managed my way around it by using the following code:

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
    tableView1.delegate = nil;
    tableView2.delegate = nil;
    tableView3.delegate = nil;
    scrollView.delegate = self;
}

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    tableView1.delegate = self;
    tableView2.delegate = self;
    tableView3.delegate = self;
}

As for deceleration afterwards, it's not so much that the other views won't decelerate alongside them, but the views act a little wonky if you do touches on one of the other ones while they're decelerating. I didn't try it in this case to see if it'll work 100% for this, but you should try to code from here to stop the deceleration dead in its tracks when you start dragging it again.

This was the sort of solution I was thinking of, except do it dynamically. That is, once a particular table holds the maximum number of items that can fit without having to scroll, create a new one just the the right of the last one and start filling it. — Curtis Shipley, Dec 10 '10 at 07:32

iPad: table view with multiple flowing columns possible?

2 Answers2