36

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.

4
  • Another way would be to mask the UITableView by using Core Graphics. An example of masking a UIView can be found here: iphonedevelopment.blogspot.com/2008/11/…
    – raidfive
    Jul 10, 2009 at 3:19
  • This helped a lot but it doesn't clip the cells when they scroll past the clipped area of the UITableView itself. Jul 12, 2009 at 8:00
  • I can't believe this seven year old question still gets attention. I gave up on the feature long ago, sorry I can't test and accept any of the answers myself. I see lots of check marks though, thanks all! I'm stoked to see this has been helpful. Aug 24, 2016 at 18:24
  • @Scrollwheelie ... Yup, people still snag on the same stuff. In my case, I was looking to create the Table View effect that I got by default from SwiftUI when I created a List view in my SwfitUI View class. At first I actually didn't like what SwiftUI did by default but after design permutations I found a way to make that the perfect look, and then wasn't sure how to achieve it with UITableView.
    – clearlight
    Apr 29, 2022 at 18:34

9 Answers 9

66

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.

1
  • 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
    Sep 1, 2010 at 21:18
57

An easier way to do this is to simply import the QuartzCore framework to your project. #import <QuartzCore/QuartzCore.h> to your tableViewController and just set

myTableView.layer.cornerRadius=5;

This will give you rounded corners without having to add your tableview to a superView or clipping it.

0
14

Instead of hacking through the code, here's an easy to mimic the grouped style. This works if all you want is one section.

In Interface Builder:

  • Set UITableView style to Plain and make the frame with some padding on the left and right, perhaps with x = 10 and width = 300.

Then set the corner radius and color yourself:

 #import <QuartzCore/QuartzCore.h>

 self.tableView.layer.borderColor = [UIColor colorWithWhite:0.6 alpha:1].CGColor;   
 self.tableView.layer.borderWidth = 1;
 self.tableView.layer.cornerRadius = 4;
1
  • Clean! Simple! looks great. I like it!
    – clearlight
    Feb 7, 2015 at 6:05
2

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.

4
  • 1
    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
    Jul 9, 2009 at 23:11
  • Yeah, it sounds like you're on the right track with this one.
    – Reed Olsen
    Jul 9, 2009 at 23:12
  • @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. Jul 9, 2009 at 23:14
  • I clarified the question a little bit because the corners need to stay there but thanks a ton for the quick answer. Jul 9, 2009 at 23:41
2

Well, there is alot of approach to solve this problem.

However, in my case, all doesn't work correctly. My table sometimes is smaller than table size.

I will share the way I did. I belive is alot easer and faster than some options above.

Make the first and last item rounded.

  • Create CAShapeLayer for top(left|right) and bottom(left|right).

    shapeTop = [CAShapeLayer layer];
    shapeTop.path = [UIBezierPath 
    bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
    byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
    cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
    
    shapeBottom = [CAShapeLayer layer];
    shapeBottom.path = [UIBezierPath 
    bezierPathWithRoundedRect:CGRectMake( 0.0f, 0.0f, 306.0f, 58.0f )
    byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight
    cornerRadii:CGSizeMake( 6.0f, 6.0f )].CGPath;
    
  • The table need to be backgroud clearColor;

  • The cells has to be a colored background;
  • Set the layer.mask of it

    UIView* backgroundView = [[UIView alloc] initWithFrame:CGRectZero];
    backgroundView.backgroundColor = [UIColor whiteColor];
    cell.backgroundView = backgroundView;
    
  • Don't forget #import <QuartzCore/QuartzCore.h>

1

Below code for Swift version :

 let redColor = UIColor.redColor()
 self.tableView.layer.borderColor = redColor.colorWithAlphaComponent(0.9).CGColor
 self.tableView.layer.borderWidth = 1;
 self.tableView.layer.cornerRadius = 4;

Make sure that you have import QuartzCore in import section.

1

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.

1
  • link is not working anymore and explanation is not completed
    – Ryan110
    Apr 17, 2023 at 0:06
1

Here is swift extension:

extension UITableView {
     public var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = true
        }
    }
}

Used by this way

  tableView.cornerRadius = 7.5
1
UITableViewStyleInsetGrouped

A table view where the grouped sections are inset with rounded corners.

example code: self.tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleInsetGrouped];

looks like: Settings looking table view sections

1
  • That's it! That's what I was looking for! It gives me the look with UITableViewController that I had with SwiftUI List! Great answer! Except I just selected "Inset Grouped" from the style pulldown in Interface Builder for the Table Veiw.
    – clearlight
    Apr 29, 2022 at 18:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.