Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you what are the basic gestures of SwiftUI. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

In SwiftUI, we can make our applications more interactive by adding different interactions that respond to our clicks, clicks, and swipes.

SwiftUI basic gesture:

TapGesture

Tapping gestures enable us to recognize one or more taps on the View. We have several ways to add click gestures.

The first is to use the .onTapGesture modifier directly.

Circle () .onTapGesture {/ / Respond to TapGesture}

The other option used in the SwiftUI document is to create a gesture and configure it as an attribute, and then use it with the .gesture (_: include:) modifier.

Note: in order to perform an action or respond to a tap, we need to turn it off using the .onEnded operation, which is triggered at the end of the gesture.

Struct SingleTapGestureView: View {var singleTap: some Gesture {TapGesture () .onEnded {_ in / / Respond to TapGesture}} var body: some View {Circle () .gesture (singleTap)}}

In fact, I prefer the second approach because we can create different gestures and reuse them through our code.

So, if we put the code together, we can start writing something similar.

Struct TapGestureView: View {@ State private var isAnimating = false @ State private var tapped1x = 0 var singleTap: some Gesture {TapGesture () .onEnded {_ in tapped1x + = 1 withAnimation (Animation.easeOut (duration: 0.5)) {self.isAnimating = true} DispatchQueue .main.asyncAfter (deadline: .now () + 0.5) {self.isAnimating = false} var body: some View {VStack {Text ("Tapped 1x:\ (tapped1x) times") .font (.caption) Circle () .frame (width: 80 Height: 80) .foreground Color (.orange) .overlay (Text ("1x") .fontWeight (.medium) .background (Circle () .strokeBorder (Color.blue) LineWidth: 3) .scaleEffect (isAnimating? 1.5: 1) .opacity (isAnimating? 0: 1) .gesture (singleTap)}

Similarly, we only need to use the TapGesture (count:Int) initialization program to control the number of responses.

In this case, you need to click 3 times to trigger the .onEnded operation to close.

Struct TapGesture3xView: View {@ State private var isAnimating = false @ State private var tapped3x = 0 var multipleTap: some Gesture {TapGesture (count: 3) .onEnded {_ in tapped3x + = 1 withAnimation (Animation.easeOut (duration: 0.5)) {self.isAnimating = true} DispatchQueue.main.asyncAfter (deadline: .now () + 0.5) {self.isAnimating = false} var body: some View {VStack {Text ("Tapped 3X:\ (tapped3x) times") .font (.caption) Circle () .frame (width: 80 Height: 80) .foreground Color (.orange) .overlay (Text ("3X") .fontWeight (.medium) .background (Circle () .strokeBorder (Color.blue) LineWidth: 3) .scaleEffect (isAnimating? 1.5: 1) .opacity (isAnimating? 0: 1) .gesture (multipleTap)} long press gesture

Long-press gestures allow us to perform actions after the user has pressed for a long time and within the long-pressed time for the user.

We can set a minimum duration to identify our long press gestures. It can be set in the LongPressGesture initialization program.

LongPressGesture (minimumDuration: 2)

We can then use the .uppress method to perform the action during the long press and .onEnded to perform the action when our gesture is recognized.

In this example, I will update the size and color of Circle () during the long press operation, and when I recognize the gesture, I will display "text completed."

In addition, I'm using the GestureState property wrapper here, which is set to true during the long press and to false at the end of the gesture. I am using this property wrapper for example animation.

Struct LongPressGestureView: View {@ GestureState private var isLongPressDetected = false @ State private var isDone = false var longPress: some Gesture {LongPressGesture (minimumDuration: 2) .upstream ($isLongPressDetected) {currentState, gestureState Transaction in DispatchQueue.main.async {isDone = false} gestureState = currentState transaction.animation = Animation.easeIn (duration: 2)} .onEnded {done in isDone = done}} var body: some View { VStack {Spacer () Circle () .frame (width: 10 Height: 10) .foreground Color (isLongPressDetected? .orange: .primary) .scaleEffect (CGSize (width: isLongPressDetected? 10: 1) Height: isLongPressDetected? 10: 1) Spacer () if isLongPressDetected {Text ("Updating...")} if isDone {Text ("Done")} Spacer () Text ( "LongPress 2 sec") .padding () .background (isLongPressDetected? Color.green: Color.orange) .cornerRadius (16) .gesture (longPress)} drag gesture

Drag gestures allow us to perform actions as we drag the view.

We can take advantage of and use the .onChanged and .onEnded close methods to perform certain operations. Both of these methods provide us with an excellent property DragGesture.Value, which stores the following drag action information:

Location

PredictedEndLocation

PredictedEndTranslation

StartLocation

Time

Translation

We can use this property to create a removable view. In the current example, I use the .onChanged method to update the Circle () location coordinates.

Struct DragGestureView: View {@ State private var location: CGPoint = CGPoint (x: 100,100) var drag: some Gesture {DragGesture (minimumDistance: 1, coordinateSpace: .local) .onChanged {value in location = value.location}} var body: some View {Circle () .frame (width: 100) Height: 100) .foreground Color (.orange) .position (location) .gesture (drag)}}

Here, the .onEnded method is added to reset the Circle () position coordinates after the drag is over.

Struct DragGestureView: View {@ State private var location: CGPoint = CGPoint (x: 100,100) var drag: some Gesture {DragGesture (minimumDistance: 1, coordinateSpace: .local) .onChanged {value in location = value.location} .onEnded {value in withAnimation (.easeOut) {location = CGPoint (x: 100) Y: 100)} var body: some View {Circle () .frame (width: 100,100) .foreground Color (.orange) .position (location) .gesture (drag)}} enlarge the gesture

When we apply zooming in on View, magnifying gestures allow some actions to be made.

Here, there are .onChanged and .onEnded closures, which we can use to respond during or at the end of the zooming action. As an attribute, you receive the MagnificationGesture.Value of CGFloat. We can use this as an example to change the view size.

Struct MagnificationGestureView: View {@ State var magnifiedValue: CGFloat = 1.0 var magnification: some Gesture {MagnificationGesture () .onChanged {value in magnifiedValue = value} .onEnded {value in magnifiedValue = 1.0}} var body: some View {Circle () .frame (width: 100 * magnifiedValue Height: 100 * magnifiedValue) .foreground Color (.orange) .gesture (magnification) .rotation (.easeOut)} rotation gesture

The rotation gesture allows you to rotate the view and respond with certain actions during and at the end of the rotation.

It also provides us with .onChanged and .onEnded closures, which provide us with RotationGesture.Value, which represents the gesture Angle value. We can use this value to rotate the view.

Struct RotationGestureView: View {@ State private var angle = Angle (degrees: 0.0) @ State private var backgroundAngle = Angle (degrees: 0.0) var rotation: some Gesture {RotationGesture () .onChanged {angle in self.angle = angle} .onEnded {angle in withAnimation (Animation.spring ()) { Self.backgroundAngle = angle} var body: some View {Rectangle () .frame (width: 150 Height: 150, alignment: .center) .foreground Color (.orange) .rotationEffect (self.angle) .gesture (rotation) .background (Rectangle () .shadow (color: .primary, radius: 10, x: 0.0) Y: 0.01) .foreground Color (.secondary) .rotationEffect (backgroundAngle)}} these are the basic SwiftUI gestures that the editor has shared with you. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.