iOSで点線・破線を描画する方法｜CAShapeLayerを使った実装手順を解説

iOS開発における点線・破線描画の重要性

iOSアプリ開発では、点線や破線を描画できることを知っておくことは非常に重要です。例えば、ユーザーに入力フィールドを求める画面を開発する際、入力エリアを点線で表現することで、直感的で分かりやすいUIを実現できます。また、点線はアプリ内の特定の要素を強調表示したい場合にも活用できます。

特に重要な用途として挙げられるのがナビゲーションアプリです。ナビゲーション機能を設計する際には、経路（パス）を描画する必要があり、その表現方法として破線を使用することがよくあります。

本記事では、iOSでこの機能を実現する具体的な方法を、ステップごとに詳しく解説していきます。

実装手順

ステップ1：プロジェクトの作成

Xcodeを開き、「New Project」→「Single View Application」を選択して、新しいプロジェクトを作成します。プロジェクト名は「DottedLine」としましょう。

ステップ2：StoryboardへのUIView追加

Main.storyboardにUIViewを配置し、@IBOutletとして接続します。アウトレット名は「dottedView」としてください。

ステップ3：UIView拡張の実装

ViewController.swiftに以下のextensionコードを追加します。この拡張により、任意のUIViewに対して簡単に点線を描画できるようになります。

extension UIView {
    func createDottedLine(width: CGFloat, color: CGColor) {
        let caShapeLayer = CAShapeLayer()
        caShapeLayer.strokeColor = color
        caShapeLayer.lineWidth = width
        caShapeLayer.lineDashPattern = [2,3]
        let cgPath = CGMutablePath()
        let cgPoint = [CGPoint(x: 0, y: 0), CGPoint(x: self.frame.width, y: 0)]
        cgPath.addLines(between: cgPoint)
        caShapeLayer.path = cgPath
        layer.addSublayer(caShapeLayer)
    }
}

このコードのポイントは、CAShapeLayerのlineDashPatternプロパティです。[2,3]という配列は、「2ポイント描画して3ポイント空ける」というパターンを意味しています。この値を変更すれば、点線の間隔や長さを自由に調整できます。

ステップ4：viewDidLoadからの呼び出し

次に、viewDidLoadメソッド内でdottedViewオブジェクトに対して上記の関数を呼び出します。

override func viewDidLoad() {
    super.viewDidLoad()
    self.dottedView.createDottedLine(width: 5.0, color: UIColor.cyan.cgColor)
}

ここで注目すべきは、線の太さ（width）と色（color）を引数として渡している点です。これにより、用途に応じて点線のスタイルを柔軟にカスタマイズできます。例えば、太さを変えればより目立つラインに、色を変えればデザインテーマに合わせた表現が可能です。

ステップ5：実行して結果を確認

アプリをビルドして実行すると、以下のようにシアン色の点線が描画されていることが確認できます。

まとめ

CAShapeLayerとlineDashPatternを組み合わせることで、わずか数行のコードで美しい点線・破線を描画できます。UIViewのextensionとして実装しておけば、プロジェクト内のどのビューからでも再利用可能になるため、フォーム入力画面や経路表示など、さまざまな場面で活用してみてください。