iOS 进阶UI设计之部分圆角、单边阴影、虚线边框、绘制虚线

当App做到一定程度时，UI设计就是要锱铢必较了，圆润丝滑的视觉设计会让人感觉更舒服，笔者总结了常见的几种UI设计的绘制方案，本质上就是在图层上进行一定的绘制。

部分圆角：
注意：使用下面方法时，iOS 11.0以下的系统，如果是自动布局，绘制之前必须让父类调用 layoutIfNeeded，确定好view的Frame。

/// 绘制部分圆角
/// @param rectCorner 圆角样式
/// @param radii 圆角
- (void)drawCornerWith:(UIRectCorner)rectCorner radii:(CGFloat)radii {
    self.layer.masksToBounds = YES;
    if (@available(iOS 11.0, *)) {
        self.layer.cornerRadius = radii;
        self.layer.maskedCorners = (CACornerMask)rectCorner;//bit位一致
    } else {
        // 设置路径
        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:rectCorner cornerRadii:CGSizeMake(radii, radii)];
        CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
        //maskLayer.frame = self.bounds;
        maskLayer.path = maskPath.CGPath;
        self.layer.mask = maskLayer;
    }
}

绘制单边阴影：

/// 绘制单边阴影
/// 如果是绘圆角阴影，masksToBounds不能设置Yes，会被切掉，没效果
/// @param offset 阴影偏移量
/// @param rectEdge 边
- (void)drawShadowWith:(CGFloat)offset rectEdge:(UIRectEdge)rectEdge {
    self.layer.shadowColor = [[UIColor blackColor] CGColor];
    self.layer.shadowOffset = CGSizeMake(0, 0.5);
    self.layer.shadowOpacity = 0.2;
    self.layer.shadowRadius = offset;
    // 单边阴影
    CGRect shadowRect = CGRectZero;
    switch (rectEdge) {
        case UIRectEdgeTop:
            // 上
            shadowRect = CGRectMake(0, -offset/2, self.bounds.size.width, offset);
            break;
        case UIRectEdgeLeft:
            // 左
            shadowRect = CGRectMake(-offset/2, 0, offset, self.bounds.size.height);
            break;
        case UIRectEdgeBottom:
            // 下
            shadowRect = CGRectMake(0, self.bounds.size.height - offset/2, self.bounds.size.width, offset);
            break;
        case UIRectEdgeRight:
            // 右
            shadowRect = CGRectMake(self.bounds.size.width - offset/2, 0, offset, self.bounds.size.height);
            break;
        case UIRectEdgeAll:
            // 全边
            shadowRect = self.bounds;
            break;
        default:
            break;
    }
    self.layer.shadowPath = [UIBezierPath bezierPathWithRect:shadowRect].CGPath;
}

绘制虚线边框：

/// 给view绘制虚线边框
/// @param lineWidth 虚线宽
/// @param lineColor 虚线颜色
- (void)drawDashedBorderWith:(CGFloat)lineWidth lineColor:(UIColor *)lineColor {
    CAShapeLayer *border = [CAShapeLayer layer];
    border.strokeColor = lineColor.CGColor;
    border.fillColor = nil;
    border.path = [UIBezierPath bezierPathWithRect:self.bounds].CGPath;
    border.frame = self.bounds;
    border.lineWidth = lineWidth;
    border.lineCap = @"square";
    // 设置线宽和线间距
    border.lineDashPattern = @[@4, @4];
    [self.layer addSublayer:border];
}

绘制虚线：

/// 将当前线绘制成虚线
/// @param lineLength 虚线的宽度
/// @param lineSpacing 虚线的间距
/// @param lineColor 虚线的颜色
/// @param isHorizonal 虚线的方向 YES 为水平方向，NO 为垂直方向
- (void)drawDashedWithLineLength:(NSInteger)lineLength lineSpacing:(NSInteger)lineSpacing lineColor:(UIColor *)lineColor lineDirection:(BOOL)isHorizonal {
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    [shapeLayer setBounds:self.bounds];

    if (isHorizonal) {
        [shapeLayer setPosition:CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame))];
    } else {
        [shapeLayer setPosition:CGPointMake(CGRectGetWidth(self.frame) / 2, CGRectGetHeight(self.frame) / 2)];
    }
    
    [shapeLayer setFillColor:[UIColor clearColor].CGColor];
    // 设置虚线颜色
    [shapeLayer setStrokeColor:lineColor.CGColor];
    
    // 设置虚线宽度
    if (isHorizonal) {
        [shapeLayer setLineWidth:CGRectGetHeight(self.frame)];
    } else {

        [shapeLayer setLineWidth:CGRectGetWidth(self.frame)];
    }
    
    [shapeLayer setLineJoin:kCALineJoinRound];
    // 设置线宽，线间距
    [shapeLayer setLineDashPattern:@[[NSNumber numberWithInteger:lineLength], [NSNumber numberWithInteger:lineSpacing]]];
    // 设置路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 0, 0);

    if (isHorizonal) {
        CGPathAddLineToPoint(path, NULL,CGRectGetWidth(self.frame), 0);
    } else {
        CGPathAddLineToPoint(path, NULL, 0, CGRectGetHeight(self.frame));
    }

    [shapeLayer setPath:path];
    CGPathRelease(path);
    // 把绘制好的虚线添加上来
    [self.layer addSublayer:shapeLayer];
}