views:

3706

answers:

5

Hi Folks,

What is the best way to get round corners on an entire UITableView as seen in Stocks and Spotlight? The grouped style doesn't solve the problem because the round corners scroll away with the cell. I'm trying to clip the view so the corners are always round regardless of scroll position.

I saw another discussion about doing this to a UIImage that suggested masking it with another image. I'm not sure if this would work because I need taps to pass through to the table. This isn't isn't ideal for me because I want the background pattern to show through through the corners.

A: 

Have you tried the "grouped" table view style?

self.tableView.style = UITableViewStyleGrouped;

For further reference, see the Table View Programming Guide. The "About Table Views" chapter has some nice screenshots describing the different styles.

Daniel Rinser
When you scroll the table up, it will mask it with rounded corners, I think that is what he is referring to. Although this would be a good start I guess, and make the background transparent.
Garrett
Yeah, it sounds like you're on the right track with this one.
Reed Olsen
@Garrett: Oh.. Just started my stocks app and see what you mean. Really didn't notice this effect until now.. ;-) Sorry for the noise, I thought he was referring to simple grouped table views.
Daniel Rinser
I clarified the question a little bit because the corners need to stay there but thanks a ton for the quick answer.
Trev
+2  A: 

Another way would be to mask the UITableView by using Core Graphics. An example of masking a UIView can be found here: http://iphonedevelopment.blogspot.com/2008/11/creating-transparent-uiviews-rounded.html

raidfive
This helped a lot but it doesn't clip the cells when they scroll past the clipped area of the UITableView itself.
Trev
+6  A: 

It's an old question but perhaps you still want to know how to do this.

I reproduced a tableView like in Stocks/Spotlight. The trick is

view.layer.cornerRadius = 10;

For this to work you need to include the QuartzCore into the class that you call that property:

#import <QuartzCore/QuartzCore.h>

I heard that this only works since OS 3.0. But since my application is using core data it wasn't a problem because it was already for OS 3.0 and hight.

I created a custom UIView with a subview with cornerRadius 10 and with

view.backgroundColor = [UIColor clearColor];

Then you have to place an UITableView grouped style in that subview. You need to set the backgroundColor to clearColor and the separatorColor to clearColor. Then you have to position the tableview inside the rounded corner view, this is done by setting the frame size and origin. My loadView class of my custom UIView looks like this:

self.view = [[UIView alloc] init];
self.view.backgroundColor = [UIColor clearColor];

CustomUIViewClass *scherm = [[CustomUIViewClass alloc] init];

CGRect frame;
frame.origin.x = 10;
frame.origin.y = 50;
frame.size.width = 300;
frame.size.height = 380;

scherm.frame = frame;
scherm.clipsToBounds = YES;
scherm.layer.cornerRadius = 10;

[self.view addSubview:scherm];

CustomUITableViewClass *table = [[CustomUITableViewClass alloc] initWithStyle:UITableViewStyleGrouped];

frame.origin.y = -10;
frame.origin.x = -10;
frame.size.width = 320;
frame.size.height = 400;

table.tableView.frame = frame;
[scherm addSubview:table.tableView];

I hope you understand my english, maybe I will write a short blog post about this technique with a sample project, will post the link here when I'm ready.

HansPinckaers
I found another/better way to do this, you can find it here (including a sample project to download):http://www.hanspinckaers.com/reproducing-a-tableview-like-in-stocks-spotlight-weather
HansPinckaers
This is the only solution from a variety of solutions tested by me on September 2010 that works great on iOS 4 and iOS 3.2 and has a great performance. Integrating it into my applications. Thank you, Hans!
DenTheMan
Thanks:) glad I could help.
HansPinckaers
+1  A: 

I recently came across this problem and solved it a different way. Thought I'd share the results with everyone.

I created a rectangular UIView with a clear, rounded-corner interior, and then laid that on top of the UITableView. You can find the full description at my programming blog.

It works exactly the way I want. Hope that helps.

Derrick Schneider
+1  A: 

Here is the solution I came up with. It combines a layer mask and layer cornerRadius. iPhone OS 3.x only. I didn't spend any time trying to get scroll bars working but I think it shouldn't be too difficult.

http://github.com/beetlebugorg/RoundedUITableView

Jeremy Collins
Nice, thanks for sharing ! The project demonstrates the whole thing but the core stuff is isolated in the RoundedUITableView, great. Do you think it wouldsupport the landscape mode without effort ? :/
yonel