美文网首页IOS开发iOS知识
iOS 部分圆角+边框的实现

iOS 部分圆角+边框的实现

作者: Mokyz | 来源:发表于2018-10-23 09:48 被阅读25次

    部分圆角可以通过 layer 的 mask 属性实现。

    1. 创建 UIBezierPath

    关键参数 corners,由于是 NS_OPTIONS枚举,所以可以使用位运算来达到设置多个圆角。

    /* corners 的可能值
    typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
        UIRectCornerTopLeft     = 1 << 0,
        UIRectCornerTopRight    = 1 << 1,
        UIRectCornerBottomLeft  = 1 << 2,
        UIRectCornerBottomRight = 1 << 3,
        UIRectCornerAllCorners  = ~0UL
    };
    */
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:corners cornerRadii:CGSizeMake(cornerRadius, cornerRadius)];
    

    2. 创建 maskLayer

    view.layer.mask 属性会按照赋值的 layeralpha 通道来遮盖 viewlayer,即 alpha 为0的部分会被隐藏。

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = view.bounds;
    maskLayer.path = path.CGPath;
    view.layer.mask = maskLayer;
    

    如果在添加了部分圆角之后,如果想要添加边框,就不能使用 view.layer.cornerRadius 属性来实现,圆角部分会被裁剪。可以通过添加一层 subLayer 来实现。

    3. 创建边框 layer

    还可以通过修CAShapeLayerline 相关的属性,来改创建不同样式的边框。

    CAShapeLayer *borderLayer = [CAShapeLayer layer];
    borderLayer.frame = view.bounds;
    borderLayer.path = path.CGPath;
    borderLayer.lineWidth = borderWidth;
    borderLayer.fillColor = [UIColor clearColor].CGColor;
    borderLayer.strokeColor = borderColor.CGColor;
    [view.layer addSublayer:borderLayer];
    

    4. 效果

    image.png

    相关文章

      网友评论

        本文标题:iOS 部分圆角+边框的实现

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