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)
When i use the contentInset :
self.tableView.contentInset = UIEdgeInsetsMake(0, -15, 0, 0)
self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 0, -15)
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:
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
