Issue - ScrollView - has ambiguous scrollable content -

Issue - ScrollView - has ambiguous scrollable content -

 

이슈 발견 보고서

📌 발견일 / 해결일

22.02.21 / 22.02.21

📌 이슈사진

📌 상황설명

학습중 발견 →

Xcod StoryBoard에서 ScrollView를 사용하는 경우

UIScrollView에 뷰를 올리면 위와 같이 Scrollable Content Size Ambiguity 라는 에러를 마주하게 됩니다

참고

https://corykim0829.github.io/ios/UIScrollView-with-storyboard/#

https://iamprgrmr.tistory.com/30

https://dkfk2747.tistory.com/21

📌 Solution

아래 참조

ScrollView는 ScrollView 안에 있는 컨텐츠의 크기를 의미하는 Viewport라는 개념이 있기 때문인데,

단순히 View 자체의 위치만 잡으면 되는 다른 View들과는 달리 이 Viewport를 고려해주어야 합니다.

스크롤뷰의 크기는 subview(안에 있는 뷰)의 크기에 의해 결정된다는 뜻입니다.

즉, subview들은 UIScrollView 안에서 constraint가 확실하게 정해져야 한다는 것입니다.

현재 예제로 보여드리고 있는 것은 UILabel 하나만을 subview로 두고 있기 때문에

UIScrollView 안의 UILabel의 constraint를 아래와 같이 잡으면 끝납니다.

위와 같이 Constraint 잡는 방법

1. 먼저 아래와 같이 'Add Missing Constraints' 를 눌러 기본적인 Constraint를 잡아줍니다.

그러면 아래와 같이 constraint가 잡힙니다(숫자는 Label이 놓여있던 위치에 따라 다름).

2. Label을 화면의 좌측 상단에 붙인 다음, constraint의 상수값을 아래와 같이 바꿉니다.

Label.top = top

trailing = Label.trailing

bottom = Label.bottom

Label.leading = leading

• trailing = Label.trailing인 이유

나중에 label을 화면 폭에 맞게 확장하기 위해서입니다.

• bottom = Label.bottom인 이유

UILabel은 UIScrollView의 아래쪽과 멀리 떨어져있는데 왜 offset(constant) 값을 0으로 설정했는지 궁금할 것입니다. 앞에서 말했던 Viewport 개념 때문입니다.

여기서 UILabel은 Viewport 역할을 하고 있습니다. ScrollView 안에서 보여지는 내용의 전부이기 때문입니다.

그래서 ScrollView의 끝쪽을 Viewport의 끝쪽과 맞춰주어야 합니다.

3. 그리고 UILabel의 폭을 ScrollView와 맞춰주기 위해, UILabel 위에 마우스 커서를 놓은 상태에서 우클릭 - 드래그하여ㅍUIScrollView로 끌어놓습니다.

그러면 위와 같은 선택창이 나오고, 여기서 Equal Widths를 선택합니다.

그러면 위와 같은 constraints가 생기는데, Label의 width는 부모(UIScrollView)의 width와 일치시킬 것이기 때문에 저 숫자(multiplier)를 1로 바꿔줍니다.

이 과정을 모두 마치면 완성입니다. 이제 스크롤뷰가 잘 동작하는지 확인하기 위해, 긴 텍스트를 넣어보겠습니다.

 

위와 같은 Lorem Ipsum 텍스트를 우리의 UILabel에 넣어보겠습니다.

그러면 우선은 이렇게 나오는데, 이것은 UILabel 의 속성 때문이므로 오른쪽 속성창에서 Lines를 0으로 바꿔줍니다.

그러면 아래와 같이 잘 표시되는 것을 확인할 수 있습니다.