tableview的整個section圓角邊框設(shè)計

如圖所示,實現(xiàn)以下tableview的整個section有邊框有圓角

Simulator Screen Shot - iPhone 8 Plus - 2020-11-13 at 17.06.28.png

創(chuàng)建一個ACell,里面就一個view,左右各有15的間距


20201113-170849@2x.png

ACell.h

#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, CellBorderStyle) {
    CellBorderStyleNoRound = 0,
    CellBorderStyleTopRound,
    CellBorderStyleBottomRound,
    CellBorderStyleAllRound,
};
NS_ASSUME_NONNULL_BEGIN

@interface ACell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIView *bgView;
@property (nonatomic, assign) CellBorderStyle borderStyle;//邊框類型
@property (nonatomic, strong) UIColor *contentBorderColor;//邊框顏色
@property (nonatomic, strong) UIColor *contentBackgroundColor;//邊框內(nèi)部內(nèi)容顏色
@property (nonatomic, assign) CGFloat contentBorderWidth;//邊框的寬度,這個寬度的一半會延伸到外部
@property (nonatomic, assign) CGFloat contentMargin;//左右距離父視圖的邊距
@property (nonatomic, assign) CGSize contentCornerRadius;//邊框的圓角
@property (assign, nonatomic) CGFloat cornerRadius;
- (void)setupBorder;
- (void)setBorderStyleWithTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath;
@end

ACell.m

//
//  ACell.m
//
//  Created by yft on 2020/11/13.
//  Copyright ? 2020 yeebing. All rights reserved.
//

#import "ACell.h"

@implementation ACell

- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
}

- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
}
- (void)setBorderStyleWithTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
        self.borderStyle = CellBorderStyleAllRound;
    }else if (indexPath.row == 0) {
        self.borderStyle = CellBorderStyleTopRound;
    }else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
        self.borderStyle = CellBorderStyleBottomRound;
    }else {
        self.borderStyle = CellBorderStyleNoRound;
    }
}
- (void)layoutSubviews
{
    [super layoutSubviews];
    //在這里設(shè)置才能獲取到真正顯示時候的寬度,而不是原始的
    [self setupBorder];
}

- (void)setupBorder
{
    CAShapeLayer *layer1 = [CAShapeLayer layer];
    layer1.lineWidth = self.contentBorderWidth;
    layer1.strokeColor = self.contentBorderColor.CGColor;
    layer1.fillColor =  self.contentBackgroundColor.CGColor;
    
    
    CAShapeLayer *layer2 = [CAShapeLayer layer];
    layer2.lineWidth = self.contentBorderWidth;
    layer2.strokeColor = self.contentBorderColor.CGColor;
    layer2.fillColor =  self.contentBackgroundColor.CGColor;
    

    [self.bgView.layer insertSublayer:layer1 atIndex:0];
    [self.bgView.layer insertSublayer:layer2 atIndex:0];


    CGFloat mw = [UIScreen mainScreen].bounds.size.width;//由于這里取不到真實的寬高,就用絕對k寬高來坐適配了
    
#if 0
    CGFloat w = self.bgView.frame.size.width;//不知為什么取不到真實寬高,獲取到的還是xib的寬高
    CGFloat h = self.bgView.frame.size.height;
#else
    CGFloat w = mw-30; //直接用絕對寬高來計算
    CGFloat h = 60;
#endif

 
    
    
    NSLog(@"width:%f---height:%f",w,h);
    
    switch (self.borderStyle) {
        case CellBorderStyleNoRound:
        {
            //中間的cell,沒有圓角
            //但是需要左右兩邊各畫出一條豎線
            
            [self addRoundedCorners:UIRectCornerAllCorners withRadii:CGSizeZero viewRect:CGRectMake(0, 0, w, h) View:self.bgView];
            //左邊豎線
            UIBezierPath *_path1  = [UIBezierPath bezierPath];
            [_path1 moveToPoint:CGPointMake(0, 0)];
            //添加點
            [_path1 addLineToPoint:CGPointMake(0, h)];
            layer1.path = _path1.CGPath;

            //右邊豎線
            UIBezierPath *_path2  = [UIBezierPath bezierPath];
            [_path2 moveToPoint:CGPointMake(w, 0)];
            //添加點
            [_path2 addLineToPoint:CGPointMake(w, h)];
            layer2.path = _path2.CGPath;
        }
            break;
        case CellBorderStyleTopRound:
        {
            //第一個cell,需要畫出上左,上右圓角
            //左右上三邊的線,用UIBezierPath添加點畫出需要的線條
            
            [self addRoundedCorners:UIRectCornerTopLeft|UIRectCornerTopRight withRadii:self.contentCornerRadius viewRect:CGRectMake(0, 0, w, h) View:self.bgView];
            UIBezierPath *_path  = [UIBezierPath bezierPath];
            [_path moveToPoint:CGPointMake(0, h)];
            //添加點
            [_path addArcWithCenter:CGPointMake(self.cornerRadius, self.cornerRadius) radius:self.cornerRadius startAngle:M_PI endAngle:M_PI*3/2 clockwise:YES];
            [_path addArcWithCenter:CGPointMake(w-self.cornerRadius, self.cornerRadius) radius:self.cornerRadius startAngle:M_PI*3/2 endAngle:M_PI*2 clockwise:YES];
            [_path addLineToPoint:CGPointMake(w, h)];
//            [_path closePath]; //第五條線通過調(diào)用closePath方法得到的 不要閉合
            layer1.path = _path.CGPath;
                        
        }
            break;
        case CellBorderStyleBottomRound:
        {
            
            //最后一個cell,需要畫出下左,下右圓角
            //左右下三邊的線,用UIBezierPath添加點畫出需要的線條
            
            [self addRoundedCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight withRadii:self.contentCornerRadius viewRect:CGRectMake(0, 0, w, h) View:self.bgView];
            UIBezierPath *_path  = [UIBezierPath bezierPath];
            [_path moveToPoint:CGPointMake(0, 0)];
                      //添加點
            [_path addArcWithCenter:CGPointMake(self.cornerRadius,h- self.cornerRadius) radius:self.cornerRadius startAngle:M_PI endAngle:M_PI/2 clockwise:NO];
            [_path addArcWithCenter:CGPointMake(w-self.cornerRadius,h- self.cornerRadius) radius:self.cornerRadius startAngle:M_PI/2 endAngle:M_PI*2 clockwise:NO];
            [_path addLineToPoint:CGPointMake(w, 0)];
            //          [_path closePath]; //第五條線通過調(diào)用closePath方法得到的 不要閉合
            layer1.path = _path.CGPath;
            
        }
            break;
        case CellBorderStyleAllRound:
        {
            //只有一個cell的時候,只需對這個cell添加全部圓角
            [self addRoundedCorners:UIRectCornerAllCorners withRadii:self.contentCornerRadius viewRect:CGRectMake(0, 0, w, h) View:self.bgView];
           UIBezierPath *_path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, w, h) cornerRadius:self.cornerRadius];
           layer1.frame = CGRectMake(0, 0, w, h);
           layer1.path = _path.CGPath;
        }
            break;
        default:
            break;
    }
}
/**
 *  設(shè)置部分圓角(相對布局)
 *
 *  @param corners 需要設(shè)置為圓角的角 UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft | UIRectCornerBottomRight | UIRectCornerAllCorners
 *  @param radii   需要設(shè)置的圓角大小 例如 CGSizeMake(20.0f, 20.0f)
 *  @param rect    需要設(shè)置的圓角view的rect
 */
- (void)addRoundedCorners:(UIRectCorner)corners
                withRadii:(CGSize)radii
                 viewRect:(CGRect)rect
                     View:(UIView *)view{
    
    UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];
    CAShapeLayer* shape = [[CAShapeLayer alloc] init];
    [shape setPath:rounded.CGPath];
    
    view.layer.mask = shape;
}
@end

用UIBezierPath畫出的只是線條,圓角其實還在,如下圖


20201113-171800@2x.png

單獨裁掉圓角


/**
 *  設(shè)置部分圓角(相對布局)
 *
 *  @param corners 需要設(shè)置為圓角的角 UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft | UIRectCornerBottomRight | UIRectCornerAllCorners
 *  @param radii   需要設(shè)置的圓角大小 例如 CGSizeMake(20.0f, 20.0f)
 *  @param rect    需要設(shè)置的圓角view的rect
 */
- (void)addRoundedCorners:(UIRectCorner)corners
                withRadii:(CGSize)radii
                 viewRect:(CGRect)rect
                     View:(UIView *)view{
    
    UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];
    CAShapeLayer* shape = [[CAShapeLayer alloc] init];
    [shape setPath:rounded.CGPath];
    
    view.layer.mask = shape;
}

只需在tableview的代理里設(shè)置

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ACell *cell = [tableView dequeueReusableCellWithIdentifier:@"ACell"];
    [cell setBorderStyleWithTableView:tableView indexPath:indexPath];
    cell.contentBorderColor = [UIColor lightGrayColor];
    cell.contentBackgroundColor = [UIColor whiteColor];
    cell.contentBorderWidth = 1.0;
    cell.contentMargin = 15;
    cell.contentCornerRadius = CGSizeMake(10, 10);
    cell.cornerRadius = 10;
    [cell setupBorder];
    cell.textLabel.text = [NSString stringWithFormat:@"section%ld--index%ld",(long)indexPath.section,(long)indexPath.row];
    return cell;
}
最后編輯于
?著作權(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)容