CODEWITHSUNDEEP
iosswiftuitableviewmargin
Hugo Fouquet
Hugo Fouquet

Reputation: 149

UITableViewCell margin left and right

I would like to make cells like this. I use swift.

But I do not know how to add margins on the right and left sides of the cell.

Do you know how to do the same edge effect rounds the section? (When there are several cells, the edges in contact are not rounded) enter image description here

When i use the contentInset :

self.tableView.contentInset = UIEdgeInsetsMake(0, -15, 0, 0)

enter image description here

self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 0, -15)

enter image description here

Upvotes: 4

Views: 11760

Answers (2)

Martijn
Martijn

Reputation: 469

Since iOS 13.0 there is a new tableview style "Inset grouped" that exactly does this: https://developer.apple.com/documentation/uikit/uitableview/style/insetgrouped

Upvotes: 1

beyowulf
beyowulf

Reputation: 15331

From your screenshots it looks like you're trying to do this with a grouped table view. To do this you should use a UITableView added to a UIViewController not a UITableViewController.

To set the inset you should just set constraints/frame of your table view to be slightly in from the left and right edge and set your view's background color to UIColor.groupTableViewBackgroundColor()

Then in cellForRowAtIndexPath you can say something like:

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

        let cornerRadius:CGFloat = 5.0

        let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath)

        // Configure your cell

        let sectionCount = tableView.numberOfRowsInSection(indexPath.section)
        let shapeLayer = CAShapeLayer()
        cell.layer.mask = nil
        if sectionCount > 1
        {

            switch indexPath.row {
            case 0:
                var bounds = cell.bounds
                bounds.origin.y += 1.0
                let bezierPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: [.TopLeft, .TopRight], cornerRadii: CGSize(width: cornerRadius,height: cornerRadius))
                shapeLayer.path = bezierPath.CGPath
                cell.layer.mask = shapeLayer
            case sectionCount - 1:
                var bounds = cell.bounds
                bounds.size.height -= 1.0
                let bezierPath = UIBezierPath(roundedRect: bounds, byRoundingCorners: [.BottomLeft, .BottomRight], cornerRadii: CGSize(width: cornerRadius,height: cornerRadius))
                shapeLayer.path = bezierPath.CGPath
                cell.layer.mask = shapeLayer
            default:
                break
            }
            return cell
        }
        else
        {
            let bezierPath = UIBezierPath(roundedRect: CGRectInset(cell.bounds,0.0,2.0), cornerRadius: cornerRadius)
            shapeLayer.path = bezierPath.CGPath
            cell.layer.mask = shapeLayer
            return cell
        }
    }

You just apply a mask based on the index path of the row and the number of rows in the section. If you have dynamically sized cells you will likely need to move applying the mask to your UITableViewCell subclass.

You should get a result like:

enter image description here

Upvotes: 9

Related Questions