この記事では、SwiftUIでのドラッグジェスチャー(DragGesture)によるスワイプ(Swipe)動作の実装方法を紹介します。
左から右へスワイプすると、スイッチがONになり、右から左へスワイプするとOFFになる動作です。
◆動作検証環境
・ローカル環境：mac Catalina
・XCode：12.3
・SwiftUI：2.0
・iOS：14.0
・XCode：12.3
・SwiftUI：2.0
・iOS：14.0
スポンサードリンク
SwiftUIでのドラッグジェスチャー(DragGesture)によるスワイプ(Swipe)動作の実装コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import SwiftUI struct SwipeTest: View { @State var isOn = false @State var swipeWidth = UIScreen.main.bounds.width - 100 @State var offset : CGFloat = 0 var body: some View { VStack{ Text("SWITCH: \(isOn ? "ON" : "OFF")") .font(.title) .fontWeight(.bold) ZStack{ Capsule() .fill(Color.primary.opacity(0.1)) if !isOn{ Text("SWIPE TO ON") .fontWeight(.bold) } HStack{ Capsule() .fill(Color.red) .frame(width:caluculateWidth() + 80) Spacer() } if isOn{ Text("SWIPE TO OFF") .foregroundColor(.white) .fontWeight(.bold) } HStack{ ZStack{ Circle() .fill(isOn ? Color.red : Color.orange) .frame(width: 80, height: 80) ZStack{ HStack(spacing:0){ Image(systemName: isOn ? "chevron.left" : "chevron.right") Image(systemName: isOn ? "chevron.left" : "chevron.right") } .foregroundColor(.white) } } .offset(x:offset) .gesture(DragGesture().onChanged( isOn ? onChangedOn(value:) : onChangedOff(value:)).onEnded(isOn ? onEndedOn(value:) : onEndedOff(value:))) Spacer() } } .frame(width: swipeWidth, height: 80) } } func caluculateWidth() -> CGFloat{ let percent = offset / swipeWidth return percent * swipeWidth } func onChangedOff(value: DragGesture.Value){ if value.translation.width > 0 && offset <= swipeWidth - 80{ offset = value.translation.width } } func onChangedOn(value: DragGesture.Value){ offset = (swipeWidth - 80) + value.translation.width } func onEndedOff(value: DragGesture.Value){ withAnimation(Animation.easeOut(duration: 0.5 )){ if offset > 100 { offset = swipeWidth - 80 isOn = true }else{ offset = 0 } } } func onEndedOn(value: DragGesture.Value){ withAnimation(Animation.easeOut(duration: 0.5 )){ if offset < 80 { offset = 0 isOn = false }else{ offset = swipeWidth - 80 } } } } |
以上、SwiftUIでのドラッグジェスチャー(DragGesture)によるスワイプ(Swipe)動作の実装方法を紹介しました。