Swift
dashed line
iOS development
SwiftUI
programming tutorial

How to make a dashed line in swift?

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Introduction

In Swift, a dashed line is usually drawn either with Core Graphics in draw(_:) or with a CAShapeLayer. Both approaches work, but CAShapeLayer is often the cleaner choice for reusable UI because it integrates well with layers, animations, and Auto Layout updates. The key property in both approaches is the dash pattern itself: alternating dash and gap lengths.

Use CAShapeLayer for a Reusable Dashed Line

A CAShapeLayer is a good default for UIKit views because it draws efficiently and is easy to restyle.

swift
1import UIKit
2
3final class DashedLineView: UIView {
4    private let shapeLayer = CAShapeLayer()
5
6    override init(frame: CGRect) {
7        super.init(frame: frame)
8        configure()
9    }
10
11    required init?(coder: NSCoder) {
12        super.init(coder: coder)
13        configure()
14    }
15
16    private func configure() {
17        shapeLayer.strokeColor = UIColor.systemBlue.cgColor
18        shapeLayer.lineWidth = 2
19        shapeLayer.lineDashPattern = [6, 4]
20        shapeLayer.fillColor = nil
21        layer.addSublayer(shapeLayer)
22    }
23
24    override func layoutSubviews() {
25        super.layoutSubviews()
26        let path = UIBezierPath()
27        path.move(to: CGPoint(x: 0, y: bounds.midY))
28        path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.midY))
29        shapeLayer.path = path.cgPath
30        shapeLayer.frame = bounds
31    }
32}

The lineDashPattern array means "draw 6 points, skip 4 points, repeat."

Why layoutSubviews Matters

A common bug is creating the dashed path once in init and then wondering why the line is wrong after Auto Layout changes the view size. The line path depends on bounds, so it should usually be updated in layoutSubviews().

That keeps the dashed line aligned with the view's actual size after constraints are resolved.

Draw With Core Graphics When Custom Drawing Fits Better

If you already have a custom drawing view, Core Graphics is also a solid option.

swift
1import UIKit
2
3final class CoreGraphicsDashedLineView: UIView {
4    override func draw(_ rect: CGRect) {
5        guard let context = UIGraphicsGetCurrentContext() else { return }
6
7        context.setStrokeColor(UIColor.systemRed.cgColor)
8        context.setLineWidth(2)
9        context.setLineDash(phase: 0, lengths: [8, 3])
10        context.move(to: CGPoint(x: 0, y: rect.midY))
11        context.addLine(to: CGPoint(x: rect.maxX, y: rect.midY))
12        context.strokePath()
13    }
14}

This is fine when the dashed line is part of a larger custom-drawn surface.

Vertical or Custom Paths

The same idea works for vertical lines or more complex shapes. Only the path changes.

swift
path.move(to: CGPoint(x: bounds.midX, y: 0))
path.addLine(to: CGPoint(x: bounds.midX, y: bounds.maxY))

You can also apply a dashed stroke to rectangles, dividers, borders, or more complex UIBezierPath shapes.

SwiftUI Note

If you are working in SwiftUI instead of UIKit, use a Shape or built-in stroke styling rather than a CAShapeLayer.

swift
1import SwiftUI
2
3struct DashedDivider: View {
4    var body: some View {
5        Rectangle()
6            .stroke(style: StrokeStyle(lineWidth: 2, dash: [6, 4]))
7            .frame(height: 1)
8            .foregroundColor(.blue)
9    }
10}

That is the SwiftUI-native approach and avoids mixing UIKit drawing patterns into a SwiftUI view tree.

Common Pitfalls

The most common mistake is drawing the path once and never updating it after the view's size changes.

Another issue is forgetting to set fillColor to nil on a CAShapeLayer when you only want a dashed stroke.

Developers also sometimes put the dashed layer creation in layoutSubviews() without guarding against duplicates, which keeps adding more sublayers every layout pass.

Finally, choose the drawing approach that matches the framework. CAShapeLayer fits UIKit well, while stroke styling is usually cleaner in SwiftUI.

Summary

  • Use CAShapeLayer for a clean reusable UIKit dashed line.
  • Update the path in layoutSubviews() so it matches the final view size.
  • Use Core Graphics when the dashed line is part of custom drawing code.
  • In SwiftUI, use stroke styling with a dash pattern.
  • The dash effect always comes from alternating dash and gap lengths in the stroke configuration.

Related reading
Free course
Beginner
7 lessons
2 hours
Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course
Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

All Rights Reserved.