Dashed line border around a UIView

Asif newaz
2 min readJan 2, 2020

--

Create a rectangular dashed line around UIView using story board in swift.

While designing any application we may need to implement or design a view with dotted border or dashed line border like money receipt or ticket etc.

Today, we will implement dashed line border around a UIView with story board.

Step 1: Add this designable class inside the project.

Designable class

Now, how this file draw dashed line!! 🤨 well to know this we need to look inside the class. Here we are overriding layoutSubviews(). We are creating CAShapeLayer, with specifying line width, stroke colour, line Dash Pattern and at the end adding this shape layer to the UIView layer as sublayer.

Step 2: Move to story board

Now, move to storyboard file, add a UIView from object library to ViewController. Add “RectangularDashedView” class from identity inspector of the desired UIView.

From attributes inspector width, colour, length & space between dashed line can be specified.

Thats it! now built and run the project 😀.

To make life easier 😌 and for more extension and designable class check this out.

--

--