iOS View/Cell切部分圆角的方法

如果是切4个圆角，下面的方法很实用

view.layer.cornerRadius = 6;
view.clipToBounds = YES;

但遇到下图这种需求（第一个Cell顶部切圆角、最后一个Cell底部切圆角，中间的Cell无圆角），实现起来会很繁杂

切圆角

上图中每一行是一个cell。
如果用上述方法实现，恐怕第一个cell和最后一个cell要添加一个View遮盖多余的圆角！
偶然看见别人用了BezierPath做，才想到原来BezierPath可以用来处理这种情况。

MyCell.h

@interface MyCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UIView *customView;
.
.
@property (weak, nonatomic) IBOutlet UIView *separator;      //自定义分割线

@property (nonatomic, strong) NSDictionary *dataDic;
@property (nonatomic, assign) BOOL showSeparator;
@property (nonatomic, assign) CGFloat rowHeight;        //默认高度70，如需传入，必须在roundCorners前赋值
@property (nonatomic, assign) CGSize cornerSize;        //默认高度[10,10]，如需传入，必须在roundCorners前赋值
@property (nonatomic, assign) UIRectCorner roundCorners; //圆角

@end

MyCell.m

- (void)setShowSeparator:(BOOL)showSeparator {//是否显示分割线
    _showSeparator = showSeparator;
    _separator.hidden = !showSeparator;
}
//roundCorners可以自由指定左上、左下、右上、右下圆角的任意组合
- (void)setRoundCorners:(UIRectCorner)roundCorners {
    _roundCorners = roundCorners;
    if (roundCorners == 0) {
        _customView.layer.mask = nil;//无圆角
    }else {
        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, ScreenWidth-20, _rowHeight) byRoundingCorners:roundCorners cornerRadii:_cornerSize];
        CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
        maskLayer.frame = CGRectMake(0, 0, ScreenWidth-20, _rowHeight);
        maskLayer.path = maskPath.CGPath;
        _customView.layer.mask = maskLayer;
    }
}

MyCell.xib

红框是customView，红框底部是分割线separator（有缩进）

Cell

ViewController中datasource内的用法

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath  {
    
    MyCell *cell = [tableView dequeueReusableCellWithIdentifier:_cellID];
    
    UIRectCorner corners = 0;  //初始化为0，任何数跟0进行或运算等于它本身。
    BOOL isFirstRow = (indexPath.row == 0);
    BOOL isLastRow = (indexPath.row == self.datasArray.count - 1);
    if (isFirstRow) {
        corners = corners | UIRectCornerTopLeft | UIRectCornerTopRight;//添加左上、右上圆角
    }
    if (isLastRow) {
        corners = corners | UIRectCornerBottomLeft | UIRectCornerBottomRight;//添加左下、右下圆角
    }
    cell.roundCorners = corners;
    cell.showSeparator = !isLastRow;
    cell.dataDic = self.datasArray[indexPath.row];
    
    return cell;
}

Warning：后来看了其他一些资料，说 $\color{red}{用代码切圆角会严重影响性能！}$ 尤其是在复用的Cell上！不管是通过layer.cornerRadius还是layer.mask = aLaer。如果你cell切了圆角，滚动的时候发现卡顿，那十之八九就是这个原因！！！切圆角的控件越多，越卡顿！可以通过view.layer.shouldRasterize = true;view.layer.rasterizeScale = UIScreen.main.scale;去缓存渲染的数据。这样占用多一些内存，但可以缓解切圆角造成的卡顿问题！这种方式只对复用之后，切圆角的view外观没有变化的情况。
最好吧，能用图片的就用图片，不要用代码去切圆角了！让UI去画图！如果他不愿意切，那么tableView滚动卡顿，你直接甩锅给UI！

最后编辑于：2019.07.02 20:12:21