【Swift】.strokeとは？使い方や引数の意味、活用時の注意点までわかりやすく解説

2025年9月25日 2025年9月25日

SwiftUIで図形やパスに「枠線」を描きたいときに便利なのが .stroke です。

四角形や円などのシェイプに色や太さを指定して枠を付けられるので、UIデザインをシンプルに整えるときによく使われます。

この記事では .strokeの意味や基本的な使い方、主要な引数、活用時の注意点をわかりやすく解説します。

.stroke とは？

.stroke は SwiftUI のShapeに対して「枠線」を描画するための修飾メソッドです。

例えば Circle() や Rectangle() のような図形は、そのままでは「塗りつぶし（fill）」や「枠線（stroke）」を指定しないと何も見えません。

.fill → 図形を中身ごと塗りつぶす
.stroke → 図形の外周だけを線で描く

つまり .stroke を使うと、図形の輪郭線を好きな色や太さで描けるようになります。

具体例：円に枠線をつける

import SwiftUI

struct ContentView: View {
    var body: some View {
        Circle()
            .stroke(Color.blue, lineWidth: 5)
            .frame(width: 150, height: 150)
    }
}

import SwiftUI

struct ContentView: View {

var body: some View {

Circle()

.stroke(Color.blue, lineWidth: 5)

.frame(width: 150, height: 150)

}

このコードでは、青い5ptの枠線を持つ円が表示されます。

ポイントは .stroke(Color.blue, lineWidth: 5) の部分で、色と線の太さ を指定しています。

.frame を付けることで円の大きさを決められ、stroke はその外周に沿って線を引いてくれます。

指定の仕方と引数

.stroke にはいくつかの指定方法があります。代表的なのは以下の2種類です。

.stroke(Color, lineWidth:)
- 色と線の太さだけをシンプルに指定するパターン
- 例：.stroke(.red, lineWidth: 3)
.stroke(ShapeStyle, style: StrokeStyle)
- 線の端や結合部分、点線パターンなどを細かく制御できるパターン

主要な引数

StrokeStyle の主な引数は次の通りです。

引数	型	説明
lineWidth	CGFloat	線の太さ
lineCap	CGLineCap	線の端の形状（.butt / .round / .square）
lineJoin	CGLineJoin	線の交わり部分の形状（.miter / .round / .bevel）
miterLimit	CGFloat	線の尖り具合の制御（lineJoinが.miterの場合に有効）
dash	[CGFloat]	点線のパターン（線の長さと空白の長さを交互に指定）
dashPhase	CGFloat	点線の開始位置

これらを使えば「点線の円」「角丸の枠」などを柔軟に表現できます。

具体例：StrokeStyle を使った円

Circle()
    .stroke(
        Color.green,
        style: StrokeStyle(
            lineWidth: 4,
            lineCap: .round,
            lineJoin: .round,
            dash: [10, 5]
        )
    )
    .frame(width: 150, height: 150)

Circle()

.stroke(

Color.green,

style: StrokeStyle(

lineWidth: 4,

lineCap: .round,

lineJoin: .round,

dash: [10, 5]

)

.frame(width: 150, height: 150)

上記コードでは下記のような指定をしています。

Color.green
線の色を緑にする。
lineWidth: 4
線の太さを 4pt に設定。
lineCap: .round
線の端を丸くする。破線の区切れ目が角ばらず、丸みを帯びて描かれる。
lineJoin: .round
線と線がつながる角を丸くする（円では効果が分かりにくいが、多角形で有効）。
dash: [10, 5]
10pt 描画して 5pt 空ける破線パターンを繰り返す。

上記指定をすると下記のような図形を描くことができます。

.stroke と .fill の違い

アプリ開発し始めの時に、混乱しがちなのが .stroke と .fill の使い分け です。

.fill(Color.red) → 中身が赤い塗りつぶしの円になる
.stroke(Color.red, lineWidth: 3) → 輪郭だけ赤い3ptの円になる

もし「塗りつぶしと枠線を両方使いたい」場合は .overlay を組み合わせます。

具体例：塗りつぶしと枠線の両方を使う

Circle()
    .fill(Color.yellow)
    .overlay(
        Circle().stroke(Color.orange, lineWidth: 5)
    )
    .frame(width: 150, height: 150)

Circle()

.fill(Color.yellow)

.overlay(

Circle().stroke(Color.orange, lineWidth: 5)

)

.frame(width: 150, height: 150)

このコードでは「黄色で塗りつぶされた円の外周にオレンジ色の枠」が付きます。

.stroke の活用シーン

.stroke は様々な場面で活躍します。

図形をボタンやアイコンの枠として使うとき
点線や破線を表現してUIのアクセントをつけたいとき
グラフや進捗表示など、円形のインジケータを作るとき
塗りつぶしと組み合わせて「縁取り効果」を出したいとき

特に StrokeStyle を活用すると、オリジナルの装飾やUIデザインを作りやすくなります。

.stroke を使うときの注意点

便利な .stroke ですが、使うときにはいくつか注意があります。

枠線の内側／外側に太さが分かれる
.stroke は図形の中心を基準に線を描くため、太さを大きくすると内側・外側の両方に広がります。ピクセル単位で正確に制御したい場合は strokeBorder を検討してください。
塗りつぶしとは別扱い
.stroke だけでは中身が透明のままなので、「枠だけ表示」になります。塗りつぶしも必要なら .fill や .overlay を併用しましょう。
小さすぎる図形では線がつぶれる
線の太さが大きい場合、図形のサイズが小さいと枠だけで中身が埋まってしまうことがあります。.frame でサイズを十分に確保しましょう。