[iOS] ScrollView 톺아보기

스크롤뷰

스크롤뷰 안에 포함된 뷰를 상,하,좌,우로 스크롤 할 수 있고 확대 및 축소할 수 있습니다.

 

이를 상속받아 활용되는 뷰가 UITableView, UICollectionView, UITextView 등이 있고 주로 사진 확대 축소할때 많이 사용합니다.

 

다양한 기능을 가진 만큼 정말 다양한 프로퍼티와 메서드가 있는데요.

 

쭉~ 나열해보고 사진 확대 예시로 넘어가겠습니다.

 

콘텐츠 크기 및 오프셋 관리

//콘텐츠뷰의 크기
var contentSize: CGSize { get set }

//콘텐츠뷰의 원점이 스크롤뷰의 원점에서 오프셋 된 지점
var contentOffset: CGPoint { get set }

//스크롤뷰의 원점에 대한 콘텐츠뷰의 오프셋 설정.
func setContentOffset(_ contentOffset: CGPoint, animated: Bool)

 

콘텐츠 삽입 동작 관리

//콘텐츠뷰와 안전 영역 또는 스크롤뷰 가장자리에 간격
var contentInset: UIEdgeInsets { get set }

 

스크롤뷰 구성

//스크롤링이 사용 가능한지 아닌지를 결정하는 부울 값
var isScrollEnabled: Bool { get set }

//스크롤이 특정 방향으로 고정할지를 결정하는 부울 값
var isDirectionalLockEnabled: Bool { get set }

//스크롤뷰에서 페이징을 사용할 수 있는 여부를 결정하는 부울 값
var isPagingEnabled: Bool { get set }

//스크롤 할 수 있는 제스처를 사용할지를 결정하는 부울 값
var scrollsToTop: Bool { get set }

//스크롤뷰가 가장자리를 통과해서 다시 튀어나오는지 제어하는 부울 값
var bounces: Bool { get set }

//세로 스크롤이 콘텐츠뷰의 끝에 도달할 때 튀어 오르기가 항상 발생하는지를 결정하는 부울 값
var alwaysBounceVertical: Bool { get set }

//가로 스크롤이 콘텐츠뷰의 끝에 도달할 때 튀어 오르기가 항상 발생하는지를 결정하는 부울 값
var alwaysBounceHorizontal: Bool { get set }

 

스크롤링 상태 가져오기

//사용자가 스크롤을 시작하기 위해 콘텐츠를 터치한 여부를 반환
var isTracking: Bool { get }

//사용자가 콘텐츠를 스크롤하고 있는지 나타내는 부울 값
var isDragging: Bool { get }

//사용자가 손가락을 떼었을 때 콘텐츠가 스크롤뷰에서 움직이지 않고 있는지를 반환
var isDecelerating: Bool { get }

//사용자가 손가락을 뗀 후의 감속도를 결정하는 부동 소수점 값
var decelerationRate: CGFloat { get set }

 

스크롤 인디케이터 및 새로고침 제어 관리

//스크롤 인디케이터의 스타일
var indicatorStyle: UIScrollViewIndicatorStyle { get set }

//가로 스크롤 바 표시 여부를 제어하는 부울 값
var showsHorizontalScrollIndicator: Bool { get set }

//세로 스크롤 바 표시 여부를 제어하는 부울 값
var showsVerticalScrollIndicator: Bool { get set }

 

특정 위치로 스크롤 하기

//콘텐츠의 특정 위치로 스크롤 하여 화면에 표시
func scrollRectToVisible(_ rect: CGRect,  animated: Bool)

 

확대 및 축소

//팬 제스처를 제어하기 위한 제스처 인스턴스
var panGestureRecognizer: UIPanGestureRecognizer { get }

//핀치 제스처를 제어하기 위한 제스처 인스턴스
var pinchGestureRecognizer: UIPinchGestureRecognizer? { get }

//스크롤뷰 콘텐츠에 적용되는 현재 배율
var zoomScale: CGFloat { get set }

//스크롤뷰 콘텐츠에 적용되는 최대 배율
var maximumZoomScale: CGFloat { get set }

//스크롤뷰 콘텐츠에 적용되는 최소 배율
var minimumZoomScale: CGFloat { get set }

//확대 및 축소가 지정한 배율 제한을 초과했음을 나타내는 부울 값
var isZoomBouncing: Bool { get }

//콘텐츠뷰가 현재 확대 또는 축소되어 있는지를 나타내는 부울 값
var isZooming: Bool { get }

//크기 조정이 최대 또는 최소 제한을 초과할 때 튀어 오르는 애니메이션을 보여줄지 결정하는 부울 값
var bouncesZoom: Bool { get set }

//콘텐츠 특정 영역 확대
func zoom(to rect: CGRect, animated: Bool)

//현재 배율을 지정
func setZoomScale(_ scale: CGFloat, animated: Bool)

 

키보드 관리

//스크롤뷰에서 드래그가 시작될 때 키보드가 해제되는 방식
var keyboardDismissMode: UIScrollViewKeyboardDismissMode { get set }

 

UIScrollView Protocol

스크롤 및 드래그

//콘텐츠뷰를 스크롤 할 때 델리게이트에 알림
optional func scrollViewDidScroll(_ scrollView: UIScrollView)

///스크롤뷰에서 콘텐츠 스크롤을 시작할 시점을 델리게이트에 알림
optional func scrollViewWillBeginDragging(_ scrollView: UIScrollView)

//스크롤뷰의 드래그가 끝나기 직전에 델리게이트에 알림
optional func scrollViewWillEndDragging(_ scrollView: UIScrollView, 
                        withVelocity velocity: CGPoint, 
                 targetContentOffset: UnsafeMutablePointer<CGPoint>)

//스크롤뷰의 드래그가 끝났을 때 델리게이트에 알림
optional func scrollViewDidEndDragging(_ scrollView: UIScrollView, 
                     willDecelerate decelerate: Bool)

//스크롤뷰가 콘텐츠의 맨 위로 스크롤 해야 하는 경우 델리게이트에 동작 여부를 물어봄
optional func scrollViewShouldScrollToTop(_ scrollView: UIScrollView) -> Bool

//스크롤뷰가 콘텐츠의 맨 위로 스크롤 되었음을 델리게이트에 알림
optional func scrollViewDidScrollToTop(_ scrollView: UIScrollView)

//스크롤링 동작이 감속되기 시작하고 있다고 델리게이트에 알림
optional func scrollViewWillBeginDecelerating(_ scrollView: UIScrollView)

//스크롤링 동작이 감속이 끝났을 때 델리게이트에 알림
optional func scrollViewDidEndDecelerating(_ scrollView: UIScrollView)

 

확대 및 축소

//스크롤뷰에서 확대 및 축소를 할 때 확대 및 축소를 할 뷰 인스턴스를 요청
optional func viewForZooming(in scrollView: UIScrollView) -> UIView?

//스크롤뷰의 콘텐츠 확대가 시작될 때 델리게이트에 알림
optional func scrollViewWillBeginZooming(_ scrollView: UIScrollView, 
                                 with view: UIView?)

//스크롤뷰의 콘텐츠 확대가 완료될 때 델리게이트에 알림
optional func scrollViewDidEndZooming(_ scrollView: UIScrollView, 
                              with view: UIView?, 
                           atScale scale: CGFloat)

//스크롤뷰의 확대 및 축소 배율이 변경될 때 델리게이트에 알림
optional func scrollViewDidZoom(_ scrollView: UIScrollView)

 

스크롤 애니메이션

//스크롤뷰의 스크롤 애니메이션이 끝날 때 델리게이트에 알림
optional func scrollViewDidEndScrollingAnimation(_ scrollView: UIScrollView)

 

 

Example) 이것저것 확대해보기

 

UIScrollView 가 있고 그 안에 UIImageView, 이미지 다운로드용 UIButton 을 추가해줍니다. (이전 예시를 활용한 것으로 버튼은 빼셔도 무방합니다)

 

Zoom max 를 4로 한다는 것은 4배까지 확대한다는 의미이고, User Interaction Enabled가 디폴트로 설정되어있겠지만 확인해줍니다.

 

 

딜리게이트 연결을 해주시고

 

 

class ViewController: UIViewController, UIScrollViewDelegate {
    
  ...
  func viewForZooming(in scrollView: UIScrollView) -> UIView? {
      return self.imageView
  }
  ...
}

 

UIScrollViewDelegate 에서 제공하는 viewForZooming 함수로 확대, 축소할 뷰를 선택할 수 있습니다.

 

 

 

확대가 잘되네요 !

 

이미지뷰 이외의 뷰도 확대가 된다는 점을 이해하시면 다양한 활용이 가능하다는 것을 아실 수 있습니다 ㅎㅂㅎ

 

이상으로 스크롤뷰 내용정리를 마치겠습니다

 

20000

 

 

 

참고 : https://www.edwith.org/boostcourse-ios/lecture/16900/