Bezier curves are very handy to point to objects in your interface, for onboarding and help screens:

Create and edit arrows to light up your interface, with visual preview in Xcode Storyboard and Interface Builder.

In Interface Builder, position a BezierCurveView and drop two BezierCurveHandle inside it.

1. BezierCurveView represents the drawing space. It can be as large as the UIWindow to prevent curve clipping.
2. BezierCurveHandle represents the two handles required by a Cubic Bezier Curve. It adopts the BezierHandleProtocol, which provides control point information.

The combination BezierCurveView + 2 BezierCurveHandle yields live preview in Interface Builder, with unprecedented flexibility: . Because a BezierCurveHandle is itself a UIView, it can be controlled by AutoLayout constraints, and thus adapt automatically to changes in sizes and orientations, with exactly 0 lines of code. And since these handles are themselves extensions to the BezierHandleProtocol, you can tailor any of your UIView subclasses to control handles as well.

1. Make sure that a BezierCurveView contains exactly two subviews adopting BezierHandleProtocol for any drawing to take place
2. In most situations, BezierCurveView and BezierCurveHandle background color should be clear
3. BezierCurveView will be refreshed any time its frame is updated, providing dynamic animations: (replay)

(†) The bezier curve end point is adjusted to start from the end of the shape

Use Cocoapods or include the source file directly. Cocoapods preferred.

API Compatibility: version 4.x introduces BezierHandleProtocol, BezierHandleView and BezierCurveView, deprecating 3.x BezierCurveArrowView.

Run pod install in the BezierCurveExample directory, open BezierCurveExample.xcworkspace and run.

Search for BezierCurveView answers on Stack Overflow, or ask questions to be adressed by the community. You can also contact the author.