[iOS - swift] UITableView, UICollectionView에서 Cell의 Highlighted 애니메이션 적용 방법

UITableViewCell, UICollectionViewCell에서의 highlighted 애니메이션

• 가장 쉽게 접근하기위해서 Cell에서 highlighted가 트리거 될 때, cell 속성에 배경색이나 이미지를 바꾸는 등을 할 수 있지만 cell은 UIButton과 다르게 highlighted의 값이 true, false가 빠르게 바뀌어, 적용이 안되는 것처럼 보이는 문제가 존재
• 아래처럼 셀을 탭할 때 highlighted 애니메이션이 안들어간것처럼 보이는 현상 존재 (길게 누르고 있어야 highlighted 확인 가능)

  // in MyTableViewCell
  override func setHighlighted(_ highlighted: Bool, animated: Bool) {
    super.setHighlighted(highlighted, animated: animated)
    self.backgroundColor = highlighted ? .systemBlue : .white
  }

• 별도 애니메이션 적용이 필요

Highlighted 애니메이션 처리

• UITableViewCell은 메소드에서 이벤트를 받아서 처리

final class MyTableViewCell: UITableViewCell {
  override func setHighlighted(_ highlighted: Bool, animated: Bool) {...} 
}

• UICollectionViewCell은 프로퍼티에서 이벤트를 받아서 처리

final class MyCollectionViewCell: UICollectionViewCell {
  override var isHighlighted: Bool { ... }
}

애니메이션 기초

• color 변경에 애니메이션을 넣고 싶은 경우, UIView.animate를 사용

UIView.animate(
  withDuration: 3.0,
  animations: { self.sampleView.backgroundColor = .systemBlue },
  completion: nil
)

UIView.animate

• image 변경에 애니메이션을 넣고 싶은 경우, UIView.transition를 사용
  • image를 변경할 때 UIView.animate를 써도 적용 x

UIView.transition(
  with: self.sampleImageView,
  duration: 3.0,
  options: .transitionCrossDissolve,
  animations: { self.sampleImageView.image = UIImage(named: "image2") },
  completion: nil
)

UIView.transition

cf) autolayout에 관한 애니메이션 적용을 하고싶은 경우, autolayout 설정 후 UIView.transition의 animations에 self.view.layoutIfNeeded 사용

self.animationTargetView.widthAnchor.constraints(...)

UIView.transition(
  with: self.animationTargetView,
  duration: 1,
  options: .transitionFlipFromLeft,
  animations: self.view.layoutIfNeeded,
  completion: nil
)

UITableViewCell, UICollectionViewCell에 highlighted 애니메이션 적용

• UITableViewCell에서 highlighted 시 color 변경 애니메이션

// MyTableViewCell.swift

override func setHighlighted(_ highlighted: Bool, animated: Bool) {
  super.setHighlighted(highlighted, animated: animated)
  guard self.isHighlighted else { reutrn }
  
  UIView.animate(
    withDuration: 0.05,
    animations: { self.backgroundColor = .systemBlue },
    completion: { _ in
      UIView.animate(withDuration: 0.05) { self.backgroundColor = .white }
    }
  )
}

• UITableViewCell에서 highlighted 시 image 변경 애니메이션

 

 

 

 

• UICollectionView에서는 cell에서 isHighlighted의 didSet 프로퍼티에 위와 동일하게 처리

override var isHighlighted: Bool {
  didSet {
    guard self.isHighlighted else { reutrn }
    
    UIView.animate(
      withDuration: 0.05,
      animations: { self.backgroundColor = .systemBlue },
      completion: { finished in
        UIView.animate(withDuration: 0.05) { self.backgroundColor = .darkGray }
      }
    )
  }
}

* image 변경 역시 UIView.animate.transition 사용 (방법이 동일하므로 생략)

 

* 전체 코드: https://github.com/JK0369/ExCellAnimation