728x90
도형을 직접 만들어야 한다면 베지어 곡선 (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)
점선 그리기
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를 연결해준다.
이런식으로 속성 설정을 해주면 점선이 된다!
728x90
'iOS > iOS' 카테고리의 다른 글
UITextField (0) | 2022.11.28 |
---|---|
UIView에 shadow 넣기 (0) | 2022.11.23 |
UICollectionView (0) | 2022.11.04 |
DateFormatter (0) | 2022.11.03 |
UIPickerView (0) | 2022.11.02 |
댓글