iOS11 ) TableView Swipe Action(UITableView Row Action)

안녕하세요 :) Zedd입니다.

오늘은 

다들 많이 보셨죠? 오늘은 이것을 해볼겁니다.

사실 예전에 이거 해봤었는데, 또 다시 할일이 있어서 찾아봤는데 iOS11에서 완전 간편하게!!!!!!바뀌었더라구요 XD 갸앙

시작해봅시다. 

TableView Swipe Action(UITableView Row Action)

---

자.. iOS11전까지는 저 swipe action을 구현하려면, 

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
        //code
 }

위 함수를 사용했어야 했습니다.. 지금도 있어요!

리턴값을 보니..UITableViewRowAction의 Array를 리턴하네요. 사용은 

 func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {

        let deleteAction = UITableViewRowAction(style: .destructive, title: "삭제") { action, index in
            //하고싶은 작업
        }

        let share = UITableViewRowAction(style: .normal, title: "공유") { action, index in
            //하고싶은 작업
        }
        return [deleteAction,share]

    }

이렇게 사용하시면 된답니다. style에는 3가지가 있으므로 자기가 사용하고싶은거 사용하시면 됩니다. 

조금? 주의하셔야 할점은 return 할 때 어떤순서로 UITableViewRowAction을 주느냐에 따라 순서가 달라집니다.

가장 맨 마지막에 들어간것이 제일 앞에 나오게 됩니다. 

이렇게요. [deleteAction, share]을 리턴해줬으니 deleteAction이 먼저 나올 것 같지만....반대입니다. 그리고 위 코드는 무조건 "오른쪽"에서만 UITableViewRowAction들이 나오게 됩니다.

즉,

위와같이 왼쪽!에서 나오는 것을 구현하려면,UISwipeGestureRecognizer를 구현해서 막 해줬어야 했어요. 귀찮..

그리고 

이렇게 그림과 같이 title을 나오게 하고 싶으면 해당action.image로 하면 됐었는데!!! iOS11에서는 image 프로퍼티가 나오지 않습니다. 위 메소드에서요.

그럼 image를 넣으려면..? 이번 iOS11에서 새로 추가된 메소드를 이용하면 됩니다. image를 넣는게 목적은 아니고 저 swipe action을 가능하게 해주는 메소드에요. 

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

!!!!!!!!!!!!!!!!!!!!!(감격) 대박이죠.

이름에서 눈치채셨을 지 모르지만, 

leadingSwipeActionsConfigurationForRowAt : 

trailingSwipeActionsConfigurationForRowAt : 

넘나 편한것..두 메소드에서 해야할일은 완전히 똑같으니 하나만 볼게요. leadingSwipeActionsConfigurationForRowAt을 봅시다. 

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

저~~기 위에서 나왔던 메소드에서 [UITableViewRowAction]을 리턴했던 것과 달리,

이번에는  UISwipeActionsConfiguration을 리턴하네요.

UISwipeActionsConfiguration은 Table Row를 스와이프 할 때 수행 할 작업 집합(Set)이라고 하네요. 

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

        let deleteAction = UIContextualAction(style: .destructive, title:  "삭제", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
            // Call edit action
            // Reset state
            success(true)
        })
        let shareAction = UIContextualAction(style: .normal, title:  "공유", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
            // Call edit action
            // Reset state
            success(true)
        })
        return UISwipeActionsConfiguration(actions:[deleteAction,shareAction])

    }

사용은 이렇게 하면 됩니다. 각각의 action에 대해 UIContextualAction타입의 인스턴스를 만들어주시고, handler에 하고싶은 일들을 하시면 된답니다. 그리고 UISwipeActionsConfiguration을 리턴해야죠. actions의 파라미터로 내가 만든 action들을 넘겨주면 된답니다. 

leadingSwipeActionsConfigurationForRowAt일때는 또 저 순서대로 나오네요.

trailingSwipeActionsConfigurationForRowAt은 여전히 반대로 나옵니다. 

image도 넣을 수 있는데요.. 이상하게 handler안에서 넣으면 안되고 바깥에서 넣어줘야 합니다.

 let deleteAction = UIContextualAction(style: .destructive, title:  "삭제", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
            success(true)
        })
  deleteAction.image = UIImage(named: "icons8-share-32")

이렇게 해주면 (공유 이미지인건 이해좀..)

이렇게 되긴 되는데...ㅇ...? "삭제" 타이틀이 어디갔죠? 

제 생각엔 Row의 높이가 image와 title을 담을 수 없는 높이면 title을 자르는게 아닐까..하네요. 

아니면 그냥 짤린걸지도..ㅎ

Row의 높이값을 크게 주게되면!

이렇게 둘다 나오는 것을 볼 수 있습니다. XD

배경색상, title등 모두 바꿀 수 있습니다. handler 바깥에서!!

왜 handler안에서는 안되는지는 더 연구해봐야 할듯...

아무튼 정말 추가되어서 기쁜 메소드네요 :)

도움이 되었으면 좋겠습니다. XD