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:
从 iOS 13.0 开始,有一个新的 tableview 样式“Inset grouped”可以做到这一点: https : //developer.apple.com/documentation/uikit/uitableview/style/insetgrouped
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.