swipeActions

안녕하세요. 그린입니다🟢
이번 포스팅에서는 SwiftUI에서 사용되는 swipeActions이라는것을 알아보겠습니다💁🏻

swipeActions?

자 다들 아래 같은 기능에 아주아주 친숙하실거에요.

리스트에서 목록을 스와이프 했을때 뭐 저장하거나 삭제하거나 등등
메모앱에서 너무 많이 사용되고 그뿐만아니라 거의 모든 이런 구성에는 필수적인 기능이죠?
오늘 알아보고 따라 구현해볼건 바로 요 기능입니다!
공식문서의 개념 정의를 보겠습니다.
리스트의 행에 스와이프 시 커스텀한 로직을 태울 수 있다고 나옵니다.

swipeActions의 파라미터

우선 해당 메서드의 정의된 선언을 보겠습니다.

func swipeActions<T>( edge: HorizontalEdge = .trailing, allowsFullSwipe: Bool = true, content: () -> T ) -> some View where T : View

자 이렇게 볼때 3가지의 파라미터 인자를 받을 수 있어요.

1. edge

스와이프를 어느 엣지에서 해주냐 즉 좌측/우측이냐를 결정해줍니다.
HorizontalEdge 타입임으로 좌/우측 밖에 되지 않습니다.
기본적으로는 가장 익숙하듯한 저 우측에서의 스와이프 모양을 가진 trailing이 기본값으로 채택되어 있습니다.

2. allowsFullSwipe

풀 스와이프를 해줬을때 처음 정의된 액션을 실행시킬것인지에 대한 여부를 나타냅니다.
그러니까 위에서는 풀 스와이프 시 삭제 액션을 처음으로 정의해줬다면 자동으로 삭제가 되겠네요!
기본값은 true로 되어있습니다.
false 시 풀스와이프 시 아무 동작도 하지 않습니다.

3. content

가장 중요한 부분입니다.
스와이프 시 어떤 액션을 해줄지에 대해 정의하는 부분입니다.
위와 같은 형태가 되려면 버튼을 구성해주고 기능을 넣어줄 수 있겠네요!

swipeActions 구현하기

import SwiftUI 
struct SwipeActionView: View { 
  @State private var actionTitle = "" 
  var body: some View { 
    NavigationView { 
      List { ForEach(1..<10) { 
        num in Text("Number is \(num)") 
        .swipeActions(edge: .leading, allowsFullSwipe: false) { 
          Button { actionTitle = "Counting Star" } 
          label: { Label("Star", systemImage: "star.circle") } .tint(.green) } 
        .swipeActions(edge: .trailing) { 
          Button(role: .destructive){ 
            actionTitle = "Move the trash" } 
            label: { Label("Trash", systemImage: "trash.circle") } 
          .tint(.red) 
          Button { actionTitle = "Pick the flag" } 
          label: { Label("Flag", systemImage: "flag.circle") } 
            .tint(.blue) 
          } 
        } 
      } 
    .navigationTitle("\(actionTitle)")  
    }
  }
}

2개의 swipeActions 분기로 나눠주었습니다.
우선 1~9까지 리스트로 간단히 만들어줍니다.
그리고 왼쪽 스와이프 액션에는 스타 할 수 있는 기능을 주어줍니다.
오른쪽은 2개의 스와이프 액션인 삭제와 즐겨찾기를 할 수 있는 기능을 구현해줍니다.
기능의 동작은 구현하지 않았어요!
그리고 네비게이션 타이틀은 액션에 맞게 바꿔줄 수 있도록 바인딩해줍니다.
이렇게 간단한 구현 끝!!!

SwipeActions 동작 화면

마무리

간단하게 알아봤는데요.
역시 스유 너무 재밌어 ㅠㅠ 단 쉬운거 이해되는거 뷰에 바로 보여질때만!ㅋㅋㅋ
뭐 너무 기본 동작이니까 간단히 알아봤고 이렇게 쉽게 사용하면 될것 같아요👍
예제를 작성한 코드는 요 아래 깃헙에 올려놨습니다!
https://github.com/GREENOVER/playground/tree/main/swipeActions

GitHub - GREENOVER/playground: 학습을 하며 간단한 예제들을 만들어 보는 작고 소중한 놀이터

 

[참고자료]

https://developer.apple.com/documentation/swiftui/view/swipeactions(edge:allowsfullswipe:content:)

Apple Developer Documentation

https://www.ioscreator.com/tutorials/swiftui-custom-swipe-actions-tutorial

SwiftUI Custom Swipe Actions Tutorial - iOScreator