UITableView - Can I Span Multiple Rows or use a Nested UITableView?

I'm basically trying to achieve the following scrollable layout and am looking for some suggestions as to the best way to achieve it...

Potential solutions might be...

Nesting UITableViews

I have considered having all of the 'A' componenets part of a single row in a parent UITableView with rows A1, A2 & A3 in a child UITableView but I'm not sure if this is p开发者_如何学Cossible?

Spanning Rows

I am also unsure if its possible to have a single UITableView but have areas within span multiple rows (like you can do in a HTML table for example). Then area A, B, C etc can just be views that span their respective rows.

Any suggestions appreciated.

This is totally doable, but I would strongly suggest not nesting UITableViews or UIScrollViews, this could lead to some pretty major performance issues when scrolling (UITableViews are not automatically reused) and will certainly be a messy, possibly buggy solution.

The best way to go with this is to create Custom UITableViewCells that draw themselves based on the data they are given. They can then draw out to look like the cells you described above, giving the appearance of multiple cells, although each section is in fact a single cell.

By setting cell selection style to NONE and listening for touch events on the cell, you can even make the seperate "subcells" selectable.

This is some pretty complicated drawing, so I'd recomend looking at how others do it. http://blog.atebits.com/2008/12/fast-scrolling-in-tweetie-with-uitableview/ http://cocoawithlove.com/2010/12/uitableview-construction-drawing-and.html/

This is how I handle it: https://github.com/andrewzimmer906/XCell

Thanks for all the replies, I've up-voted them because they were helpful however I haven't accepted them as the answer since I actually implemented a completely different solution to those suggested using a combination of a UIScrollView underneath a UITableView as below. Note there's no nesting or spanning going on.

The UITableView's delegate is set to be the UIViewController. The UIScrollView's delegate is NOT set.

When the user scrolls the UITableView its scrollViewDidScroll method is fired and I am able to scroll the UIScrollView the same amount manually in code as follows...

- (void)scrollViewDidScroll:(UIScrollView *)tableView
{
    [self.scrollView setContentOffset:tableView.contentOffset animated:YES];
}

I have to be a bit clever to calculate (in code) when the page loads the position of the elements in A, B, C etc and the exact height of the scroll view so it matches the UITableView.

Since I am using a standard UITableView for A1, A2, B2, C3 etc I am able to easily control the action when the user selects a row and still get the standard UITableView highlighting for free.

Drawbacks

Swiping/scrolling on the UIScrollView has no effect you have to scroll on the UITableView. I might be able to overcome this by implementing a delegate on the UIScrollView and reacting to its own scrollViewDidScroll method to scroll the UITableView but I've yet to try this and I expect they'll be problems since both methods would be firing at the same time.

Touching/tapping the UIScrollView has no effect. This is fine for my needs however if I wanted to perform some action I could use a UITapGestureRecognizer which I've done before. E.g.

UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGestureCaptured:)];
[self.scrollView addGestureRecognizer:tapRecognizer];

- (void)tapGestureCaptured:(UITapGestureRecognizer *)touch
{    
   CGPoint touchPoint=[touch locationInView:scrollView]; 
   // Perform action here. 
}

Hopefully this helps someone. Thanks again.

The GUI above can definitely be achieved but practically i have never seen that in any application. Anyways you can try following if you aren't done yet.

1. best option would be to load one table initially with data A,B,C,D. and then when user selects any of the row say A for example then reload the table and put A in section header and A1 A2 etc. in data. You have to write lot of code to handle status of table in this case but it will look good.

2. You can customize UITableViewCell and arrange UIView inside it to achieve your pattern. All you have to know is how what would be the resulting height of ROW. It can be set in delegate method heightForRowAtIndexPath.

3. If you want spanned rows(rows with A1,B1 etc.)to scroll that you can achieve it by arranging Tables inside scroll view OR Scrollview inside scroll view.