CODEWITHSUNDEEP
iosswiftuitableview
John
John

Reputation: 213

Corner radius for table view cell

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

enter image description here

Upvotes: 7

Views: 25091

Answers (6)

Weston Mitchell
Weston Mitchell

Reputation: 321

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 */
}

Upvotes: 1

sandil09
sandil09

Reputation: 26

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

Upvotes: 0

Zankynn
Zankynn

Reputation: 26

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

Upvotes: 0

SaiPavanParanam
SaiPavanParanam

Reputation: 416

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 )

Upvotes: 17

Pallavi Nikumbh
Pallavi Nikumbh

Reputation: 308

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

enter image description here

Upvotes: 15

Rashwan L
Rashwan L

Reputation: 38843

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.

Upvotes: 3

Related Questions