Swift - 스크롤뷰(scorllView)를 구현하기 위한 2가지 방법

 

scrollView를 구현하는 방법은 두가지가 있습니다.

1. contentLayoutGuide를 사용하는 방법

2. contentLayoutGuide를 사용하지 않는 방법

 

"contentLayoutGuide" 란?

Content and Frame Layout guides are supported for UIScrollView and can be enabled in the Size inspector for more control over your scrollable content. (29711618) - xcode 11 release note

위 정의에 나와 있듯이 "scrollView의 제약 조건 설정을 도와주는 interface: 입니다.

Xcode11 부터 지원이 됩니다.

애플에서 권장하는 사용법이기 때문에 되도록이면 contentLayoutGuide를 활용하여 scrollView를 만드는 것이 좋겠습니다.

 

 

contentLayoutGuide를 사용하는 방법

 

1. ScrollView 생성

• scrollView를 생성하고 원하는 크기 만큼 제약을 줍니다.

 

2. ScrollView에 하위 View 추가

• 위에서 말한 contentLayoutguide를 여기서 활용합니다.

  1. View의 위치 제약 조건은 ContentLayout에 맞춥니다.
  • 주의!!) 제약 속성인 constant, priority가 제대로 설정되어 있는지 확인합니다.
  1. 스크롤 방향 관련 제약은 FrameLayout에 맞춥니다.
  • 세로 스크롤 → EqualWidth
  • 가로 스크롤 → EqualHeight

  *위 결과 세로 스크롤의 경우 높이, 가로 스크롤의 경우 넓이가 결정되지 않은 상황이라 빨간줄이 계속 뜹니다.

  → 스크롤이 되는 방향의 크기는 해당 view 안에 있는 subView들에 맞춰서 정해집니다.

   

3. subView를 추가

• 세로 scroll이기 때문에 Height 값을 확실하게 줘야합니다.

  (가로 scroll일 경우 Width 값을 확실하게)

 

 

 

 

contentLayoutGuide를 활용하지 않는 방법

1. ScrollView를 추가

   • constraint 및 크기를 설정
   • scrollView의 contentLayoutGuide는 체크 해제

2. ScrollView 안에 하위 View 추가

   • scrollView에 맞춰 constraint를 설정해줍니다.

   • (중요!!) 스크롤 되는 방향의 길이 설정

     #방법1. 고정값으로 설정

     #방법2. 하위View 크기에 맞춰서 조절되도록 설정

     → view의 width(또는 height)를 equal to scrollview로 두고, 스크롤 하고자 하는 방향의 constraint priority를 250으로 낮춥니다.

     *세로일 경우 height를, 가로일 경우 width를 위와 같이 조정합니다

     *이렇게 해야 subView의 크기에 맞춰 View의 길이가 조정되기 때문입니다.

3. subView들을 추가

   • 위치와 크기를 설정합니다.

   • 특히, 위에서 View를 하위View의 크기에 맞게 조절되도록 한 경우 constraint를 정확히 줘야합니다.

     → 필수 constraint : 상/하(세로 스크롤) 또는 좌/우(가로 스크롤)

 

 

 

 

*참고 자료

 

https://kyungmosung.github.io/2019/11/06/xcode-scrollview/ (contentLayout 활용)

https://www.youtube.com/watch?v=_Qn3UGad3lg (contentLayout을 활용하지 않음)