[swift] TableViewCell/CollectionViewCell 셀안의 버튼에 이벤트를 주는 방법

안녕하세요~

 

오늘은 Cell안에 있는 버튼에게 이벤트를 줄 수 있는 방법에 대해서 작성하려고 합니다 : )

 

셀안에 있는 버튼에 이벤트를 주는 방법에는

Tag 를 활용하는 방법, Delegate를 활용하는 방법 등 다양한 방법이 존재합니다.

 

그중에서 오늘 소개할 방법은 클로저를 이용한 이벤트 처리방법입니다.

 

1. 먼저 알아두어야 할 것

- 셀 안에 버튼과 같이 유저와의 인터렉션이 필요한 경우 셀의 ContentView에 해당 뷰를 넣어줘야 합니다. 

//TableViewCell

class FindFriendsTableViewCell: UITableViewCell {
    
    static let identifier = "FindFriendsTableViewCell"
    let infoView = MyInfoView()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        //1. ContentView에 넣어주기
        contentView.addSubview(infoView)
        
        infoView.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.width.equalToSuperview().multipliedBy(0.9)
            make.centerX.equalToSuperview()
            make.height.equalTo(510)
        }
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 15, left: 0, bottom: 0, right: 0))
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

보이는 것처럼 ContentView에 넣어주어야 정상적으로 유저와의 인터렉션이 이루어질 수 있습니다. 왜냐하면 해당 ViewController의 hierarchy를 확인해 보면 셀 다음으로 쌓이게 되는 게 ContentView이기 때문입니다.

 

( 간혹 그래도 동작하지 않는다면 TableView에 UserIntercationEnabled 값이 false인지 확인해주시고 false라면 true로 변경해 주세요. )

 

2. 버튼 이벤트를 처리해줄 클로저 만들기

//TableViewCell

class FindFriendsTableViewCell: UITableViewCell {
    
    static let identifier = "FindFriendsTableViewCell"
    let infoView = MyInfoView()
    //2. 버튼 이벤트를 처리해줄 클로저 만들기
     var buttonAction : (() -> Void) = {}

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        //1. ContentView에 넣어주기
        contentView.addSubview(infoView)
        
        infoView.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.width.equalToSuperview().multipliedBy(0.9)
            make.centerX.equalToSuperview()
            make.height.equalTo(510)
        }
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 15, left: 0, bottom: 0, right: 0))
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

위와 같이 클로저 프로퍼티를 선언해주시고 나서

 

3. @objc 메서드 만들고 버튼에서 addTarget 설정하기

//TableViewCell

class FindFriendsTableViewCell: UITableViewCell {
    
    static let identifier = "FindFriendsTableViewCell"
    let infoView = MyInfoView()
    //2. 버튼 이벤트를 처리해줄 클로저 만들기
     var buttonAction : (() -> Void) = {}

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        //1. ContentView에 넣어주기
        contentView.addSubview(infoView)
        
        infoView.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.width.equalToSuperview().multipliedBy(0.9)
            make.centerX.equalToSuperview()
            make.height.equalTo(510)
        }
        //3. addTarget 설정해주기
        infoView.button.addTarget(self, action: #selector(requestFriend), for: .touchUpInside)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 15, left: 0, bottom: 0, right: 0))
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    @objc
    func requestFriend() {
        buttonAction()
    }
}

 

4. TableView를 관리하는 ViewController에서 적용하기

 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
 
    let cell = tableView.dequeueReusableCell(withIdentifier: FindFriendsTableViewCell.identifier, for: indexPath) as! FindFriendsTableViewCell
    //4.클로저 구문에 이벤트를 넣어줍니다
    cell.buttonAction = {
        self.requestFriend(self.viewModel.friends[indexPath.row].uid)
    }

    return cell
}

이렇게 하면 정상적으로 이벤트를 실행합니다.

 

추가적으로 셀의 재사용적인 측면 때문에 기존의 이벤트를 nil 혹은 빈값으로 처리를 해야 합니다.

물론, 같은 메서드를 호출해야 하는 것이라면 사용하지 않아도 됩니다.

 

다음은 Cell의 이벤트를 nil 처리해 주는 코드입니다.

 

5. 이벤트 초기화 하기

//TableViewCell

class FindFriendsTableViewCell: UITableViewCell {
    
    static let identifier = "FindFriendsTableViewCell"
    let infoView = MyInfoView()
    //2. 버튼 이벤트를 처리해줄 클로저 만들기
     var buttonAction : (() -> Void) = {}

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        //1. ContentView에 넣어주기
        contentView.addSubview(infoView)
        
        infoView.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.width.equalToSuperview().multipliedBy(0.9)
            make.centerX.equalToSuperview()
            make.height.equalTo(510)
        }
        //3. addTarget 설정해주기
        infoView.button.addTarget(self, action: #selector(requestFriend), for: .touchUpInside)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        contentView.frame = contentView.frame.inset(by: UIEdgeInsets(top: 15, left: 0, bottom: 0, right: 0))
    }
    // 4. 
    override func prepareForReuse() {
        super.prepareForReuse()
        buttonAction = {}
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    @objc
    func requestFriend() {
        buttonAction()
    }
}

 

이렇게 하면 셀안에 버튼 이벤트를 줄 수 있습니다.

 

더 좋은 방법이나 

위의 작성 내용이 잘못되었을 경우, 댓글 부탁드립니다.

감사합니다 : - )

 

그럼 이만 👋🏻 👋🏻 👋🏻