ScrollView(or tableView) 에서 Button Highlight 효과 주기

 

delaysContentTouches

 

처음 문제는 tableView 안에 있는 버튼에 highlight 효과가 먹지 않는 것이었습니다.

 

구글링을 해보니 

tableView.delaysContentTouches = false

 

delaysContentTouches 속성을 false로 주면 highlight 효과가 발휘됩니다.

위 효과는 touch-down gesture를 지연시키는 속성으로 deafault 값은 true 입니다.

 

터치가 button을 위한 것이 아닌 scroll을 위한 touch-down 일 수 있기 때문에 이를 판단하기 위해서 잠시 지연시키는 것입니다.

 

scrollView 안에 있는 button을 빠르게 클릭하면 highlight 효과가 먹고, 길게 꾸욱 누르는 경우 highlight 효과가 먹는 것을 볼 수 있는데 이는 바로 위에서 말한 delay 때문에 발생하는 현상입니다.

 

그런데 위 속성을 false로 하는 것은 치명적인 단점이 있습니다.

버튼 영역을 클릭하여 스크롤 하면 스크롤이 되지 않습니다...

(스크롤인지 판단할 수 있는 시간을 주지 않았기 때문에 그저 button 터치로 인식하는 것이지요.)

 

스크롤도 잘 되고 highlight 효과도 주고 싶으면 어떻게 해야 될까요?

 

 

 

touchedShouldCancel(in:)

tableView에 있는 인스턴스 메서드로

"subView의 터치를 취소하고, 드래깅을 시작할지" 알려줍니다.

 

True -> 드래깅

False -> 드래깅을 중지하고 subview로 터치 전달한다.

 

touch를 받은 객체가 UIControl이면 false를 리턴 합니다.

(UIButton이 대표적인 UIControl 객체이죠.)

 

그래서 UIButton일때도 true를 리턴하도록 예외처리를 하면 드래깅이 가능하게 됩니다.

 

class HighlighTableView: UITableView {
  override func touchesShouldCancel(in view: UIView) -> Bool {
    if view is UIButton {
      return true
    }
    return super.touchesShouldCancel(in: view)
  }
}

 

 

discussion을 보면 아래와 같은 내용이 있습니다.

 

"만약 scrollView의 canCancelContent 값이 false면 이 메서드를 호출하지 않는다."

-> 이 속성을 줘야 touchShouldCancel(in:) 메서드를 사용할 수 있습니다.

tableView.canCancelContentTouches = true

 

 

 

 

정리

 

스크롤뷰 안에 있는 버튼이 있는데,

스크롤도 잘 되고 버튼 highlight 효과도 주고 싶으면 어떻게 해야 될까요?

 

1. 아래 두 속성을 준다.

tableView.delaysContentTouches = false
tableView.canCancelContentTouches = true

 

2. 그냥 tableView(또는 scrollView, collectionView)는 안 되고 touchShouldCancel()을 오버라이드한 tableView를 사용해야한다.

(button 클릭시에도 드래깅을 멈추지 않도록 예외처리를 해준다)

class HighlighTableView: UITableView {
  override func touchesShouldCancel(in view: UIView) -> Bool {
    if view is UIButton {
      return true
    }
    return super.touchesShouldCancel(in: view)
  }
}

 

 

 

 

참고

 

sujinnaljin.medium.com/swift-button%EC%9D%B4scrollview%EC%9D%98-%EB%93%9C%EB%9E%98%EA%B7%B8%EB%A5%BC-%EB%A7%89%EB%8A%94%EB%8B%A4%EB%A9%B4-3deb4fc6781d

www.rightpoint.com/rplabs/fixing-controls-and-scrolling-button-views-ios