Corner radius for table view cell

Question

I need to change the cell corner radius like in the below image:

i want to set corner like above image section 1 – John Dec 24 '15 at 15:36 — John, Dec 24 '15 at 15:36
I don't thing this is possible on iOS – Fabio Berger Dec 24 '15 at 15:43 — Fabio Berger, Dec 24 '15 at 15:43

SaiPavanParanam · Answer 1 · 2016-09-27T18:26:29.340

func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath)
{
if (tableView == self.orderDetailsTableView)
{
    //Top Left Right Corners
    let maskPathTop = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.TopLeft, .TopRight], cornerRadii: CGSize(width: 5.0, height: 5.0))
    let shapeLayerTop = CAShapeLayer()
    shapeLayerTop.frame = cell.bounds
    shapeLayerTop.path = maskPathTop.CGPath

    //Bottom Left Right Corners
    let maskPathBottom = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.BottomLeft, .BottomRight], cornerRadii: CGSize(width: 5.0, height: 5.0))
    let shapeLayerBottom = CAShapeLayer()
    shapeLayerBottom.frame = cell.bounds
    shapeLayerBottom.path = maskPathBottom.CGPath

    //All Corners
    let maskPathAll = UIBezierPath(roundedRect: cell.bounds, byRoundingCorners: [.TopLeft, .TopRight, .BottomRight, .BottomLeft], cornerRadii: CGSize(width: 5.0, height: 5.0))
    let shapeLayerAll = CAShapeLayer()
    shapeLayerAll.frame = cell.bounds
    shapeLayerAll.path = maskPathAll.CGPath

    if (indexPath.row == 0 && indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1)
    {
        cell.layer.mask = shapeLayerAll
    }
 else if (indexPath.row == 0)
    {
    cell.layer.mask = shapeLayerTop
    }
    else if (indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1)
    {
        cell.layer.mask = shapeLayerBottom
    }
}
}

what actually we are doing is if section has only one row then we do it on all sides, if section has multiple rows then we do it top on first row and bottom at last row... the properties BottomLeft, BottomRight, topLeft, TopRight should be of type rect corner(Suggestions from xcode when you are typing... there is another property content corner with same name.. so check that )

This should be marked as the Correct Answer, at least it's what helped me :-) — Hernan Arber, Jun 12 '17 at 13:12
@SaiPavanParanam thank you so much, after searching for days i lost hope and finally your solution works with slight modification to my scenario. — Arshad Shaik, Sep 26 '18 at 12:08
It's not woking at all please check in your view controller. — Akash Raghani, Mar 12 '19 at 05:08
my app never gets inside the willDisplayCell. What may be the problem? — Mert Köksal, Mar 24 '22 at 12:09

score 14 · Answer 2 · edited Jan 01 '16 at 11:21

14

You can use following code in swift 2.0

Put this code in cellForRowAtIndexpath method:

cell!.layer.cornerRadius=10 //set corner radius here
cell!.layer.borderColor = UIColor.blackColor().CGColor  // set cell border color here
cell!.layer.borderWidth = 2 // set border width here

Below is the output of my code

edited Jan 01 '16 at 11:21

Rashwan L

38,237
7
103
107

answered Dec 24 '15 at 15:43

Pallavi Nikumbh

298
4
19

If that doesn't work try `cell!.contentView.layer`. I suspect that it's the cell's content view that has the border and rounded corners, not the cell. – Duncan C Dec 24 '15 at 15:47
@DuncanC Please see my edited answer. this code is worked for me. – Pallavi Nikumbh Dec 24 '15 at 16:27
1

It looks like the OP wants a sectioned table view where the sections are grouped with a rounded rectangle around the whole section. That's more complicated. – Duncan C Dec 24 '15 at 16:34
I want to radius section of tableview cell not row of tableview cell see image above – John Jan 06 '16 at 09:34
1

I have no idea why this answer has more votes over mine – SaiPavanParanam Jun 21 '17 at 09:51
@SaiPavanParanam See the difference between both the code. you will get your answer. :) – Pallavi Nikumbh Jun 23 '17 at 11:20
@PallaviNikumbh Your answer does not actually solve his question. – SaiPavanParanam Jun 29 '17 at 10:03
@PallaviNikumbh You are actually giving border to the entire Cell. He just needs it the section wise. – SaiPavanParanam Jun 29 '17 at 10:05

Rashwan L · Answer 3 · 2015-12-24T15:59:08.063

3

It seems that your tableView contains an UIView so just add these rows in cellForRowAtIndexPath. If not add an UIView and add the radius to the UIView and just add that view to your cell (cell.addSubView(YOURVIEW)).

cell.contentView.layer.cornerRadius = 10
cell.contentView.layer.masksToBounds = true

To customize the border you can

cell.layer.borderColor = UIColor.grayColor().CGColor
cell.layer.borderWidth = 5

Update

To add this in your viewForHeaderInSection Create a view let view = UIView() and add the radius to your view

view.layer.cornerRadius = 10
view.layer.masksToBounds = true

And add other properties that you need and return that view.

edited Dec 24 '15 at 15:59

answered Dec 24 '15 at 15:43

Rashwan L

38,237
7
103
107

it's set whole cell corner radius i want to set section wise – John Dec 24 '15 at 15:55
Then you need to add a viewForHeaderInSection to your tableView if you don´t already use it. Check the updated code. – Rashwan L Dec 24 '15 at 15:59
i also try http://stackoverflow.com/questions/18822619/ios-7-tableview-like-in-settings-app-on-ipad but not work – John Dec 24 '15 at 16:18
Add your code to your question, then it´s easier to help you. – Rashwan L Dec 24 '15 at 16:23
3

"but not work" is **NOT** helpful at all. You need to describe what you tried in detail, as well as how it did not meet your needs, *also in detail*. – Duncan C Dec 24 '15 at 16:36

Weston Mitchell · Answer 4 · 2022-09-15T23:54:44.023

I was setting contentView.layer.cornerRadius = 10 and it was still not showing; this was due to the cell.contentView.backgroundColor defaulting to nil which results in a transparent background color, thus it has cell.backgroundColor as it's bkgColor.

Setting the Cell's background color to .clear, which in my case would show the tableView's background color (non-white), it would then show the corner radius as desired, like this:

// Cell's init()
override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
        backgroundColor = .clear // this will show parent views bkgColor 
                                 //(in my case non-white) 
                                 // where the sharp corner is

        contentView.layer.cornerRadius = 10.0 // set corner radius
        contentView.backgroundColor = .white // set tableViewCells background color to what you want

        /* do stuff */
}

score 0 · Answer 5 · answered Jun 22 '22 at 04:49

0

try:

override func draw(_ rect: CGRect) {
        super.draw(rect)
        self.layer.cornerRadius = 8
        self.clipsToBounds = true
    }

in your TableViewCell

or:

cell.layer.cornerRadius = 8
cell.clipsToBounds = true

answered Jun 22 '22 at 04:49

Zankynn

26
3

score 0 · Answer 6 · answered Jun 22 '22 at 05:27

Best way to do it is to change corner radius in awakeFromNib and make sure to set its clipToBounds to true.

self.layer.cornerRadius = 4.0
self.clipToBounds = true

Or you can place a view inside your cell as background view and set its corner radius and clipToBounds.

self.backgroundView.layer.cornerRadius = 4.0
self.backgroundView.clipToBounds = true

Corner radius for table view cell

6 Answers6

Linked