UIScrollView에서 Autolayout 적용하기

아이폰도 다양한 사이즈의 기기들이 출시되면서 Autolayout 없이는 개발하기 힘들어졌습니다. Autolayout 적용하면서 제일 애먹었던 곳은 UIScrollView였습니다. iPhone6+ 에서는 한 화면에서 볼 수 있는 컨텐츠이지만 그 보다 작은 iPhone4S, iPhone5 기기에서는 ScrollView 없이는 볼 수 없는 경우가 있습니다. 다른 뷰 Autolayout 적용하는 것과 살짝 다른 점이 있는데 아래에 소개하겠습니다.

ScrollView 내에 ContentView 만들기

먼저 UIView에 SubView를 올리듯 UIScrollView에 뷰를 올리면 위와 같이 Scrollable Content Size Ambiguity 라는 에러를 마주하게 됩니다. UIScrollView 에 서브뷰를 붙일 때에는 빈 UIView를 먼저 올려주세요. 이 뷰를 ContentView라고 칭하겠습니다. ContentView 안에 SubView들을 붙이면 됩니다.

ContentView를 UIScrollView에 딱 맞게 Constraint를 지정합니다. 그렇게 하면 Missing Constraints 라며 Need constraints for: X position or width, Need constraints for: Y position or height라고 역시 에러가 뜨지만 일단 무시하세요.

ContentVIew의 Width를 ScrollView의 Width와 동일하게 맞춰줍니다. Equal Widths 아시겠죠? 이제 X position, width 관련된 Constraint를 만족했으므로 에러 하나는 사라졌습니다. 

그리고 이번에는 Y position, Height 관련된 Constraint를 맞춰줍니다. 여기는 ContentView를 클릭하고 오른쪽 바에보면 Content Compression Resistance Priority 메뉴에 Intrinsic Size가 있습니다. 여기에 Default값으로 설정되어있는데 그 것을 Placeholder로 바꿔줍니다. 그러면 모든 에러가 사라진 것을 볼 수 있습니다. 이제 ScrollView에 들어가는 모든 SubView들은 이 ContentView에 붙여주면 됩니다.

여기서 그냥 실행해보면 ContentView의 Height가 0이 되어 스크롤도 안되고 터치도 안될 거예요. ContentView의 Height는 제일 하단에 있는 SubView에 맞춰야겠죠? 아래에 5개의 Label을 예제로 붙여보았습니다. 

5th Label의 하단 Constraint가 중요합니다. 저 뷰까지 ContentVIew가 커버해줘야 ScrollView가 제대로 보이겠죠.

5th Label의 bottom space to Container를 설정해줍니다. 저는 10 정도의 간격을 주었습니다.

지금 이 Xib에서는 5th Label이 Superview와 간격이 10이 되지 않아 위와 같은 에러를 냅니다.

5th Label를 선택하고 오른쪽 바에서 Vertical space Constraint에 relation을 Greater Than or Equal로 변경해줍니다.

그럼 모든 에러가 사라졌습니다. iPhone8 plus와 iPhone5로 테스트 해보겠습니다.

iPhone 8Plus는 스크린 사이즈가 커서 모든 Label를 한 화면에 보여주고 있습니다.

      

iPhone5s는 사이즈가 작아서 5th Label이 끊기죠? 하단으로 정상적으로 스크롤 되는 것을 볼 수 있습니다.

UIScrollView도 이런 식으로 하면 Autolayout을 문제없이 적용할 수 있습니다.