IOS) TableView의 Swipe를 배워보자!

안녕하세요 후르륵짭짭 입니다.

오랜만에 글을 포스팅 해봅니다!

이번에는 TableView에서 하나의 셀을 옆으로 당기면 여러가지 기능이 나오는데 

그것을 해보려 합니다!!!

 

** 시작 **

일단 기본적으로 table의 UITableViewDataSource은 되어 있다고 가정하겠습니다.

테이블의 하나의 셀을 보시면 맨 쪽과 오른쪽 부분에 view가 들어 갈 수 있도록 만들었습니다.

따라서 leadingSwipeActionsConfigurationForRowAt 와 trailingSwipeActionsConfigurationForRowAt

이렇게 두가지가 있습니다.

    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {}
    
    func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {}

위에 있는 것은 오른쪽으로 당겼을 때 나오는 것이고 아래쪽에 있는 것은 왼쪽으로 당겼을 때 수행되는 겁니다.

 

** 기능 만들기 **

    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
                
        let bookMark = UIContextualAction(style: .normal, title: "책갈피") { (action, view, nil) in
              
            print("수행")

        }
   
        let actionConfigure =  UISwipeActionsConfiguration(actions: [bookMark])
    
        return actionConfigure
    }

위 코드를 보면 trailingSwipeActionsConfigurationForRowAt은 반환 값이 UISwipeActionsConfiguration 입니다.

결국 반환은 UISwipeActionsConfiguration으로 해줘야하는데, action 값이 배열입니다. 그래서 이 배열 안에 넣어주면 여러가지의 기능을 만들 수 있는 것 입니다.

 

일단 처음에 UIContextualAction(style: , title , handler)가 있습니다. 

style은 destructive와 normal이 있습니다. destructive는 삭제 기능을 담당합니다. 그래서 기본적으로 빨간색을 가지고 있고

normal은 아무것도 없습니다.

title은 이름을 지정해주는 부분 입니다.

handler는 결국 기능을 넣어주는 부분이죠.

 

이렇게 UIContextualAction을 만들어주고 UISwipeActionsConfiguration()안에 배열 형태로 넣어주면 됩니다.

간단하죠???

 

** 기능 꾸미기 **

이 코드를 넣어주면 배경화면의 색을 변경할 수 있습니다.

 bookMark.backgroundColor = UIColor.systemOrange

 

만약에 이미지를 넣어주고 싶다면 아래처럼 해주면 됩니다,

 bookMark.image = UIImage(named : "")

 

** 완전 Swipe 차단하기 **

Swipe를 조금만 쎄게 당기면 첫번째 것이 전체를 다 담아버리는 것을 확인 할 수 있는데,

이것을 차단해주는 방법이 있습니다.

actionConfigure.performsFirstActionWithFullSwipe = false

그냥 이 코드만 넣어주면 됩니다. true가 Default 값이고 false를 넣어주면 됩니다!!

 

** 전체 코드 **

    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        
        let delete = UIContextualAction(style: .destructive, title: "삭제하기") { (action, view, nil) in
            print("delete")
            
        }
        
        let bookMark = UIContextualAction(style: .normal, title: "책갈피") { (action, view, nil) in
            print("bookMark")
           
        }
        
        bookMark.backgroundColor = UIColor.systemOrange
        
        let actionConfigure =  UISwipeActionsConfiguration(actions: [delete, bookMark])
        
        actionConfigure.performsFirstActionWithFullSwipe = false
        
        return actionConfigure
    }