SSSwiper is SWIFTUI package which is used to create swipe gestures action inside any view just by adding a modifier to the View with various customization options.
| 
| 
|
An example of Swipers created with this library
This library is used to add multiple action buttons just by adding a modifier to the view with full flexibilites and customizastion. You can add swiping gestures and allow action in both horizontal sides and you can add items according to your choice on both sides. This library also supports destructive action which supports action if user swipes full and it will trigger the first option from the edge of the device. SSSwiper also gives to option to customize shape and spacing of the SwipeItems(Action Buttons). This library also has haptic feedbacks while performing diffrent operations. You can add as much as SwipeItems(Action Buttons) in SSSwiper as this supports responsive design which does not breaks your UI and it will adjust automaticaally by removing extra buttons according to device size.
To run the example project, clone the repo, and run pod install from the Example directory first.
This pod requires a deployment target of iOS 14.0 or greater
SSSwiper is available through CocoaPods.
To install
it, simply add the following line to your Podfile:
pod 'SSSwiper'and run pod install from the root directory of project and in your code add import SSStepper and boom you're done.💥
When using Xcode 11 or later, you can install SSSwiper through Swift Package Manager by going to your Project settings > Swift Packages and add the repository by providing the GitHub URL. Alternatively, you can go to File > Swift Packages > Add Package Dependencies...
- Add
SwipeToActionModifier.swift,SwipeItems.swiftandExtensionView.swiftfromSourcesdirectory to your project. - Grab yourself a cold 🍺.
Import the package in the file you would like to use it:
import SSSwiperThis library shares one modifier which you can use to add functionality of swiping gesture. You also need to create one array of SwipeItems(Action Buttons) which take AnyView as your button design (You have to cast your view to AnyView with .castToAnyView, which will be accessible to you after installation) and pass that to the modifier. Basic example:
@State var swipedChannelId: String?
let width = UIScreen.main.bounds.size.width
let swiperItems = [
SwipeItems(
buttonView: {
Image(systemName: "trash.fill")
.resizable()
.foregroundColor(.white)
.frame(width: 20, height: 20)
.castToAnyView
} ,
backgroundColor: .red,
iconWidth: 20,
onClicked: {
self.values.remove(at: values.firstIndex(of: number) ?? -1)
}
),
SwipeItems(
buttonView: Text("Edit").foregroundColor(.white).castToAnyView ,
backgroundColor: .purple,
iconWidth: 20,
onClicked: {
self.values.remove(at: values.firstIndex(of: number) ?? -1)
}
)
]
...
var body: some Scene {
VStack {
ForEach((1...10), id: \.self) {
Text("\($0)…")
.foregroundColor(.black)
.font(.system(
size: 28,
weight: .bold,
design: .rounded
))
.frame(
width: width,
height: 75
)
.swipe(
itemWidth: width,
trailingItems: swiperItems,
leadingItems: swiperItems,
swipedChannelId: $swipedChannelId
)
}
}
}This example will add two Action items declared in swiperItems array to both side of edges.
You can customize almost every main thing in This library. For Customizations you have to pass optional agruments which you have to pass only if you want to change that value So, you need to add only those arguments which you wanted to customize. Here's the examples :
VStack {
ForEach((1...10), id: \.self) {
Text("\($0)…")
.foregroundColor(.black)
.font(.system(
size: 28,
weight: .bold,
design: .rounded
))
.frame(
width: width,
height: 75
)
.swipe(
itemWidth: width,
buttonWidth: 100,
buttonHeight: 100,
trailingItems: swiperItems,
leadingItems: swiperItems,
swipedChannelId: $swipedChannelId
)
}
}This will change the height and width of the button to 100. Both of this field are optional and default value for this fields are 70.
VStack {
ForEach((1...10), id: \.self) {
Text("\($0)…")
.foregroundColor(.black)
.font(.system(
size: 28,
weight: .bold,
design: .rounded
))
.frame(
width: width,
height: 75
)
.swipe(
itemWidth: width,
trailingItems: swiperItems,
leadingItems: swiperItems,
buttonStyle: .rounded(cornerRadius: 20),
swipedChannelId: $swipedChannelId
)
}
}By passing this optional argument you will be able to change the shape of SwipeItems(Action Buttons). You have three options for shapes like Circle, Rounded rectangle and simple Rectangle here which is value of enum. By default this value is set to Rectangle.
VStack {
ForEach((1...10), id: \.self) {
Text("\($0)…")
.foregroundColor(.black)
.font(.system(
size: 28,
weight: .bold,
design: .rounded
))
.frame(
width: width,
height: 75
)
.swipe(
itemWidth: width,
trailingItems: swiperItems,
leadingItems: swiperItems,
spacing: 2,
swipedChannelId: $swipedChannelId
)
}
}By passing this optional argument you will be able to change the spacing between the action buttons. You have to pass value of CGFloat. By default this value is set to 0.
VStack {
ForEach((1...10), id: \.self) {
Text("\($0)…")
.foregroundColor(.black)
.font(.system(
size: 28,
weight: .bold,
design: .rounded
))
.frame(
width: width,
height: 75
)
.swipe(
itemWidth: width,
trailingItems: swiperItems,
leadingItems: swiperItems,
allowLeadingDestructiveAction: false,
allowTrailingDestructiveAction: true,
swipedChannelId: $swipedChannelId
)
}
}By passing this optional arguments you will be able to Enable/Disable the destuctive mode for action on full swipe for either of the sides. You have to pass value of bool. By default this value is set to true for both of the sides.
Up for a suggestions. Give suggestions for more features and customisations.
Whether you're helping us fix bugs, improve the docs, or a feature request, we'd love to have you! 💪
Check out our Contributing Guide for ideas on contributing.
Give a ⭐️ if this project helped you!
This project is licensed under the MIT License - see the LICENSE file for details