美文网首页#iOS#HeminWoniOS
View的任意圆角和边框

View的任意圆角和边框

作者: 离离乱惑 | 来源:发表于2017-07-26 11:35 被阅读103次

1.如果需要将UIView的4个角全部都为圆角,添加边框,做法相当简单,只需设置其Layer的cornerRadius、borderWidth、borderColor就可以了。

    UIView *view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    view.layer.cornerRadius = 25;
    view.layer.borderWidth = 1;
    view.layer.borderColor = [UIColor redColor].CGColor;
    [self.view addSubview:view];
圆角边框.png

2.如果要指定某几个角为圆角而别的不变时,最简单优雅的方案,就是使用UIBezierPath。

    UIView *view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:view];
    view.backgroundColor = [UIColor lightGrayColor];
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:UIRectCornerTopRight|UIRectCornerBottomLeft cornerRadii:CGSizeMake(25, 25)];
    CAShapeLayer *mask = [CAShapeLayer layer];
    mask.path = path.CGPath;
    view.layer.mask = mask;
任意圆角.png

其中,参数:(UIRectCorner)corners指定了需要成为圆角的角,使用“|”来组合。

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
    UIRectCornerTopLeft     = 1 << 0,
    UIRectCornerTopRight    = 1 << 1,
    UIRectCornerBottomLeft  = 1 << 2,
    UIRectCornerBottomRight = 1 << 3,
    UIRectCornerAllCorners  = ~0UL
};

3.给上面切了两个圆角的view增加边框。
如果直接设置borderWidth和borderColor,设置圆角的部分边线被贝塞尔曲线切掉。


圆角边线被切掉.png

解决思路:用UIBezierPath画好边框,在切圆角。
给view加了一个Category

- (void)applyRoundCorners:(UIRectCorner)corners radius:(CGFloat)radius
{
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(radius, radius)];
    
    CAShapeLayer *temp = [CAShapeLayer layer];
    temp.lineWidth = 2.f;
    temp.fillColor = [UIColor clearColor].CGColor;
    temp.strokeColor = [UIColor redColor].CGColor;
    temp.frame = self.bounds;
    temp.path = path.CGPath;
    [self.layer addSublayer:temp];
    
    CAShapeLayer *mask = [[CAShapeLayer alloc]initWithLayer:temp];
    mask.path = path.CGPath;
    self.layer.mask = mask;
}

使用示例:

    UIView *view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    view.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:view];
    [view applyRoundCorners:UIRectCornerTopRight|UIRectCornerBottomLeft radius:25];
最终效果.png

相关文章

  • View的任意圆角和边框

    1.如果需要将UIView的4个角全部都为圆角,添加边框,做法相当简单,只需设置其Layer的cornerRadi...

  • UIView任意角圆角和圆角边框

    圆角原理:设置view.layer.mask该遮罩层。 圆角边框:在view.layer 上增加一层,绘制圆角边框...

  • Android-->圆角图片,圆角任意View,圆角父布局

    相信大家对圆角图片已经非常熟悉了,但是圆角任意View,和圆角父布局,甚至是任意形状的View,肯定还是比较陌生的...

  • android view 圆角

    使用outlineProvider 即可实现view的圆角效果。不用绘制圆角背景边框,不用自定义view重新绘制实...

  • 知识点

    利用UIBezierPath和CAShapeLayer生成任意位置圆角设置view左上和右上圆角半径为20 2.l...

  • CALayer

    1. 获取View的CALayer 设置边框宽度 设置边框颜色 设置圆角 设置内容 Question: 这样设置完...

  • iOS切圆角

    任意view的子类都可以通过这两句来实现圆角, cornerRadius表示圆角的弧度 view.layer.c...

  • CSS边框圆角--跟着李南江学编程

    1.什么是边框圆角? 就是把矩形边框变成圆角边框,就叫做边框圆角。 2.设置边框圆角的格式 2.1 border-...

  • 25.边框圆角渐变

    边框 什么是边框圆角?将直角的边框变为圆角的边框 边框圆角的格式?border-radius: 左上 右上 右下 ...

  • iOS 常用宏定义(持续更新)

    常用宏定义 // 获取时间间隔(计算耗时) //是否为V以上系统 //设置 view 圆角和边框 // 系统del...

网友评论

    本文标题:View的任意圆角和边框

    本文链接:https://www.haomeiwen.com/subject/bemnkxtx.html