[SwiftUI] Swipe を検知する .swipeActions の使い方

SwiftUI2021

iOS15/macOS12 からサポートされる .swipeActions について説明します。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Monterey beta 12
  • Xcode 13 beta5
  • iOS 15

iOS14/macOS11 での スワイプサポート

iOS14/macOS11 以前では、スワイプ操作は直接にはサポートされていませんでした。

以下の記事は、DragGesture を使ったスワイプ検知です。
[SwiftUI] Swipeの検知と実装

.swipeActions

iOS15/macOS12 からサポートされる View Modifier です。

スワイプ動作を検知して、対応した操作を定義できます。

Apple のドキュメントは、こちら

注意
スワイプを検知して動作するためには、以下が条件となっています。

  • List 内の要素である
  • .swipeActions の content として、Button が使用されている(複数可)

iOS での例

以下は、iOS15 で動作を確認したコードです。


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2021/10/14
//  © 2021  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            // (1)
            Text("Hello, world!")
                .swipeActions(edge: .leading, allowsFullSwipe: false, content: {
                    Button(action: {print("Button")}, label: { Image(systemName: "1.square")})
                })
            // (2)
            Text("Hello, world!")
                .swipeActions(edge: .leading, allowsFullSwipe: false, content: {
                    Button(role: .destructive, action: {print("Button")}, label: { Image(systemName: "1.square")})
                    Button(role: .cancel,      action: {print("Button")}, label: { Image(systemName: "2.square")})
                    Button(role: .none,        action: {print("Button")}, label: { Image(systemName: "3.square")})
                    Button(                    action: {print("Button")}, label: { Image(systemName: "4.square")})
                })
            // (3)
            Text("Hello, world!")
                .swipeActions(edge: .leading, allowsFullSwipe: false, content: {
                    Button(action: {print("Button")}, label: { Image(systemName: "1.square")}).tint(.red)
                    Button(action: {print("Button")}, label: { Image(systemName: "2.square")}).tint(.yellow)
                    Button(action: {print("Button")}, label: { Image(systemName: "3.square")}).tint(.blue)
                    Button(action: {print("Button")}, label: { Image(systemName: "4.square")})
                })
            // (4)
            Text("Swipe does not work")
                .swipeActions(edge: .leading, allowsFullSwipe: false, content: {
                    Text("Memo1").tint(.red)
                    Text("Memo2").tint(.yellow)
                })
        }
        .padding()
     }
}
コード解説
  1. .swipeActions の edge でどちらのエッジからのスワイプを対象とするか、allowsFullSwipe でスワイプ時のデフォルトアクションを設定することができます
    SimpleSwipe

  2. .swipeActions の content に設定する Button の role 設定を行うことで、表示色が変わります
    SwipeWithRoledButton

  3. Button に tink カラーを設定することでも表示色を変更することができます
    SwipeWithTintButton

  4. content が Button ではないために、スワイプ操作に反応しません(コンパイルは通ります)

macOS での例

上記のコードは、macOS でも動くはずなのですが、動作しません(macOS12 beta12 時点)。

「List 内の要素でのみ動作する」、「content には、Button が必要である」という制約は、ドキュメントに記載されているのですが、それ以外の制約については記載されておらず、上記のコードで動かない理由はドキュメントからは読み取れません。

# NavigationView を使った 3カラム であれば動くという情報もあるようですが、確認していません。

まとめ:.swipeActions の使い方

.swipeActions の使い方
  • .swipeActions でスワイプ時の動作を指定することができる
  • List 内の要素にのみ指定できる
  • .swipeActions の content には、Button のみ有効である

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です