왜인지 모르겠지만 세로로 스크롤뷰를 구현하려고 했었는데, 계속 가로로 된다..
인터넷을 뒤지다 아래 정보를 얻었다.
1. contentView의 constraint는 scrollView 사면에 맞추기 (top, leading, trailing, bottom -> equal to scrollView)
2. view에 scrollView를 추가하고, scrollView에 contentView 추가 및 contentView에 뷰를 구성하는 요소들을 추가한다.
3. 세로 스크롤뷰의 경우 contentView의 width는 scrollView의 width와 동일하게, 가로 스크롤뷰의 경우 contentView의 height을 scrollView의 height과 동일하게 맞춘다.
4. contentView 안에 있는 구성요소들의 constraint는 superview인 contentView에 맞춘다.
5. 레이아웃 상 스크롤뷰의 맨 마지막에 위치하는 뷰는 반드시 contentView의 bottom에 constraint를 주어야한다.
6. 이게 정말 중요한데, 1-4번을 다 했음에도 스크롤이 되지 않다면 scrollView가 스크롤할 수 있는 size(=contentSize)가 명확한지를 검토해볼 필요가 있다.
그래서 StackView를 따로 만들어 ScrollView에 들어갈 뷰들을 다 넣어보았다.
이제 세로로 되긴했는데, 스크롤이 안된다..
스크롤이 되지 않는다면 scrollView가 scroll 할 수 있는 size를 명확히 하라는데, 분명히 명확히 한 것 같은데도 계속 스크롤이 안됐다.
scrollView size 관련 제약조건들을 만지다가 이부분이 중복되서 그런가? 싶어서 주석처리하니 제대로 스크롤이 작동되었다.
해당 make.top.equalTo(seriesOrder.snp.bottom).offset(16) 부분이 scrollView.snp.makeConstraints에서도 존재하였다.
명확한 이유는 잘 모르겠어서 Grok 한테 물어봤다.
결국 AutoLayout 제약이 중복되어서 발생한 문제였다.
Auto Layout의 기본 원칙과 UIScrollView의 동작 방식에 대해서도 알려주었다.
Auto Layout 기본 원칙
뷰는 부모 뷰의 좌표계를 기준으로 배치
bookHStackView는 scrollContentsVStack의 하위 뷰이므로, 그 위치는 scrollContentsVStack에 의해 결정되어야 한다. scrollView의 외부 뷰(seriesOrder)에 직접 연결되면 계층 구조가 깨진다.
중복된 제약 조건은 충돌을 일으킴
동일한 뷰(seriesOrder)를 기준으로 두 뷰(scrollView와 bookHStackView)가 top 제약 조건을 가지면, Auto Layout 엔진이 어느 것을 우선해야 할지 모호해진다.
UIScrollView의 동작 방식
UIScrollView는 내부 콘텐츠의 크기(contentSize)를 기준으로 스크롤 가능 여부를 결정한다.
현재 코드에서 scrollContentsVStack이 scrollView의 모든 면(top, leading, trailing, bottom)에 고정되어 있고, 그 하위 뷰들이 세로로 쌓이면 contentSize.height가 콘텐츠 전체 높이로 설정된다.
만약, bookHStackView가 scrollView 밖의 뷰(seriesOrder)에 고정되면, scrollContentsVStack의 높이 계산이 비정상적으로 작아져 세로 스크롤이 작동하지 않을 수 있다.
아래 사진에서 Unable to simultaneously satisfy constrainst라는 오류가 뜨는 것을 볼 수 있다.
동시에 만족시킬 수 없는 제약 조건이 있다는 뜻인데, 여전히 중복된 제약 조건이 존재한다는 것을 알 수 있다.
나중에 다 수정해야겠다.
아래 블로그를 참고하였습니다.
https://devyul.tistory.com/113
[iOS/Swift] UIScrollview 원리 / 코드로 구현하기 (UIScrollView Programatically/snapkit)
(사이드 프로젝트에서 스크롤뷰로 삽질을 정말 많이해서 정리해보는 포스트....😠) 스크롤뷰 구현의 핵심을 정리해보면 다음과 같습니다. 1. contentView의 constraint는 scrollView 사면에 맞추기 (top, lea
devyul.tistory.com
'DEV' 카테고리의 다른 글
[iOS/Swift] JSON 파싱, @escaping, Result, Bundle, Completion Handler, Data(contentsof:) 등등 .. (0) | 2025.03.27 |
---|---|
[iOS/Swift] UIKit 원형 버튼 만들기 (feat. viewDidLayoutSubviews) (0) | 2025.03.26 |
[iOS/Swift] 이중우선순위 큐, components(sparatedBy:), split(separator:) (0) | 2025.03.24 |
[iOS/Swift] 프로그래밍 심화 주차 과제 코드 리뷰, 수정 (0) | 2025.03.20 |
[iOS/Swift] Zip 함수 (0) | 2025.03.19 |