iOS Swift 테이블뷰 스와이프 버튼 만들기 (TableView swipe button)

땡겨서 나오는 버튼을 만들어보겠습니다. 왼쪽, 오른쪽 가능

UITableView Swipe Button

 

 

 

 

UITableViewDelegate 을 상속 받으신 후에 만들고 싶은 방향 매서드를 써주세요.

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
	// 오른쪽에 만들기
}
    
func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
	// 왼쪽에 만들기
}

 

 

 

UIContextualAction 을 만들어서 넣으면 됩니다.

func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        // 왼쪽에 만들기
        
        let like = UIContextualAction(style: .normal, title: "Like") { (UIContextualAction, UIView, success: @escaping (Bool) -> Void) in
            print("Like 클릭 됨")
            success(true)
        }
        like.backgroundColor = .systemPink
        
        
        let share = UIContextualAction(style: .normal, title: "Share") { (UIContextualAction, UIView, success: @escaping (Bool) -> Void) in
            print("Share 클릭 됨")
            success(true)
        }
        share.backgroundColor = .systemTeal
        
        //actions배열 인덱스 0이 왼쪽에 붙어서 나옴
        return UISwipeActionsConfiguration(actions:[like, share])
        
    }

leadingSwipeActionsConfigurationForRowAt

 

 

 

 

 

 

 

버튼을 이미지로 나오게 할 수 있습니다.

like.image = UIImage(systemName: "hand.thumbsup")
share.image = UIImage(systemName: "square.and.arrow.up")

 

 

 

 

 

 

 

이미지랑 타이틀이랑 같이 나오게 하려면 셀 높이를 키우면 됩니다.

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
	return 100
}

 

 

 

 

 

 

 

셀 높이 큰 상태에서 이미지만 나오게 하려면 타이틀 지우면 됩니다.

like.title = nil
share.title = nil

 

 

 

 

 

 

오른쪽도 똑같이 됩니다.

    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        // 오른쪽에 만들기
        
        let modity = UIContextualAction(style: .normal, title: "수정") { (UIContextualAction, UIView, success: @escaping (Bool) -> Void) in
            print("수정 클릭 됨")
            success(true)
        }
        modity.backgroundColor = .systemBlue
        
        
        let delete = UIContextualAction(style: .normal, title: "삭제") { (UIContextualAction, UIView, success: @escaping (Bool) -> Void) in
            print("삭제 클릭 됨")
            success(true)
        }
        delete.backgroundColor = .systemRed
        
        //actions배열 인덱스 0이 오른쪽에 붙어서 나옴
        return UISwipeActionsConfiguration(actions:[delete, modity])
    }

trailingSwipeActionsConfigurationForRowAt

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

끝

전체 코드입니다.

import UIKit

class ViewController3: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    @IBOutlet var myTableView: UITableView!
    
    var dataArray: Array<String> = ["TableView row 0","TableView row 1","TableView row 2"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        myTableView.delegate = self
        myTableView.dataSource = self
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataArray.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell()
        
        cell.textLabel?.text = dataArray[indexPath.row]
        
        return cell
    }
    
    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        // 오른쪽에 만들기
        
        let modity = UIContextualAction(style: .normal, title: "수정") { (UIContextualAction, UIView, success: @escaping (Bool) -> Void) in
            print("수정 클릭 됨")
            success(true)
        }
        modity.backgroundColor = .systemBlue
        
        
        let delete = UIContextualAction(style: .normal, title: "삭제") { (UIContextualAction, UIView, success: @escaping (Bool) -> Void) in
            print("삭제 클릭 됨")
            success(true)
        }
        delete.backgroundColor = .systemRed
        
        //actions배열 인덱스 0이 오른쪽에 붙어서 나옴
        return UISwipeActionsConfiguration(actions:[delete, modity])
    }
    
    
    func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        // 왼쪽에 만들기
        
        let like = UIContextualAction(style: .normal, title: "Like") { (UIContextualAction, UIView, success: @escaping (Bool) -> Void) in
            print("Like 클릭 됨")
            success(true)
        }
        like.backgroundColor = .systemPink
        like.image = UIImage(systemName: "hand.thumbsup")
        like.title = nil
        
        
        let share = UIContextualAction(style: .normal, title: "Share") { (UIContextualAction, UIView, success: @escaping (Bool) -> Void) in
            print("Share 클릭 됨")
            success(true)
        }
        share.backgroundColor = .systemTeal
        share.image = UIImage(systemName: "square.and.arrow.up")
        share.title = nil
        
        //actions배열 인덱스 0이 왼쪽에 붙어서 나옴
        return UISwipeActionsConfiguration(actions:[like, share])
        
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
    
}