シートUIの上端にある細い横線（つまみ）の表示をコントロールできるのが .presentationDragIndicator(_:) です。
ユーザーに「ここをドラッグすると高さを変えられる／下にスワイプで閉じられる」というヒントを与える役割があり、.sheet と組み合わせて使います。
.presentationDetents で高さを段階指定している場合に特に効果的です。
.presentationDragIndicator(_:)とは？
.presentationDragIndicator(_:) は、シートのドラッグインジケータの表示モードを指定するSwiftUIの修飾子です。
指定できるモードは次の3種類です。
.visible：常に表示して、ドラッグ可能であることを明示します。.hidden：常に非表示にして、視覚ノイズを抑えます。.automatic：システムが状況に応じて表示・非表示を判断します。
.presentationDragIndicator(_:) はiOS 16以降で利用できます。
インジケータは見た目の手がかりであり、これ自体はタッチ領域やドラッグ可否を変えません。
使い方
まず最小構成での使い方を説明します。
.sheet の中で表示するビューに対して修飾子を付けるだけで機能します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
struct ContentView: View { @State private var show = false var body: some View { Button("シートを開く") { show = true } .sheet(isPresented: $show) { SheetView() .presentationDetents([.medium, .large]) // 高さ候補 .presentationDragIndicator(.visible) // つまみを常に表示 } } } struct SheetView: View { var body: some View { VStack(spacing: 16) { Text("ドラッグで高さを切り替えられます") Text("下スワイプで閉じることも可能です") Spacer() } .padding() } } |
この指定により、ユーザーは上端のインジケータを“手掛かり”にしてドラッグ操作に気づきやすくなります。
具体例
ここでは実務で役立つ3パターンを紹介します。コードの後に、どんなときに有効かも説明します。
1. 部分シートで操作を促したい（.visible）
高さをスナップで切り替えるUIでは、visibleではっきり表示するのが親切です。
|
1 2 3 4 5 6 |
.sheet(isPresented: $show) { SheetView() .presentationDetents([.fraction(0.3), .medium, .large]) .presentationDragIndicator(.visible) // 高さ変更の取っ掛かりを明示 } |
使いどころ
検索フィルタやコメントパネルなど、「まずは小さく出す → 必要に応じて広げる」設計で、ユーザーに操作を学習してもらいやすくなります。
2. 誤閉じを避けたいときに隠す（.hidden＋ロック）
「閉じられそう」な見た目のままだと誤操作が増えます。
見た目と挙動を揃えましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
struct EditorSheet: View { @Binding var hasUnsavedChanges: Bool var body: some View { Form { /* 入力フォーム */ } .presentationDetents([.fraction(0.3), .large]) .presentationDragIndicator(hasUnsavedChanges ? .hidden : .visible) .interactiveDismissDisabled(hasUnsavedChanges) // スワイプ閉じ自体を禁止 } } |
使いどころ
未保存データがある編集画面など、誤って閉じてほしくないケース。
インジケータを隠すだけでなく、.interactiveDismissDisabled(true) で挙動も一致させるのがポイントです。
3. システムに任せて自然に（.automatic）
迷ったらまずは自動。
状況に応じて最適化されます。
|
1 2 3 4 5 6 |
.sheet(isPresented: $show) { SheetView() .presentationDetents([.medium, .large]) .presentationDragIndicator(.automatic) // まずは自動で様子を見る } |
使いどころ
内容や端末によって最適解が変わりそうな初期段階。
まず .automatic で出し、ユーザーテスト結果に合わせて .visible / .hidden に調整します。
注意点
.presentationDragIndicator(_:) は便利な一方で、見た目と実際の挙動の不一致がユーザーの混乱を招きやすい点に注意しましょう。
.presentationDragIndicatorは見た目だけを変えます。ドラッグ可否や閉じ可否は変えません。閉じ動作を止めたいときは.interactiveDismissDisabledを併用してください。.sheetにのみ有効です。fullScreenCoverには効果がありません。.presentationDetentsと組み合わせる際は、“ドラッグできそう”な表示が実際の挙動と矛盾しないようにしましょう。- 対象は iOS 16以降。それ以前をサポートする場合は代替のUI設計（ボタン誘導など）を検討します。
まとめ
.presentationDragIndicator(_:) は、シートの「ドラッグできる手掛かり」を提供し、ユーザーの操作発見性を高める小さなパーツです。
まずは .automatic で様子を見て、操作を促したいときは .visible、誤閉じを避けたいときは .hidden と .interactiveDismissDisabled を併用する、という使い分けが実践的です。
.presentationDetents や背景・背面操作の各修飾子と組み合わせ、見た目・操作・干渉範囲を一貫して設計しましょう。
参考リンク
- presentationDragIndicator(_:) | Apple Developer Documentation
- presentationDetents(_:) | Apple Developer Documentation
- interactiveDismissDisabled(_:) | Apple Developer Documentation
- presentationBackground(_:) | Apple Developer Documentation
- presentationBackgroundInteraction(_:) | Apple Developer Documentation