UIScrollView의 contentOffset 이해

스크롤뷰가 얼마만큼 스크롤되었는지에 따라서 navigationItem.titleView 를 건드려줘야 할 일이 있어서 UIScrollView > contentOffset 를 찾아보고 관련 메소드를 정리했습니다.

---

UIScrollView > contentOffset 

contentOffset의 의미를 생각해보면 '콘텐츠가 오프셋된 정도? 떨어진 정도?'로 해석할 수 있습니다.

처음에는 '그래서 값이 어떻게 나오는 건데' 라는 생각이 들어서.. 바로 공식문서 확인해봤습니다.

 

contentOffset 공식문서

번역하면, '스크롤뷰의 오리진에서부터 오프셋된 콘텐츠뷰의 오리진 위치' 정도인 것 같습니다.

저는 스크롤뷰가 얼마나 스크롤되었는지를 보고 싶었기에 이 값이 딱 제가 원하는 값입니다.

 

그런데 스크롤뷰를 처음 접했을 때는 contentOffset이 직관적으로 와닿지 않았습니다.

저는 처음에 이해를 잘 못해서... 대체 어떻게 contentOffset을 나타내는 건지 곰곰이 생각해보고 그림 그려가면서 이해해보니 이해가 되더라고요.

 

 

그래서 그림과 같이 정리해보겠습니다!

 

우선 스크롤뷰와 스크롤뷰 안의 콘텐츠뷰의 차이를 이해해야 합니다.

 

콘텐츠뷰는 스크롤해가면서 보고 싶은 내용에 관한 뷰라고 생각하면 됩니다. 엄~청 큰 사진이 있다면 아이폰에서 한번에 보기 힘들겠죠? 그래서 스크롤해가면서 봐야하는데, 이걸 콘텐츠뷰라고 부릅니다.

 

스크롤뷰는 우리가 콘텐츠뷰를 보는 '창' 입니다(창문할 때 창이요). 창은 딱 고정되어 있어요. 그래서 엄~청 큰 사진 위를 이 창이 훑으면서,  우리는 스크롤 할 수 있는 거예요.

 

말만 하면 너무 헷갈리니... 그림을 그려봤습니다!

엄~청 큰 콘텐츠뷰 위에 스크롤뷰

왼쪽 그림은 엄~청 큰 사진 위에 창이 하나가 올라가 있죠? 우리는 스크롤뷰에서 스크롤하면서 사진 위의 창을 움직이는 거예요.

그러면 실제로 아이폰에서 보이는, 스크롤뷰에서 보이는 내용은 오른쪽 그림과 같은 형식으로 보이는 거고요.

 

그러면 스크롤뷰와 콘텐츠뷰를 이해했으리라 믿고... contentOffset을 보겠습니다.

 

contentOffset은 '스크롤뷰의 오리진에서 오프셋된 콘텐츠뷰의 오리진 위치'라고 했습니다.

좀 자의적인 해석을 섞어보면! '스크롤뷰의 원점과 콘텐츠뷰의 원점이 떨어진 점', 즉 떨어져있는 그 곳! 이라는 의미입니다.

 

그림으로 보면 이렇게 이해할 수 있어요.

긴 콘텐츠뷰와 스크롤뷰, contentOffset

그림은 긴 콘텐츠뷰를 스크롤뷰가 중간쯤 스크롤한 내용입니다. 그래서 콘텐츠뷰랑 스크롤뷰가 떨어진 곳, 그곳이 contentOffset 이고 얼마만큼 스크롤이 되었는지를 의미할 수 있는 거죠.

 

스크롤뷰를 움직여서 콘텐츠뷰를 스크롤한다고 했는데, 실제로는 스크롤뷰가 움직이지 않기에 scrollView.frame.origin 값은 변하지 않을 거예요. 하지만 스크롤을 개념적으로 이해하면! 바로 위 그림처럼 스크롤뷰가 움직여야 스크롤이 가능한 것이겠죠?

 

그래서 스크롤뷰의 원점(오리진)과 콘텐츠뷰의 원점(오리진)이 떨어진 바로 그곳! 그곳이 contentOffset 입니다. 그래서 contentOffset이 스크롤된 정도를 나타낼 수 있는 거예요.

 

 

설명이.. 조금 난해하지만.. 이해했으리라.. 믿어요..

 

아무튼 contentOffset을 좀 활용하면, 긴 콘텐츠뷰를 전부 스크롤했는지 여부를 확인해볼 수 있습니다!

 

if scrollView.contentOffset.y == contentViewHeight - scrollViewHeight

그림으로 보면 이렇게 되어요

긴 콘텐츠뷰를 맨 밑까지 스크롤한 경우

그림에 contentOffset > y 를 표시를 안했는데, 실제로는 높이값으로 제일 아래까지 스크롤했는지를 확인하는 거라 contentOffset.y와 비교해야합니다.

 

스크롤뷰가 맨 밑에 있으니, contentOffset도 밑에 있을 거예요.

그래서 contentOffset의 y값과 (콘텐츠뷰 높이 - 스크롤뷰 높이)가 동일한 값이 되면 제일 하단까지 스크롤되었다고 볼 수 있는 겁니다!!

 

 

 

막상 설명하려고 하니 어렵네요 ㅠ_ㅜ. 잘못된 내용이나 피드백은 댓글 부탁드립니다.

참고자료 

https://developer.apple.com/documentation/uikit/uiscrollview/1619404-contentoffset