Round corners on UITableView

Question

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 sc

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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;