UIBezierPath

도형을 직접 만들어야 한다면 베지어 곡선 (BezierPath)를 이용할 수 있다.

베지에 곡선이란 n개의 점으로 만들어지는 직선 및 곡선을 말한다.

이 곡선을 이용하면 원하는 형태의 도형을 쉽게 그려낼 수 있다.

 

애플에서 제공되는 UIBezierPath를 이용한다.

 

가운데 뚫린 뷰

import UIKit

class MakePath: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.lineWidth = 1
        path.lineJoinStyle = .bevel
        path.usesEvenOddFillRule = true

        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 0, y: self.frame.size.height))
        path.addLine(to: CGPoint(x: self.frame.size.width, y: self.frame.size.height))
        path.addLine(to: CGPoint(x: self.frame.size.width, y: 0))
        path.close()
        UIColor.clear.set()
        path.fill()

        path.move(to: CGPoint(x: 24, y: (self.frame.size.height/2)-(212/2)))
        path.addLine(to: CGPoint(x: 24, y: ((self.frame.size.height/2)+(212/2))))
        path.addLine(to: CGPoint(x: self.frame.size.width - 24, y: ((self.frame.size.height/2)+(212/2))))
        path.addLine(to: CGPoint(x: self.frame.size.width - 24, y:  (self.frame.size.height/2)-(212/2)))
        path.close()

        UIColor.black.withAlphaComponent(0.7).set()
        path.fill()
    }
}

 

 

참고 :

https://developer.apple.com/documentation/uikit/uibezierpath/

https://zeddios.tistory.com/822?category=682195

 

cornerRadius 원하는 부분에만 적용

UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.myview.bounds byRoundingCorners:(UIRectCornerTopLeft | UIRectCornerTopRight) cornerRadii:CGSizeMake(25.0f, 25.0f)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.frame = self.myview.bounds;
maskLayer.path = maskPath.CGPath;
self.myview.layer.mask = maskLayer;

 

점선 테두리

var yourViewBorder = CAShapeLayer()
yourViewBorder.strokeColor = UIColor.black.cgColor
yourViewBorder.lineDashPattern = [2, 2]
yourViewBorder.frame = yourView.bounds
yourViewBorder.fillColor = nil
yourViewBorder.path = UIBezierPath(rect: yourView.bounds).cgPath
yourView.layer.addSublayer(yourViewBorder)

참고 : http://daplus.net/ios-uiview-%EC%A3%BC%EC%9C%84%EC%9D%98-%EC%A0%90%EC%84%A0-%EA%B2%BD%EA%B3%84%EC%84%A0/

 

점선 그리기

customView를 만들어주는 것이 제일 간단!

// .h
@interface DashLine : UIView
@property(nonatomic,strong)IBInspectable UIColor* dashLineColor;
@property(nonatomic,assign)IBInspectable NSInteger lineDotSpacing;
@property(nonatomic,assign)IBInspectable NSInteger lineDotWidth;
@property(nonatomic,assign,getter=isVertical)IBInspectable BOOL vertical;
@property(nonatomic,assign,getter=isCircleDot)IBInspectable BOOL circleDot;
@end

// .m
@implementation DashLine
- (void)drawRect:(CGRect)rect {
    CGFloat width = CGRectGetWidth(self.bounds);
    CGFloat height = CGRectGetHeight(self.bounds);
    CGFloat dashLineW = height;
    
    if (self.isVertical) {
        dashLineW = width;
    }
    
    if(self.lineDotWidth<=0) {
        if (self.isVertical) {
            self.lineDotWidth = width;
        } else {
            self.lineDotWidth = height;
        }
    }
    
    if (self.lineDotSpacing<=0) {
        if (self.isVertical) {
            self.lineDotSpacing = width/2.0f;
        } else {
            self.lineDotSpacing = height/2.0f;
        }
    }

    struct CGColor* strokeColor = [UIColor redColor].CGColor;
    if (self.dashLineColor) {
        strokeColor = self.dashLineColor.CGColor;
    }

    CGFloat thickness = 1;
    if (self.isVertical) {
        thickness = height;
    } else {
        thickness = width;
    }
    
    CGContextRef cx = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(cx, strokeColor);
    
    if (self.isCircleDot) {
        CGContextSetFillColorWithColor(cx,strokeColor);
        CGContextBeginPath(cx);
        NSInteger segmentLength = self.lineDotWidth +self.lineDotSpacing;
        NSInteger count = 0;
        CGFloat start = 0;
        if (self.isVertical) {
            count = height/segmentLength +1;
            start = (((NSInteger)height)% segmentLength)/2.0f;
        } else {
            count = width/segmentLength +1;
            start = (((NSInteger)width)% segmentLength)/2.0f;
        }
        
        for (int i=0;i<count;i++) {
            if (self.isVertical) {
                CGContextAddEllipseInRect(cx,CGRectMake(0, start, self.lineDotWidth, self.lineDotWidth));
            } else {
                 CGContextAddEllipseInRect(cx,CGRectMake(start, 0, self.lineDotWidth, self.lineDotWidth));
            }
            start += segmentLength;
        }
        CGContextFillPath(cx);
    } else {
        CGContextSetLineWidth(cx, thickness);
        CGFloat ra[] = {self.lineDotWidth,self.lineDotSpacing};
        
        CGContextSetLineDash(cx, 0.0, ra, 2); // nb "2" == ra count
        if (self.isVertical) {
            CGContextMoveToPoint(cx, thickness*0.5,0);
            CGContextAddLineToPoint(cx, thickness*0.5, height);
        } else {
            CGContextMoveToPoint(cx, 0,thickness*0.5);
            CGContextAddLineToPoint(cx, self.bounds.size.width, thickness*0.5);
        }
    }

    CGContextStrokePath(cx);
}

 

이렇게 DashLine 커스텀뷰를 생성해준 후

스토리 보드에서 뷰컨트롤러 위에 뷰를 올리고 DashLine class를 연결해준다.

이런식으로 속성 설정을 해주면 점선이 된다!