Storyboard만으로 페이징 가능한 ScrollView를 정의 ~내 경우~

소개

이 기사 을 읽고, 자신과는 오이타 방식이 다르므로 소개합니다.
간단함은 같은 정도라고 생각하기 때문에, 이런 방법도 있구나,라고 생각해 주시면 다행입니다.

만드는 것은 위의 기사와 같은 것으로 하고 있으며, 기사의 구성도 알기 쉽게 전 기사와 비슷합니다.

GitHub 입니다.
Xcode7로 만들고 있습니다.

이쪽 에 ScrollView에서의 AutoLayout의 구조 정리했습니다.

절차

이전 기사와 마찬가지로 수평 방향으로 페이징 가능한 ScrollView를 AutoLayout만 사용하여 정의합니다.
이 기사의 스토리 보드의 최종 형태는 위의 기사와 달리 다음과 같습니다.



2 페이지째가 보이지 않는 분 유지 보수하기 어렵습니다만, 제약은 심플한 것을 알 수 있을까 생각합니다.

1. ScrollView 배치

대형 View와 같은 크기의 ScrollView를 배치합니다.



또한 페이징을 활성화합니다.

2. ScrollView에 제약을 붙이기

상위 View와 같은 크기가 되도록,
상하좌우의 제약을 0으로 합니다.

3. ScrollView 내에 상위 View 배치

ScrollView 내에 ScrollView 안의 View 모두를 넣기 위한 View를 배치합니다.
향후 ScrollView에 자식 View를 배치하려면 이 View에 배치하고 ScrollView 바로 아래에는 이 View만이 되도록 합니다.



ScrollView와 겹치도록 배치합니다.
오류가 발생하지만 걱정하지 마십시오.

4. 부모 View에 제약을 붙인다

상위 View의 상하 좌우 제약을 0으로 합니다.



이렇게하면 ScrollView의 ContentSize = 상위 View의 Size가됩니다.
이 시점에서 상위 View의 크기는 결정되지 않으므로 오류는 계속 남아 있습니다.

5. 부모 View의 height를 결정한다

이번은 가로 스크롤뿐이므로, 부모 View는 ScrollView 자체와 같은 높이가 됩니다.
그래서 부모 View와 ScrollView에 Equal Heights의 제약을 붙입니다.

6. 각 페이지의 View 배치

이런 식으로 각 페이지의 View를 배치합니다.



제약을 붙인 후에 Update Frames로 고치기 때문에 적당하고 좋습니다.
각 페이지의 내용에 대해서는, 알기 쉽게 표시하고 있을 뿐이므로, 이런 좋은 느낌은 되지 않습니다.
실제로는 배경색만 바꾸어 시험해 보면 좋다고 생각합니다.

7. 각 페이지의 View에 폭의 제약을 붙인다

각 페이지의 너비는 ScrollView와 동일하므로 ScrollView와 각 페이지의 View에 Equal Widths 제약 조건을 적용합니다.

8. 각 페이지의 View에 상하좌우의 제약을 붙인다

1 페이지와 2 페이지 사이의 0pt 제약

1 페이지째와 부모 View에 상하좌 0pt의 제약

2 페이지와 부모 View에 상하 오른쪽 0pt의 제약

를 각각 붙입니다.

첫 페이지 제약은 아래 이미지와 같습니다.



이제 모든 제약이 있었기 때문에 오류가 경고로 바뀔 것입니다.

9. Update Frames 실행

이제 실행하면 제대로 움직일 것입니다.

요약

유지 보수의 용이성을 생각하면, 전 기사 쪽이 좋다고 생각합니다.
다만, 이 기사의 방법으로는 불필요한 View나 제약을 붙일 필요가 없기 때문에, 혼란은 초대하기 어려운 것이 아닐까요.

알고 버리면 간단합니다만, ScrollView내의 AutoLayout는 특수하고 매우 이해하기 어렵기 때문에, 다른 기사 에 정리했습니다.