스크롤뷰에서 하단 자동스크롤 로직 분석

tags: TIL

스크롤뷰 에서 아래에 내용이 추가될 때 마다 하단으로 자동 스크롤링 해주는 로직을 사용하였는데 , 원리를 이해해 보고자 분석을 해보았다.

private func goToBottomOfScrollView() {
        guard let scrollView = historyScrollView else { return }
        scrollView.scrollRectToVisible(CGRect(x: 0,
                                              y: scrollView.contentSize.height - scrollView.bounds.height,
                                              width: scrollView.bounds.size.width,
                                              height: scrollView.bounds.size.height),
                                       animated: true)
    }

여기서 쓰인 scrollRectVisible() 이란 메서드를 분석 해볼 것이다.

UIkit -> UIScrollView ->

open func scrollRectToVisible(_ rect: CGRect, animated: Bool) // scroll so rect is just visible (nearest edges). nothing if rect completely visible

Summary

Scrolls a specific area of the content so that it is visible in the receiver.

receiver에서 보이기 위해 컨텐츠의 구체적인 지역으로 스크롤 하는 로직이다.

Parameter

rect : A rectangle defining an area of the content view. The rectangle should be in the coordinate space of the scroll view.
content view 의 지역을 정의하는 직사각형이다. 이 직사각형은 scrollView의 좌표공간 안에 있어야 한다.

animated : true if the scrolling should be animated, false if it should be immediate.
만약 스크롤링이 움직인다면 true , 만약 스크롤링이 즉시 이루어진다면(움직임 없이) false

Discussion

이 메서드는 rect에 의해 정의된 구역이 scroll view 안에서 그저 보이기 위해 content view를 스크롤한다.
그 구역이 만약 이미 보인다면, 이 메서드는 아무것도 하지 않는다.

이해

rect 파라미터에 내가 넣어준 CGRect 값은 새로이 들어올 stack의 직사각형 영역을 가리키는 것인가 ?

x: 0 --> y축 선상에 직사각형의 시작점이 존재 할 것이라는 것을 예상할 수 있다.

y: scrollView.contentSize.height - scrollView.bounds.height --> 늘어난 스크롤뷰의 전체 높이에서 현재 화면에 보이는 영역의 높이를 뺀다 이것이 직사각형의 시작점이 된다.

width: scrollView.bounds.size.width --> 현재 화면에 보이는 영역의

height: scrollView.bounds.size.height --> 현재 화면에 보이는 영역의 높이

그렇다면 contentSize 가 bounds 보다 상위 개념이 겠다.
스택의 높이는 28이고, bounds.size.height 는 116 이다.

이 로직의 원리는 스택이 추가되면 그만큼 contentSize.height 가 늘어난다. stack의 높이는 28이니까 . contentSize.height 기존의 높이에 + 28 이 된다. 여기서 bounds.size.height 만큼의 높이 116을 빼준 곳에서 직사각형의 시작점이 되고, 그 뒤는 bounds.size.width, bounds.size.height 가 들어간다. 이것이 반복되면 결국 스택이 추가 될 때 마다 나타내 주어야 하는 rectangle 의 y 시작점은 28씩 추가 될 것이므로 자연스럽게 다음 스택이 보여지게 되는 것이다...! 블로그에서 코드를 가져와서 사용 하였는데 이렇게 똑똑한 로직을 쓰고 있었구나! 라는 생각을 하게 되었다. 다음부터도 블로그 발췌로 코드를 가져오더라도, 원리를 이해하도록 하자 !