iOS设置圆角汇总

1,281 阅读2分钟

设置圆角的不同方法

使用layer.cornerRadius

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor grayColor];
    
    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    [self.view addSubview:bgView];
    bgView.backgroundColor = [UIColor redColor];
    bgView.layer.cornerRadius = 20.0f;
}

Simulator Screen Shot - iPhone 14 Pro - 2023-01-17 at 10.35.06.png

如果添加内容会显示在视图外面。

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor grayColor];
    
    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    [self.view addSubview:bgView];
    bgView.backgroundColor = [UIColor redColor];
    bgView.layer.cornerRadius = 20.0f;
    
    UIView *content = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
    content.backgroundColor = [UIColor greenColor];
    [bgView addSubview:content];
}

Simulator Screen Shot - iPhone 14 Pro - 2023-01-17 at 10.37.54.png

此时,需要设置masksToBounds。此时会触发离屏渲染,会影响性能。

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor grayColor];
    
    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    [self.view addSubview:bgView];
    bgView.backgroundColor = [UIColor redColor];
    bgView.layer.cornerRadius = 20.0f;
    bgView.layer.masksToBounds = YES;// 添加这行代码
    
    UIView *content = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 200, 200)];
    content.backgroundColor = [UIColor greenColor];
    [bgView addSubview:content];
}

Simulator Screen Shot - iPhone 14 Pro - 2023-01-17 at 10.39.17.png

CAShapLayer

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor grayColor];
    
    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    [self.view addSubview:bgView];
    // 不能设置背景颜色,否则圆角的位置会出现颜色
//    bgView.backgroundColor = [UIColor redColor];
    
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:bgView.bounds cornerRadius:20.0f];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame = bgView.bounds;
    layer.fillColor = [UIColor greenColor].CGColor;
    layer.path = path.CGPath;
    [bgView.layer addSublayer:layer];
}

Simulator Screen Shot - iPhone 14 Pro - 2023-01-17 at 10.44.27.png

CAShapLayer针对不同的圆角

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.view.backgroundColor = [UIColor grayColor];
    
    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    [self.view addSubview:bgView];
    // 不能设置背景颜色,否则圆角的位置会出现颜色
    bgView.backgroundColor = [UIColor redColor];
    
    [self addCornerView:bgView leftTop:10 rightTop:20 leftBottom:30 rightBottom:40 color:[UIColor blueColor]];
    
}
- (void)addCornerView:(UIView *)view leftTop:(CGFloat)leftTopCorner rightTop:(CGFloat)rightTopCorner leftBottom:(CGFloat)leftBottomCorner rightBottom:(CGFloat)rightBottomCorner color:(UIColor *)color{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGRect bounds = view.bounds;
    
    // 上边的横线
    [path moveToPoint:CGPointMake(leftTopCorner, 0)];
    [path addLineToPoint:CGPointMake(bounds.size.width - rightTopCorner, 0)];
    
    // 右上角的圆角
    [path addArcWithCenter:CGPointMake(bounds.size.width-rightTopCorner, rightTopCorner) radius:rightTopCorner startAngle:-M_PI_2 endAngle:0 clockwise:YES];
    
    // 右边的线
    [path addLineToPoint:CGPointMake(bounds.size.width, bounds.size.height - rightBottomCorner)];
    
    // 右下角的圆角
    [path addArcWithCenter:CGPointMake(bounds.size.width-rightBottomCorner, bounds.size.height-rightBottomCorner) radius:rightBottomCorner startAngle:0 endAngle:M_PI_2 clockwise:YES];
    
    // 下边的线
    [path addLineToPoint:CGPointMake(leftBottomCorner, bounds.size.height)];
    
    // 左下角的圆角
    [path addArcWithCenter:CGPointMake(leftBottomCorner, bounds.size.height - leftBottomCorner) radius:leftBottomCorner startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
    
    // 左边的线
    [path addLineToPoint:CGPointMake(0, leftTopCorner)];
    
    // 左上角的圆角
    [path addArcWithCenter:CGPointMake(leftTopCorner, leftTopCorner) radius:leftTopCorner startAngle:M_PI endAngle:-M_PI_2 clockwise:YES];
    
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame = bounds;
    layer.fillColor = color.CGColor;
    layer.path = path.CGPath;
    [view.layer addSublayer:layer];
}

Simulator Screen Shot - iPhone 14 Pro - 2023-01-17 at 11.06.35.png

DrawRect方法

由于该方法使用CPU进行绘制,CAShapLayer使用GPU绘制,因此,不推荐使用。