設(shè)置UITableView的圓角(OC和swift)

先看以下的效果圖



在UITableViewDelegate的willDisplayCell方法中,通過UIBezierPath繪制顯示圓角即可


OC實現(xiàn)的方法:

- (void)tableView:(UITableView*)tableViewwillDisplayCell:(UITableViewCell*)cellforRowAtIndexPath:(NSIndexPath*)indexPath {

? ? // 圓角角度

? ? ? CGFloatradius =10.f;

? ? ? // 設(shè)置cell 背景色為透明

? ? ? cell.backgroundColor = UIColor.clearColor;

? ? ? // 創(chuàng)建兩個layer

? ? ? CAShapeLayer*normalLayer = [[CAShapeLayeralloc]init];

? ? ? CAShapeLayer*selectLayer = [[CAShapeLayeralloc]init];

? ? ? // 獲取顯示區(qū)域大小

? ? ? CGRectbounds =CGRectInset(cell.bounds,10,0);

? ? ? // 獲取每組行數(shù)

? ? ? NSIntegerrowNum = [tableViewnumberOfRowsInSection:indexPath.section];

? ? ? // 貝塞爾曲線

? ? ? UIBezierPath*bezierPath =nil;


? ? //考慮一行和多行的情況,若行數(shù)為1,則這個cell的每個角都是圓角,否則第一行的左上和右上為圓角,最后一行的左下和右下為圓角

? ? if(rowNum ==1) {

? ? ? ? // 一組只有一行(四個角全部為圓角)

? ? ? ? bezierPath = [UIBezierPathbezierPathWithRoundedRect:bounds

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? byRoundingCorners:UIRectCornerAllCorners

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cornerRadii:CGSizeMake(radius, radius)];

? ? }else{

? ? ? ? if(indexPath.row==0) {

? ? ? ? ? ? // 每組第一行(添加左上和右上的圓角)

? ? ? ? ? ? bezierPath = [UIBezierPathbezierPathWithRoundedRect:bounds

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight)

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cornerRadii:CGSizeMake(radius, radius)];

? ? ? ? }else if(indexPath.row== rowNum -1) {

? ? ? ? ? ? // 每組最后一行(添加左下和右下的圓角)

? ? ? ? ? ? bezierPath = [UIBezierPathbezierPathWithRoundedRect:bounds

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? byRoundingCorners:(UIRectCornerBottomLeft|UIRectCornerBottomRight)

?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cornerRadii:CGSizeMake(radius, radius)];

? ? ? ? }else{

? ? ? ? ? ? // 每組不是首位的行不設(shè)置圓角

? ? ? ? ? ? bezierPath = [UIBezierPathbezierPathWithRect:bounds];

? ? ? ? }

? ? }

? ? //將貝塞爾曲線的路徑賦值給圖層,并將圖層添加到view

? ? // 把已經(jīng)繪制好的貝塞爾曲線路徑賦值給圖層,然后圖層根據(jù)path進(jìn)行圖像渲染render

? ? normalLayer.path= bezierPath.CGPath;

? ? selectLayer.path= bezierPath.CGPath;

? ? UIView*nomarBgView = [[UIViewalloc]initWithFrame:bounds];

? ? // 設(shè)置填充顏色

? ? normalLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;

? ? // 添加圖層到nomarBgView中

? ? [nomarBgView.layerinsertSublayer:normalLayeratIndex:0];

? ? nomarBgView.backgroundColor = UIColor.clearColor;

? ? cell.backgroundView= nomarBgView;

? ? //圓角顯示就完成了,但是如果沒有取消cell的點擊效果,會出現(xiàn)一個灰色的長方形的形狀,再用上面創(chuàng)建的selectLayer給cell添加一個selectedBackgroundView

? ? UIView*selectBgView = [[UIViewalloc]initWithFrame:bounds];

? ? selectLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;

? ? [selectBgView.layerinsertSublayer:selectLayeratIndex:0];

? ? selectBgView.backgroundColor = UIColor.clearColor;

? ? cell.selectedBackgroundView= selectBgView;

}


swift實現(xiàn)的方法:

?func tableView(_tableView:UITableView, willDisplay cell:UITableViewCell, forRowAt indexPath:IndexPath) {

? ? ? ? // 圓角角度

? ? ? ? let radius =calculate(w:35.0)

? ? ? ? // 設(shè)置cell 背景色為透明

? ? ? ? cell.backgroundColor = UIColor.clear

? ? ? ? // 創(chuàng)建兩個layer

? ? ? ? let normalLayer =CAShapeLayer()

? ? ? ? let selectLayer =CAShapeLayer()

? ? ? ? // 獲取顯示區(qū)域大小

? ? ? ? let bounds = cell.bounds.insetBy(dx:10.0, dy:0)

? ? ? ? // 獲取每組行數(shù)

? ? ? ? let rowNum = tableView.numberOfRows(inSection: indexPath.section)

? ? ? ? // 貝塞爾曲線

? ? ? ? var bezierPath:UIBezierPath

? ? ? ? if(rowNum==1) {

? ? ? ? ? ? // 一組只有一行(四個角全部為圓角)

? ? ? ? ? ? bezierPath =UIBezierPath(roundedRect: bounds, byRoundingCorners: .allCorners, cornerRadii:CGSize(width: radius, height: radius))

? ? ? ? }else{

? ? ? ? ? ? if(indexPath.row==0) {

? ? ? ? ? ? ? ? // 每組第一行(添加左上和右上的圓角)

? ? ? ? ? ? ? ? bezierPath =UIBezierPath(roundedRect: bounds, byRoundingCorners: [UIRectCorner.topLeft,UIRectCorner.topRight], cornerRadii:CGSize(width: radius, height: radius))

? ? ? ? ? ? }elseif(indexPath.row==rowNum-1) {

? ? ? ? ? ? ? ? // 每組最后一行(添加左下和右下的圓角)

? ? ? ? ? ? ? ? bezierPath =UIBezierPath(roundedRect: bounds, byRoundingCorners: [UIRectCorner.bottomLeft,UIRectCorner.bottomRight], cornerRadii:CGSize(width: radius, height: radius))

? ? ? ? ? ? }else{

? ? ? ? ? ? ? ? // 每組不是首位的行不設(shè)置圓角

? ? ? ? ? ? ? ? bezierPath =UIBezierPath(rect: bounds)

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // 把已經(jīng)繪制好的貝塞爾曲線路徑賦值給圖層,然后圖層根據(jù)path進(jìn)行圖像渲染render

? ? ? ? normalLayer.path= bezierPath.cgPath;

? ? ? ? selectLayer.path= bezierPath.cgPath;

? ? ? ? let nomarBgView =UIView(frame: bounds);

? ? ? ? // 設(shè)置填充顏色

? ? ? ? normalLayer.fillColor=UIColor.white.cgColor

? ? ? ? // 添加圖層到nomarBgView中

? ? ? ? nomarBgView.layer.insertSublayer(normalLayer, at:0)

? ? ? ? nomarBgView.backgroundColor=UIColor.clear

? ? ? ? cell.backgroundView= nomarBgView

? ? ? ? let selectBgView =UIView(frame: bounds)

? ? ? ? selectLayer.fillColor=? UIColor.white.cgColor

? ? ? ? selectBgView.layer.insertSublayer(selectLayer, at:0)

? ? ? ? selectBgView.backgroundColor=UIColor.clear

? ? ? ? cell.selectedBackgroundView= selectBgView

? ? }

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容