切圆角总结

作者: ios_stand | 来源:发表于2017-12-02 17:32 被阅读0次

iOS 常用组件-高效切圆角方法总结
切某个位置圆角
切View圆角
给UIView切任意圆角
css扩展
圆角
iOS核心动画高级技巧三(视觉效果)
iOS开发--切指定圆角的方法
切圆角总结
Android 中常见切圆角的方式

UIView(不包括其子类)

UIView *view = [[UIView alloc] init];
view.backgroundColor = [UIColor blackColor];
view.layer.cornerRadius = 3.f;
// 以下两行，任写一行或者一行都不写（两属性默认都是NO）
//view.layer.masksToBounds = NO;
//view.clipToBounds = NO;
// 以下两行，千万不要加！
//view.layer.masksToBounds = YES;
//view.clipToBounds = YES;

注意点：UIView 只要设置图层的 cornerRadius 属性即可（不明白的话，可以看看官方文档里对 cornerRadius 的描述），如果设置 layer.masksToBounds = YES，会造成不必要的离屏渲染。

UITextField

//UITextField有两种实现方法

// 天然支持设置圆角边框
UITextField *textField = [[UITextField alloc] init];
textField.borderStyle = UITextBorderStyleRoundedRect;

// 与 UIView 类似
UITextField *textField = [[UITextField alloc] init];
textField.layer.cornerRadius = cornerRadius;

UITextView

// 与 UIView 类似
UITextView *textView = [[UITextView alloc] init];
textView.layer.cornerRadius = cornerRadius;

UILabel

UILabel *label = [[UILabel alloc] init];
// 重点在此！！设置视图的图层背景色，千万不要直接设置 label.backgroundColor
label.layer.backgroundColor = [UIColor grayColor].CGColor;
label.layer.cornerRadius = cornerRadius;

UIButton

//无背景图片，与 UIView 类似
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.backgroundColor = [UIColor redColor];
btn.layer.cornerRadius = 8.0f;

//有背景图片，如果是复杂的图片，可以依靠 UI 切图来实现
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage:image forState:UIControlStateNormal];

UIImageView

贝塞尔曲线切割圆角(UIImageView添加分类)

- (UIImageView *)roundedRectImageViewWithCornerRadius:(CGFloat)cornerRadius {
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:cornerRadius];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = bezierPath.CGPath;
    self.layer.mask = layer;

    return self;
}

图片切割圆角(UIImage添加分类)

- (UIImage *)circleImage
{
    // NO代表透明
    UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0);
    // 获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 添加一个圆
    CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
    CGContextAddEllipseInRect(ctx, rect);
    // 裁剪
    CGContextClip(ctx);
    // 将图片画上去
    [self drawInRect:rect];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    // 关闭上下文
    UIGraphicsEndImageContext();
    return image;
}

当一个页面只有少量圆角图片时才推荐使用

UIImageView *imageView = [[UIImageView alloc] init];
imageView.layer.cornerRadius = 5.f;
imageView.layer.masksToBounds = YES;

屏幕截屏

UIGraphicsBeginImageContextWithOptions(self.view.bounds.size, NO, 0);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //把控件上的图层渲染到上下文，layer只能渲染
    //[self.view.layer drawInContext:ctx];
    [self.view.layer renderInContext:ctx];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();