새싹

ScrollView안에 TableView생성시 스크롤 문제

Thor_yeom 2023. 8. 21. 15:34

HIG에 따르면 한 화면에서 중복 스크롤 넣는것을 지양하라고 나오는데

그런가 보다 하고 프로젝트를 만들었을때 경험한 이슈를 정해보고자 한다.

 

많은 오류가 있겠지만

이번에 경험한 오류는 

 

테이블 뷰의 스크롤을 마치면 자동으로 Top으로 이동함

엥? 이게 무슨 말이야...??

 

어떤 현상인지 영상을 봐 봐보도록 하자

 

테이블 뷰를 스크롤 하면 자동으로 Top으로 이동하는 것을 볼 수 있다.

 

스크롤뷰 안에 테이블 뷰를 사용할때

같은 방향의 중복 스크롤이 발생해서 나타나는 오류이다.

 

그렇다면 해결 방법은 없을까?

 

UITableViewDataSource에서 스크롤이 될때 ( scrollViewDidScroll) 

setContentOffset() 을 활용해서 해결 할 수있다.

그렇다면 코드를 분석해보자

 

  • 스크롤 뷰의 contentOffset을 계산한다.
    • 이유는 스크롤한 만큼 화면을 이동하기 위함이다.
    • setContentOffset을 이용하기 위한 큰그림 
 // 테이블 뷰의 contentOfset.y = contentViewHeight - scrollviewHeight 즉, 스크롤 한 거리 
 let yOffset = scrollView.contentOffset.y

 

  • 스크롤이 시작 되었다면 그때 setContentOffset을 적용하자
 	if yOffset > 0 {
		print("테이블 뷰 스크롤 진행됨")
	}

 

  • 스크롤이 시작 되었다면 해당 거리만큼 테이블 뷰를 이동시켜라
if yOffset > 0 {
	print("테이블 뷰 스크롤 진행됨")
	castTableView.setContentOffset(.init(x: .zero, y: yOffset), animated: true)
}

 

실행해보면

 

테이블 뷰의 스크롤이 잘 작동하는 것을 볼 수 있다.

 

그래서 

 

setContentOffset이 뭔데??

공식문서를 보면

해석을 봐도 무슨 말인지 잘 모르겠지만...

 

결론만 말하자면

사용자가 원하는 곳으로 이동시켜줘!

 

어디로? contentOffset의 첫번째 파라미터를 보면 자료형이 CGPoint로 되어있다.

우리는 스크롤을 한 Y 값 만큼만 이동할 것이기 때문에

x에는 .zero를 설정해주고 

y에는 contentOffset 을 설정해주면 된다.

setContentOffset(.init(x: .zero, y: yOffset), animated: true)