[iOS/UI] UIBezierPath 쉽게 사용하기 (feat. EasierPath)

 

안녕하세요 Foma 💻  입니다!

 

오늘은 직접 원하는 모양을 그릴 수 있는 UIBezierPath를 더욱 쉽게 사용할 수 있는 EasierPath에 대해서 알아 보겠습니다.

 

바로 시작할게요~!

---

UIBezierPath

 

평소에 원하는 모양을 직접 커스텀해서 그릴 때 UIBezierPath를 자주 사용 했었는데요.

 

먼저 UIBezierPath를 이용해서 항아리 모양을 그리는 코드를 작성해 보겠습니다.

 

 

1. UIBezierPath 인스턴스를 생성해 그려준다.

 

        let bezierPath:UIBezierPath = UIBezierPath()
        bezierPath.move(to: CGPoint(x: 100, y: 100))
        bezierPath.addLine(to: CGPoint(x: 200, y: 100))
        bezierPath.addCurve(to: CGPoint(x: 200, y: 300), controlPoint1: CGPoint(x: 250, y: 150), controlPoint2: CGPoint(x: 175, y: 250))
        bezierPath.addLine(to: CGPoint(x:100,y:300))
        bezierPath.addCurve(to: CGPoint(x: 100, y: 100), controlPoint1: CGPoint(x: 125, y: 250), controlPoint2: CGPoint(x: 50, y: 150))
        bezierPath.close()

 

2. CAShapeLayer의 path를 UIBezierPath.cgPath로 지정하고, 원하는 스타일을 지정한다.

 

        let caShapeLayer:CAShapeLayer = CAShapeLayer()
        caShapeLayer.path = bezierPath.cgPath
        caShapeLayer.strokeColor = UIColor.white.cgColor
        caShapeLayer.fillColor = UIColor.systemPink.cgColor
        caShapeLayer.lineWidth = 3

 

3. view의 subLayer에 추가해 준다.

 

        view.layer.addSublayer(caShapeLayer)

---

UIBezierPath의 단점

 

위 코드를 작성하는데 UIBezierPath는 몇 가지 단점이 있었습니다.

 

1. 선을 추가할 때의 끝 지점을 머릿 속으로 기억해야 한다.

 

선이나 곡선을 그릴 때 전에 어느 지점에서 끝났는지를 기억하고 그에 맞게 지점을 정해 줘야 했는데요.

 

이것을 그릴 양이 많으면 많을 수록 기억 해야할 양이 많아지고, 코드를 통해 확인 하기가 너무 불분명 했습니다.

 

2. 시작 지점이 달라지면 모든 지점을 수정해 줘야 한다.

 

각 선이나, 곡선을 그리는 지점은 시작 지점을 기준으로 그려주기 때문에 만약 시작 지점이 달라진다면 모든 선의 지점을 변경해 줘야 했습니다.

 

만약 그렇게 하지 않기 위해선 특정 변수를 사용해 값을 담은 다음에 지정해 주면 되었지만 이것 또한 번거로운 일이었습니다.

 

3. CAShapeLayer나 UIView를 생성해 줘야 한다.

 

View에 UIBezierPath를 띄우기 위해선 CAShapeLayer를 생성해 만든 경로를 지정해 주거나,

 

UIView를 생성하여 draw메서드에 직접 그려줘야 하는 번거로움이 있었습니다.

---

EasierPath

 

EasierPath는 위 UIBezierPath의 단점들을 보완하고 더욱 직관적으로 사용할 수도록 만든 라이브러리 입니다.

 

(사용해 보시고 Star⭐️  한번씩만 부탁 드립니다 ㅎㅎ)

 

GitHub - UISugar/EasierPath: To make it easier to use UIBezierPath ⚡️

 

위에서 그린 항아리 모양을 EasierPath를 사용해 그려 보겠습니다.

 

 

1. EasierPath 인스턴스를 생성해 그려준다.

 

 let easierPath = EasierPath(100,100)
            .right(100)
            .curve(to: .down(200), .bezier(.rightDown(50,50), .leftDown(25,150)))
            .left(100)
            .curve(to:.up(200), .bezier(.rightUp(25,50), .leftUp(50,150)))

 

2. 원하는 스타일을 Layer를 만들어 준다.

 

    let layer = easierPath.makeLayer(lineWidth:3,lineColor: .white,fillColor:.systemPink)

 

3. view의 subLayer에 추가해 준다.

 

        view.layer.addSublayer(layer)

---

UIBezierPath 단점 보완

 

1. 선을 추가할 때 끝 지점을 기억하지 않아도 된다.

 

위 EasierPath를 사용하면 전에 어느 지점에서 끝났는지를 굳이 기억하지 않고, 어느 방향으로 선을 그릴 것인지만 지정해 주면 됩니다.

 

2. 시작 지점이 달라 지더라도 코드는 그대로다.

 

시작 지점이 달라지더라도 해당 지점을 기준으로 방향에 따라 그리기 때문에 각 지점을 변경해 줄 필요가 없습니다.

 

3. makeLayer 메서드를 사용해 Layer를 만든다.

 

굳이 CAShapeLayer나 UIView를 생성해 주지 않아도 EasierPath 내의 makeLayer 메서드를 사용해 style을 지정해 주면 layer를 만들어 줄 수 있습니다.

---

이렇게 오늘은 UIBezierPath의 단점을 보완해 사용하기 쉽게 제가 직접 만든 라이브러리인 EasierPath에 대해 글을 정리해 보았는데요.

 

EasierPath를 더욱 쉽고, 간결하게 또는 고칠 부분이 있다면 언제든 Issue와 Pull Request는 환영입니다!!

 

또한 UI를 사용하기 쉽고, 효율적인 라이브러리를 만들어 나가는 UISugar⚡️ Organization을 만들게 되었는데요.

 

함께 하고 싶은 분이 계시다면 댓글 또는 pull request를 날려주세요!