Adding a dynamic-height UITableView into a scrolling view?

Hello all – I'm getting into iPhone development and have hit my first confusing UI point. Here's the situation:

My app is tab-based, and the view that I'm confused about has a static fe开发者_JAVA技巧atured content image at the top, then a dynamic list below into which X headlines are loaded. My goal is to have the height of the headline table grow as elements are added to it, and then to have the whole view scroll (both featured image on top and headline list below). So, I guess my question comes in two parts:

1) First, how do you set up a dynamic-height table view that will grow as cells are added to it. So far I've only been able to have my tables handle their own scrolling.

2) Then, what is the root NIB view that the featured image and the table should live in to enabled scrolling? I've dropped oversized content into a UIScrollView now, although did seem to have any success with having it automatically scroll.

Thanks in advance for any help on this subject!

To the first:

As i understand your situation: You want to add a image to the top of the UITableView and the image should scroll with the UITableView, shouldn't?

The UITabeView has a property called tableHeaderView. It's just a view, so you can set a UIImageView to it.

(I have no xCode at the current time, you need to edit the code)

UIImage *image = [UIImage imageNamed:@"myCoolPic.png"];

UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

imageView.frame =CGRectMake(0,0,width,height); 

tableView.tableHeaderView = imageView;

[imageView release];

What you're asking is probably doable with Interface Builder (or not, I don't know) but I know the code way to do it.

To change the height of the table all you do is set the frame of the UITableView object. The default height of a UITableViewCell is 44 I believe, so set it to multiples of that depending on how many cells you have. Of course your cells can be any height so you will need to keep track of what you report in heightForRowAtIndexPath and set the table frame accordingly.

UITableView will certainly live in a UIScrollView and both components can scroll. The table view needs to become a subview of the scroll view, so does the image. Then you will scroll the table if you drag on it directly or scroll the scroll view if you drag the image or the scroll view.

For the first question, I'm a little confused by the way you ask it: "how do you set up a dynamic-height table view that will grow as cells are added to it." Table views have a function that it calls before the table is fully loaded with data called "numberOfRowsInSection." So the number of cells is based on that function, and should you update the variable used to determine the return value of that function (usually [myArray count]) it should automatically find the right size for the whole table.

However, variable height cells are something that I found kinda tricky and I've solved it using the following:

There are some UIKit NSString additions that you might find useful.

http://developer.apple.com/iphone/library/documentation/uikit/reference/NSString_UIKit_Additions/Reference/Reference.html

Particularly the sizeWithFont: functions.

Table views also have a 'heightForRowAtIndexPath:' function that is called 'numberOfRowsInSection' amount of times. Each call determines the height of the cell at the indexpath.

So, for example: (assuming myArray is an array of NSStrings)

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return [[myArray objectAtIndex:indexPath.row] sizeWithFont:myFont];}

This will return a height based off of your actual data, piece by piece. There are other functions to specify how the text wraps and truncates, etc. as well.

It doesn't feel like a great solution because you end up fetching your data twice, once to determine the height, and then again when you configure the cell in 'cellForRowAtIndexPath:' However, it does work!

I've learned a lot in the past few weeks and have gone through a few iterations of addressing this problem. My first solution was to manually measure the table height, then set the table rect to display at that height, and finally to set the scrollView's content rect to encompass the the table and top feature. What that solution did basically work, I started encountering some display issues when branching out into new views with different toolbar configurations. It seemed that my manual frame size was interfering with iPhone's native content scaling.

So, I scrapped the manual sizing and went to just making that top feature block be a custom table cell that displayed within its own section at the top of the table. I made a hard logic definition that section 0 only had one table cell, and that cell was my custom layout that I linked in through Interface Builder. I was then able to get rid of ALL my messy custom scaling logic, and the whole system is cleaner, smoother, and works reliably.