Swift | TableView에서 특정 영역만 선택이 가능하도록 만들기

TableView에서 특정 영역만 선택이 가능하도록 만들기

⎮ 미리보기

 

⎮ 일반적인 TableView

  TableView는 Row 전체 영역이 선택되는 것이 당연하다.

 

  어떻게 하면 TableView의 특정 영역만 선택이 가능하도록 설정할 수 있을까?

  

  1. TableView Row의 선택 영역을 비활성화하고

  2. 특정 영역만 선택이 가능하도록 활성화 시켜주면 된다.

 

⎮ hitTest를 활용하여 특정 영역 선택이 가능하도록 구현하기

    1. 클래스 추가하기(UITableViewCell을 상속받는 커스텀 셀 만들기)

 

  2. mainCell의 Class를 CustomTableViewCell로 설정

 

  3. Outlet으로 연결

 

  4. hitTest 메서드 오버라이드 하기

    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        let convertedPoint = convert(point, to: selectableView)
        if selectableView.bounds.contains(convertedPoint) {
            return selectableView
        }
        // 그 외 영역 터치는 무시 (nil 반환)
        return nil
    }

 

  지금 이 상태로는 빌드를 해도, 특정 영역만 선택되지는 않는다.

  TableView의 셀 선택 효과가 제거 되지 않았기 때문이다.

 

  6. TableView에 있는 셀 선택 효과 제거

    override func awakeFromNib() {
        super.awakeFromNib()
        self.selectionStyle = .none  // 셀 선택 효과 제거
    }

 

⎮ UITableViewDelegate 채택해서 로그 출력하기

    1. UITableViewDelegate 연결하기

 

  2. ViewController에 UITableViewDelegate 채택하기

 

  3. viewDidLoad()에 delegate 코드 추가

mainTableView.delegate = self

 

  4. ViewController에 didSelectRowAt 코드 추가

func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
    print("\(indexPath.row)번째 셀이 선택됨!")
    tableView.deselectRow(at: indexPath, animated: false) // 선택 효과 제거
}

 

  5. 결과 확인하기