storyboard(스토리보드) 에서 autolayout을 활용해 view 만들기

scroll view

scroll view 란?

device의 크기가 한정적이고, 한 view에 보여질 정보가 많아지면 스크롤 뷰가 필요해진다.
또한 이미지가 device보다 크다면 scroll 을 통해 왔다갔다 할 수 있다.

scroll view 만들기 (세로 스크롤)

height 고정

content view 의 height를 임의로 고정 시킬 수 있다.
하지만 이 방법으로 하게되면, content view에 object들을 수정할 때마다 전체 hegiht를 계속 변경해 줘야 한다는 단점이 있다.

content 에 따른 height

object 의 height와 constraints를 잘 활용하면 누구나 쉽게 구현 할 수 있다.
사실 가장 핵심 포인트는 첫번째 object(component)의 top constraint 와 맨 밑 object의 bottom constraint를 잘 맞추는 것이라고 생각이 든다.

how to

1. scroll 뷰 constraints 추가

사진과 같이 scroll view 를 추가해준다.
본인의 경우, navigation controller를 embed in 하였다.

2. 내용을 담을 view 추가 (ContentView)

상세 방법 : control 을 누른상태로, ContentView (= scroll view 위에 추가한 view) 에서 Content Layout Guide 로 드래그, 똑같이 ContentView 에서 Frame Layout Guide 로 드래그 !!

view를 추가해주고, 이 view의 이름을 ContentView로 지정을 해줬다.
ContentView의 위치도 지정을 해줘야되는데 이때 Content Layout Guide 와 Frame Layout Guide 를 사용할 수 있다. (물론 이 둘을 사용 안하고 할 수 있는 방법도 있다. 하지만, 최근 xcode 에서는 이방법을 사용한다)

쉽게 생각하면 Content는 말그대로, 내용을 담을 view의 autolayout constraint를,
Frame 은 scroll view의 constraint를 뜻한다.

이 쯤에서, 추가 설명으로 아까 위에서 말한 Content Layout Guide 와 Frame Layout Guide 를 사용하지 않는 방법을 말하는 것이 이해에 도움이 될것 같다.
(회색과 노랑색이 있는 뷰의 그림을 참고하면 된다)

1. Scroll view (gray color) 의 constraint 맞추기
2. ContentView (yellow color)의 constraint를 scrollView에 (0,0,0,0) 으로 맞추기 (top, bottom, leading, trailing)
3. scroll view와 ContentView equal width해주기 (세로 스크롤 이라 가정)

이런식으로 진행이 된다.
위의 과정을 보았을 때, content layout guide와 frame layout guide를 나눠놓음으로써 더 직관적이지 않나 싶다.

3. Content View 내부 constraint

여기서 주목해야 할 점은 빨간색 형광펜으로 표시한 constraint다.

보면, view들간 constraint 즉, 제약조건을 줌으로써 ContentView의 height를 표현할 수 있다.
임의로 표현한 실제 device의 크기보다 ContentView의 height가 커지게 된다면, 스크롤이 가능해진다.

완성본