Last active
July 20, 2022 03:25
-
-
Save iAviatorJose/22a0365fb0be5c1f44b3557922c4a046 to your computer and use it in GitHub Desktop.
Create Rounded Sections in UITableView
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) { | |
if (cell.respondsToSelector(Selector("tintColor"))){ | |
if (tableView == self.tvUserDetails) { | |
let cornerRadius : CGFloat = 12.0 | |
cell.backgroundColor = UIColor.clearColor() | |
let layer: CAShapeLayer = CAShapeLayer() | |
let pathRef:CGMutablePathRef = CGPathCreateMutable() | |
let bounds: CGRect = CGRectInset(cell.bounds, 5, 0) | |
var addLine: Bool = false | |
if (indexPath.row == 0 && indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) { | |
CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius) | |
} else if (indexPath.row == 0) { | |
CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds)) | |
CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds), CGRectGetMidX(bounds), CGRectGetMinY(bounds), cornerRadius) | |
CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius) | |
CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds)) | |
addLine = true | |
} else if (indexPath.row == tableView.numberOfRowsInSection(indexPath.section)-1) { | |
CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMinY(bounds)) | |
CGPathAddArcToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds), CGRectGetMidX(bounds), CGRectGetMaxY(bounds), cornerRadius) | |
CGPathAddArcToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMaxY(bounds), CGRectGetMaxX(bounds), CGRectGetMidY(bounds), cornerRadius) | |
CGPathAddLineToPoint(pathRef, nil, CGRectGetMaxX(bounds), CGRectGetMinY(bounds)) | |
} else { | |
CGPathAddRect(pathRef, nil, bounds) | |
addLine = true | |
} | |
layer.path = pathRef | |
layer.fillColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.8).CGColor | |
if (addLine == true) { | |
let lineLayer: CALayer = CALayer() | |
let lineHeight: CGFloat = (1.0 / UIScreen.mainScreen().scale) | |
lineLayer.frame = CGRectMake(CGRectGetMinX(bounds)+10, bounds.size.height-lineHeight, bounds.size.width-10, lineHeight) | |
lineLayer.backgroundColor = tableView.separatorColor!.CGColor | |
layer.addSublayer(lineLayer) | |
} | |
let testView: UIView = UIView(frame: bounds) | |
testView.layer.insertSublayer(layer, atIndex: 0) | |
testView.backgroundColor = UIColor.clearColor() | |
cell.backgroundView = testView | |
} | |
} | |
} |
How to add border color to rounded section?
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
let cornerRadius : CGFloat = 10.0
cell.backgroundColor = UIColor.clear
let layer: CAShapeLayer = CAShapeLayer()
let pathRef:CGMutablePath = CGMutablePath()
let bounds: CGRect = cell.bounds.insetBy(dx:0,dy:0)
var addLine: Bool = false
if (indexPath.row == 0 && indexPath.row == tableView.numberOfRows(inSection: indexPath.section)-1) {
pathRef.addRoundedRect(in: bounds, cornerWidth: cornerRadius, cornerHeight: cornerRadius)
// CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius)
} else if (indexPath.row == 0) {
pathRef.move(to: CGPoint(x: bounds.minX, y: bounds.maxY))
pathRef.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.minY), tangent2End: CGPoint(x: bounds.midX, y: bounds.midY), radius: cornerRadius)
pathRef.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.minY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)
pathRef.addLine(to:CGPoint(x: bounds.maxX, y: bounds.maxY) )
addLine = true
} else if (indexPath.row == tableView.numberOfRows(inSection: indexPath.section)-1) {
pathRef.move(to: CGPoint(x: bounds.minX, y: bounds.minY), transform: CGAffineTransform())
// CGPathMoveToPoint(pathRef, nil, CGRectGetMinX(bounds), CGRectGetMaxY(bounds))
pathRef.addArc(tangent1End: CGPoint(x: bounds.minX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.midX, y: bounds.maxY), radius: cornerRadius)
pathRef.addArc(tangent1End: CGPoint(x: bounds.maxX, y: bounds.maxY), tangent2End: CGPoint(x: bounds.maxX, y: bounds.midY), radius: cornerRadius)
pathRef.addLine(to:CGPoint(x: bounds.maxX, y: bounds.minY) )
} else {
pathRef.addRect(bounds)
addLine = true
}
layer.path = pathRef
layer.fillColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 0.8).cgColor
if (addLine == true) {
let lineLayer: CALayer = CALayer()
let lineHeight: CGFloat = (1.0 / UIScreen.main.scale)
lineLayer.frame = CGRect(x:bounds.minX + 10 , y:bounds.size.height-lineHeight, width:bounds.size.width-10, height:lineHeight)
lineLayer.backgroundColor = tableView.separatorColor?.cgColor
layer.addSublayer(lineLayer)
}
let testView: UIView = UIView(frame: bounds)
testView.layer.insertSublayer(layer, at: 0)
testView.backgroundColor = UIColor.clear
cell.backgroundView = testView
}
@vipulLimeroad answer is working for iOS14.
Works fine on iOS 14 but corners are not rounded on highlight or select
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
let cornerRadius : CGFloat = 12.0
cell.backgroundColor = UIColor.clear
let layer: CAShapeLayer = CAShapeLayer()
let pathRef:CGMutablePath = CGMutablePath()
let bounds: CGRect = cell.bounds.insetBy(dx:0,dy:0)
var addLine: Bool = false
// CGPathAddRoundedRect(pathRef, nil, bounds, cornerRadius, cornerRadius)
} else if (indexPath.row == 0) {