Skip to content

Swipe actions for any view, swipe menu based on SwiftUI, full swiping and RTL languages supporting, iOS 13+, add your own views to swipes

License

Notifications You must be signed in to change notification settings

c-villain/SwipeActions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

SwipeActions

Latest release

contact: @lexkraev Telegram Group

corner radius

Library for creating fully customizable swipe actions for any SwiftUI View, similar to Apple's swipeActions(edge:allowsFullSwipe:content:) that available from iOS 15 and only in List πŸ€·πŸΌβ€β™‚οΈ. You can use SwipeActions in project targeting iOS 13 with any view (e.g. Text or VStack).

πŸ‘¨πŸ»β€πŸ’» Feel free to subscribe to channel SwiftUI dev in telegram.

Requirements

  • iOS 13.0 or macOS 10.15

Comparison table

Features support This SPM Others
SwiftUI 🟒 🟒
SPM 🟒 🟒
MacOS 🟒 πŸ”΄
iOS 13.0 🟒 πŸ”΄
RTL Languages 🟒 πŸ”΄
FullSwipe Mode 🟒 πŸ”΄
Flexibility 🟒 🟑
Haptics 🟒 🟑
Ease of Use 🟒 πŸ”΄

Installation

Swift Package Manager

To integrate SwipeActions into your project using SwiftPM add the following to your Package.swift:

dependencies: [
    .package(url: "https://github.com/c-villain/SwipeActions", from: "0.1.0"),
],

or via XcodeGen insert into your project.yml:

name: YourProjectName
options:
  deploymentTarget:
    iOS: 13.0
packages:
  SwipeActions:
    url: https://github.com/c-villain/SwipeActions
    from: 0.1.0
targets:
  YourTarget:
    type: application
    ...
    dependencies:
       - package: SwipeActions

Types

Different types of menu:

  • .swiped
  • .slided

Example for .swiped and .slided menu

Both types can be upgraded with full swiping:

Example of full swipe with non-destructive role

Quick start

Adding both leading and trailing swipe actions:

Example with leading and trailing swipes

Use Leading { ... } and Trailing { ... } closures inside .addSwipeAction { ... } modifier:

import SwipeActions

struct YourView: View {
    
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(1...100, id: \.self) { cell in
                    Text("Cell \(cell)")
                        .frame(height: 50, alignment: .center)
                        .frame(maxWidth: .infinity)
                        .contentShape(Rectangle())
                        .addSwipeAction {
                            Leading { //<= HERE 
                                Button {
                                    print("edit \(cell)")
                                } label: {
                                    Image(systemName: "pencil")
                                        .foregroundColor(.white)
                                }
                                .frame(width: 60, height: 50, alignment: .center)
                                .contentShape(Rectangle())
                                .background(Color.green)

                            }
                            Trailing { //<= HERE 
                                HStack(spacing: 0) {
                                    Button {
                                        print("remove \(cell)")
                                    } label: {
                                        Image(systemName: "trash")
                                            .foregroundColor(.white)
                                    }
                                    .frame(width: 60, height: 50, alignment: .center)
                                    .contentShape(Rectangle())
                                    .background(Color.red)
    
                                    Button {
                                        print("Inform \(cell)")
                                    } label: {
                                        Image(systemName: "bell.slash.fill")
                                            .foregroundColor(.white)
                                    }
                                    .frame(width: 60, height: 50, alignment: .center)
                                    .background(Color.blue)
                                }
                            }
                        }
                }
            }
        }
    }
}
Adding several actions on the side:

Don't forget that your actions are subviews in general and buttons or smth else particularly. Please arrange them:

YourView()
.addSwipeAction(edge: .trailing) {
    HStack(spacing: 0) { // <= πŸ‘€ Look here 
        Rectangle()
            .fill(Color.green.opacity(0.8))
            .frame(width: 8.0, height: 80)
        
        Button {
        } label: {
            Image(systemName: "message")
                .foregroundColor(.white)
                .frame(width: 60, height: 80)
                .contentShape(Rectangle())
        }
        .background(Color.blue)
    }
}
Adding swipe actions to the one side of the view:

Example with trailing swipe menu

Use .addSwipeAction(edge: ) { ... } modifier, edge - a HorizontalAlignment value input parameter - with two cases of using .leading or .trailing

import SwipeActions

struct YourView: View {
    
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(1...100, id: \.self) { cell in
                    Text("Cell \(cell)")
                        .frame(height: 50, alignment: .center)
                        .frame(maxWidth: .infinity)
                        .contentShape(Rectangle())
                        .addSwipeAction(edge: .trailing) { // <= choose here .trailing or .leading
                            HStack(spacing: 0) {
                                Button {
                                    print("remove \(cell)")
                                } label: {
                                    Image(systemName: "trash")
                                        .foregroundColor(.white)
                                }
                                .frame(width: 60, height: 50, alignment: .center)
                                .contentShape(Rectangle())
                                .background(Color.red)
                                
                                Button {
                                    print("Inform \(cell)")
                                } label: {
                                    Image(systemName: "bell.slash.fill")
                                        .foregroundColor(.white)
                                }
                                .frame(width: 60, height: 50, alignment: .center)
                                .background(Color.blue)
                            }
                        }
                }
            }
        }
    }
}
For automatically closing other opened actions during sliding:

Example with auto closing swipe actions

Add SwipeState var to your View and pass it as a binding in .addSwipeAction(state:):

struct YourView: View {  
   @State var state: SwipeState = .untouched // <= HERE

   var body: some View {
        ScrollView {
             VStack(spacing: 2) {
                 ForEach(1 ... 30, id: \.self) { cell in
                     Text("Cell \(cell)")
                         .addSwipeAction(state: $state) { // <= HERE
                            ....
                         }
                  }
             }
        }
   }
}

Full swipe action

For full swipe use modifier .addFullSwipeAction(menu:swipeColor:swipeRole:state:content:action:)

Basically there are two main SwipeRole for full swipe action: .destructive (defaults) and other one.

.destructive

This role is used for closing/hiding/removing cell.

Example of full swipe with destructive role

struct YourView: View {  
   
   @State var range: [Int] = [1,2,3,4,5,6,7,8,9,10]

   var body: some View {
        ScrollView {
             VStack(spacing: 2) {
                 ForEach(range, id: \.self) { cell in
                     Text("Cell \(cell)")
                         .addFullSwipeAction(
                             menu: .slided,
                             swipeColor: .red) { // <= Color is the same as last button in Trailing for full effect 
                                  Leading { 
                                      ...
                                  }
                                  Trailing {
                                      ...
                                      
                                      Button {
                                          withAnimation { 
                                              if let index = range.firstIndex(of: cell) {
                                                  range.remove(at: index)
                                              }
                                          }
                                      } label: {
                                          Image(systemName: "trash")
                                              .foregroundColor(.white)
                                      }
                                      .contentShape(Rectangle())
                                      .frame(width: 60)
                                      .frame(maxHeight: .infinity)
                                      .background(Color.red) // <=== Look here
                                  }
                              } action: { // <= action for full swiping
                                  withAnimation {
                                      if let index = range.firstIndex(of: cell) {
                                          range.remove(at: index)
                                      }
                                  }
                              }
                  }
             }
        }
   }
}
.default

This role is used for making some action on cell.

Example of full swipe with non-destructive role

struct YourView: View {  ]

   var body: some View {
        ScrollView {
             VStack(spacing: 2) {
                 ForEach(1...10, id: \.self) { cell in
                     Text("Cell \(cell)")
                         .addFullSwipeAction(menu: .slided,
                                             swipeColor: .green, // <=== Color is the same as last button in Trailing for full effect 
                                             swipeRole: .defaults) {  // <=== Add this parameter
                                  Leading { 
                                      ...
                                  }
                                  Trailing {
                                      HStack(spacing: 0) {
                                          ...
                                          
                                          Button {
          
                                          } label: {
                                              Image(systemName: "trash")
                                                  .foregroundColor(.white)
                                          }
                                          .contentShape(Rectangle())
                                          .frame(width: 60)
                                          .frame(maxHeight: .infinity)
                                          .background(Color.green) // <=== Look here
                                      }
                                  }
                              } action: { // <=== action for full swiping
                                  ...
                              }
                  }
             }
        }
   }
}

Recommendations for use

With dynamic height content.

use .frame(maxHeight: .infinity)

YourView()
    .addSwipeAction(menu: .slided, edge: .trailing) {
        Button {
            ...
        } label: {
            Image("trash")
                .font(.system(size: 20.0))
                .foregroundColor(.white)
                .frame(width: 68, alignment: .center)
                .frame(maxHeight: .infinity) // <= Look here
                .background(.red)
        }
    }
With transparent colored views.

There is no restrictions or any recommendations for using with .slided type!

With .swiped use non-tranparent color layer or the same color with alfa = 1.0:

ForEach(1 ... 30, id: \.self) { cell in
   Text("Cell \(cell)")
       .padding()
       .frame(height: 80)
       .frame(maxWidth: .infinity)
       //.background(Color.green.opacity(0.2)) // <== ❌ DON'T USE SUCH WAY!
       //.background(Color(red: 0.841, green: 0.956, blue: 0.868)) // <== βœ… USE THIS WAY!
       .background( // <== OR THIS WAY!
           ZStack {
               Color(UIColor.systemBackground) // non-transparent color layer
               Color.green.opacity(0.2)
           }
       )
       .contentShape(Rectangle())
       .listStyle(.plain)
       .addSwipeAction(menu: .swiped, // <=== SWIPED TYPE
                       state: $state) {
           Leading {
           ...
           }
       }
       ...
 }
With List.

Basically if you have minimum deployments target for your app is iOS 15 I recommend to use Apple's swipe actions for List. Anyway you may use this.

Due to some features for working with List you should:

  • specify a frame for cell width, e.g. .frame(width: UIScreen.main.bounds.size.width - 32, height: 80) and a frame for buttons on swipe actions, e.g. .frame(width: 60, height: 80). Note that height in frames should be the same!

  • add modifier .onTapGesture { ... } for cell to override tapping on swipe action buttons

  • add modifier .listRowInsets(EdgeInsets()) for cell

List(elements) { e in
    Text(e.name)
        .frame(width: UIScreen.main.bounds.size.width - 32, height: 80) // <= HERE
        .background(Color(UIColor.systemBackground))
        .onTapGesture { // <=== HERE
            print("on cell tap!")
        }
        .addSwipeAction(menu: .swiped,
                        edge: .trailing,
                        state: $state) {
            Button {
                print("remove")
            } label: {
                Image(systemName: "trash")
                    .foregroundColor(.white)
            }
            .frame(width: 60, height: 80, alignment: .center) // <= HERE
            .contentShape(Rectangle())
            .background(Color.red)
        }
                        .listRowInsets(EdgeInsets()) // <=== HERE
}
.padding(16)

Look for code in the example.

With no horizontal padding views.

To avoid effect when content in swipe actions started showing immediately after view with no horizontal padding

Demo without insets

in .addSwipeAction { ... } add Rectangle filled with same color as root view:

Demo with insets

 YourView()
     .frame(height: 80)
     .frame(maxWidth: .infinity)
     .background(Color.green.opacity(0.8)) // <= Look here
     .addSwipeAction(edge: .trailing) {
        HStack(spacing: 0) {
             Rectangle() // <=== HERE!
                 .fill(Color.green.opacity(0.8)) // <= πŸ’‘ Don't forget!
                 .frame(width: 8.0, height: 80)
    
             Button {
             } label: {
                 Image(systemName: "message")
                     .foregroundColor(.white)
             }
             .frame(width: 60, height: 80)
             .contentShape(Rectangle())
             .background(Color.blue)
        }
     }
With context menu.

Demo without insets

Due to some difficulties for SwiftUI to detect gestures for sliding view and opening context menu I recommend you to use .contextMenu after .addSwipeAction (or addFullSwipeAction):

 YourView()
     .frame(height: 80)
     .frame(maxWidth: .infinity)
    .contentShape(Rectangle()) 
    .padding()
    .background(Color(UIColor.systemBackground))
    .addFullSwipeAction(...) { ... }  // <=== Look here!
    .contextMenu { ... }

Actually if you don't use .contentShape(Rectangle()), you can also add .contextMenu before .addSwipeAction (or addFullSwipeAction):

 YourView()
     .frame(height: 80)
     .frame(maxWidth: .infinity)
    //.contentShape(Rectangle()) // <=== Look here!
    .padding()
    .contextMenu { ... } // <=== Look here!
    .background(Color(UIColor.systemBackground))
    .addFullSwipeAction(...) { ... } // <=== Look here!
How to add swipe hint.

Use modifier .swipeHint:

The place for applying this modifier depends on type of menu.

Add .swipeHint strictly after .addSwipeAction for .slided type of menu πŸ‘‡πŸ»

ForEach(range, ...) {
    YourCell()
        ...
        .addFullSwipeAction(
            menu: .slided, // <== LOOK HERE
            swipeColor: .red,
            state: $state) {
                Leading {
                    ...
                }
                Trailing {
                    ...
                }
            }
        .swipeHint(cell == range.first, hintOffset: 120.0) // for trailing <== LOOK HERE
        .swipeHint(cell == range[1] , hintOffset: -120.0) // for leading <== LOOK HERE
    ...
}

Add .swipeHint strictly before .addSwipeAction for .swiped type of menu πŸ‘‡πŸ»

ForEach(range, ...) {
    YourCell()
        ...
        .swipeHint(cell == range.first, hintOffset: 120.0) // for trailing <== LOOK HERE
        .swipeHint(cell == range[1], hintOffset: -120.0) // for leading <== LOOK HERE
        .addFullSwipeAction(
            menu: .swiped, // <== Look here
            swipeColor: .red,
            state: $state) {
                Leading {
                    ...
                }
                Trailing {
                    ...
                }
            }
    ...
}
Multitouching.

Due to SwiftUI philosophy is not quite possible to control multitouching in general and dragging several cells particularly. Anyway we can disable multitouch with special view modifier: .allowMultitouching(false) based on UIKit. Add this modifier strictly before using swipe actions:

...
YourView(...)
      .allowMultitouching(false) // <= Look here
      .addSwipeAction( ...) {
        ...
      }
...

By default this flag is true. Using this modifier will repeat telegram's behaviour where you can drag only one cell during multitouching.

Actually the problem exist only in fullswiping mode. In default mode you can drag several cells but after ending touching only one will be opened.

But as soon as this solution is based on UIKit you can't optimise rendering of YourView with drawingGroup():

...
YourView(...)
      .allowMultitouching(false) // <= look here
      .addSwipeAction( ...) {
        ...
      }
      .drawingGroup() // <=  ❌ DON'T DO THAT
...

You'll definitely get this:

Drawing group after swipeactions

Actually rendering will be optimizing by SwiftUI engine... For full control you can add view modifier .identifier(your id) to YourView(...)

Optimize rendering.

To control view's id for optimizing you should use modifier .identifier(your id):

ForEach(...) { cell in
     YourView(cell)
         .addSwipeAction(...) {}
         .identifier(cell) // <= Look here
 }

Actually if you forget to add identifier this don't worry, id will be added manually.

Swipe sensitivity.

To control swipe sensitivity (minimum distance for dragging) you should use modifier swipeSensitive.

ForEach(...) { cell in
     YourView(cell)
         .addSwipeAction(...) {}
         .swipeSensitive(.medium) // <= Look here. You can control it here 
 }
 .swipeSensitive(.medium) // <= Look here. Or here! 

If you forget to add sensitivity, don't worry the system will provide its own default low value. Actually it is the most comfortable behavior.

Supporting Right to left

This Library supports right-to-left languages like Arabic and Hebrew.

Check it by adding .environment(\.layoutDirection, .rightToLeft) to your view with swipe actions.

Look for the example
struct ContentView: View {
    var body: some View {
        LazyVStack {
            ForEach(0..<5) { index in
                Text("Item \(index)")
                    .swipeActions {
                        Button("Delete") {
                            print("Item deleted")
                        }
                        .tint(.red)
                    }
            }
        }
        .environment(\.layoutDirection, .rightToLeft) // <= Look here
    }
}

Haptics Supporting

By default in the full swiping mode action has haptic feedback.

To disable it use .allowFullSwipeHaptics(false)

Look for the example
YourView()
    .addFullSwipeAction(...) { ... }
    .allowFullSwipeHaptics(false) // <= Look here

You can easily change this feedback type with .fullSwipeHapticFeedback(:).

Look for the example
YourView()
    .addFullSwipeAction(...) { ... }
    .fullSwipeHapticFeedback(.medium()) // <= Look here

You can easily add haptic to your own buttons in swipe actions.

Look for the example
YourView()
    .addFullSwipeAction(...) { 
        ... 
    Trailing {
        Button {
            HapticsProvider.sendHapticFeedback(.heavy()) // <= Look here
                ...
            } label: { ... }
     }
}

Communication

  • If you found a bug, open an issue or submit a fix via a pull request.
  • If you have a feature request, open an issue or submit a implementation via a pull request or hit me up on [email protected] or telegram.
  • If you want to contribute, submit a pull request onto the master branch.

License

SwipeActions package is released under an MIT license.

Special thanks

Thx to Prafulla Singh for inspriration with his SwiftUI tutorial.