📝 점선이 화면에 뜨지 않는 이유
점선(dashLine)이 화면에 나타나지 않는 가장 큰 원인은 dashLineView의 높이 제약조건이 너무 작기 때문입니다.
- dashLineView.heightAnchor.constraint(equalToConstant: 1)
위 제약조건은 dashLineView의 높이를 1포인트로 설정하고 있습니다. 그런데 CAShapeLayer인 dashLine의 lineWidth는 4.0으로 설정되어 있죠. lineWidth가 dashLineView의 높이(1.0)보다 훨씬 크기 때문에, 선이 뷰의 경계를 벗어나 화면에 제대로 그려지지 않습니다. CAShapeLayer는 부모 뷰의 크기를 초과하여 그릴 수 있지만, clipping이 되거나 렌더링되지 않을 가능성이 높습니다.
따라서 dashLineView의 높이는 dashLine의 lineWidth와 같거나 커야 합니다.
🎨 점선(Dashed Line) 원리
점선은 UIBezierPath와 CAShapeLayer를 조합하여 그리는 방식입니다.
- CAShapeLayer: 그리기 작업을 담당하는 CALayer의 일종입니다. 선, 원, 다각형 등 모양을 그릴 때 사용됩니다.
- strokeColor: 선의 색상
- lineWidth: 선의 굵기
- lineDashPattern: 점선의 패턴을 결정하는 배열입니다. [4, 4]는 "4포인트 길이의 선을 그리고, 4포인트 길이의 간격을 띄운다"는 의미입니다. 이 패턴이 반복되면서 점선이 만들어집니다.
- path: 선의 모양과 경로를 정의하는 CGPath입니다.
- UIBezierPath: 그릴 선의 경로를 정의하는 클래스입니다.
- move(to:): 경로의 시작점을 지정합니다.
- addLine(to:): 시작점에서 끝점까지 직선을 그립니다.
- drawDashedLine() 메서드: layoutSubviews()에서 호출되는 이 메서드는 뷰의 크기가 확정된 후에 실행됩니다. 이 함수 안에서 UIBezierPath를 사용하여 선의 경로를 정의하고, 이 경로를 dashLine.path에 할당하면 CAShapeLayer가 해당 경로를 따라 선을 그려줍니다.
요약하면, UIBezierPath가 점선이 그려질 "위치와 모양"을 정의하고, CAShapeLayer가 점선의 "스타일(색, 굵기, 패턴)"을 담당하여 실제로 화면에 그리는 역할을 합니다.
✅ midY와 midX는 CGRect 또는 NSRect와 같은 사각형의 중간 지점을 나타내는 속성입니다. 뷰의 크기(bounds)가 주어졌을 때, 해당 사각형의 가로축 또는 세로축의 정중앙 좌표를 알려줍니다.
✅ CGRect 속성 설명
CGRect는 iOS와 macOS에서 뷰나 프레임의 위치와 크기를 정의하는 구조체입니다. 다음은 자주 사용되는 속성들입니다.
1. 위치 속성
- origin: 사각형의 좌측 상단 모서리 좌표를 나타내는 CGPoint 타입입니다.
- minX: 사각형의 좌측 x 좌표입니다. origin.x와 같습니다.
- midX: 사각형의 중앙 x 좌표입니다. origin.x + width / 2와 같습니다.
- maxX: 사각형의 우측 x 좌표입니다. origin.x + width와 같습니다.
- minY: 사각형의 상단 y 좌표입니다. origin.y와 같습니다.
- midY: 사각형의 중앙 y 좌표입니다. origin.y + height / 2와 같습니다.
- maxY: 사각형의 하단 y 좌표입니다. origin.y + height와 같습니다.
2. 크기 속성
- size: 사각형의 너비와 높이를 나타내는 CGSize 타입입니다.
- width: 사각형의 너비입니다.
- height: 사각형의 높이입니다.
예시를 통한 이해
만약 dashLineView의 bounds가 (0, 0, 300, 4)인 경우, 각 속성 값은 다음과 같습니다.
- bounds.origin.x = 0
- bounds.minX = 0
- bounds.midX = 150 (300 / 2)
- bounds.maxX = 300
- bounds.origin.y = 0
- bounds.minY = 0
- bounds.midY = 2 (4 / 2)
- bounds.maxY = 4
따라서 path.move(to: CGPoint(x: 0, y: dashLineView.bounds.midY))는 (0, 2) 지점에서 선 그리기를 시작합니다. 이는 dashLineView의 좌측 가장자리에서 높이의 정중앙 지점입니다.
path.addLine(to: CGPoint(x: dashLineView.bounds.width, y: dashLineView.bounds.midY))는 (300, 2) 지점까지 선을 그립니다. 이는 dashLineView의 우측 가장자리에서 높이의 정중앙 지점입니다.
결론적으로, 이 두 줄의 코드는 dashLineView의 중앙을 가로지르는 수평선을 그리는 역할을 합니다. midY를 사용하면 뷰의 높이가 바뀌더라도 항상 정중앙에 선을 그릴 수 있다는 장점이 있습니다.