Skip to content

Instantly share code, notes, and snippets.

@jhowlin
Created July 26, 2020 15:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jhowlin/bf869decd92ad668839a77815ff5ed45 to your computer and use it in GitHub Desktop.
Save jhowlin/bf869decd92ad668839a77815ff5ed45 to your computer and use it in GitHub Desktop.
struct SwipeCell: View {
@State var buttonsWidth: CGFloat = 0
@State var cellContentOffset: CGFloat = 0
@GestureState var dragState:DragGesture.Value? = nil
var body: some View {
GeometryReader { geometry in
HStack {
Rectangle().frame(height:120).foregroundColor(.purple).cornerRadius(7)
.gesture(DragGesture().updating($dragState) { dragValue, dragState, _ in
dragState = dragValue
}.onChanged { value in
let distance = value.translation.width
let midPoint = geometry.size.width * 0.5
let isOpening = distance < 0 ? true : false
if isOpening {
buttonsWidth = min(abs(distance),midPoint)
cellContentOffset = -pow(buttonsWidth, 0.5)
buttonsWidth += pow(buttonsWidth, 0.6)
} else {
buttonsWidth = min(distance, 0)
}
}.onEnded { _ in
if buttonsWidth > (geometry.size.width * 0.25) {
buttonsWidth = geometry.size.width * 0.5
} else {
buttonsWidth = 0
}
cellContentOffset = 0
}).overlay(Text("Swipe Cell").offset(x: cellContentOffset, y: 0))
HStack(spacing:0) {
Rectangle().foregroundColor(.blue).overlay(Image(systemName: "trash").foregroundColor(.white)).onTapGesture {
buttonsWidth = 0
}
Rectangle().frame(width: 5).foregroundColor(.white)
Rectangle().foregroundColor(.red).overlay(Image(systemName: "heart").foregroundColor(.white)).onTapGesture {
buttonsWidth = 0
}
}.frame(width:buttonsWidth, height:120).cornerRadius(7)
}.padding()
}.animation(.spring())
}
}
@jhowlin
Copy link
Author

jhowlin commented Jul 26, 2020

I'm sure can be simplified. I added a bit of a rubber banding once you cross the midpoint on opening, and slightly offset the text in the cell.

Next I'll mask the rectangle so the text is clipped correctly...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment