[Swift iOS] ScrollView를 써보자 (2)

JB
4 min readJan 23, 2021

--

스크롤 뷰를 사용하다보면 동적 높이를 사용하여야 할 때가 있습니다.
스크롤 뷰에서 정적인 높이를 지정해놓고 사용해주다보면, 높이가 남아서 아래 빈 공백이 생기는 경우가 있을 수 있죠. 또한 스크롤뷰의 높이를 유지보수시에 계속 조정해준다는건 정말 귀찮죠..

이때 유용하게 사용할 수 있는 것이

스크롤 뷰 안에 스택 뷰를 이용하여 동적 높이를 자동적으로 조절

해주는 것 입니다.

스크롤 뷰와 스택뷰를 이용해 동적 높이 구하기

  1. 스크롤 뷰를 추가해주고 왼, 오른, 위, 아래에 각각 0인 Constraint을 설정해 줍니다.
스크롤 뷰를 추가
leading, trailing, top, bottom Constraint를 0으로 주기

2. 스크롤 뷰 옵션의Content Layout Guides 를 체크해제 해 줍니다.

Content Layout Guide 체크 해제!

Content Layout Guide를 체크 해제해주면,

Content Layout Guide 체크 해제 + Constraint 설정 시에

이와 같이 스크롤뷰가 전체화면에 차게 됩니다.

3. 이 위에 스택뷰를 올려놓고 똑같이 Constraint 0을 양옆, 위 아래에 줍니다.

이러면 이렇게 에러가 나게 되는데, 이유는 Width와 height가 설정되지 않았기 때문이죠! 이를 해결하기 위해서는

4. ScrollView와의 Equal Width를 잡아줍니다.

위와 같이 StackView를 ScrollView위에 상관관계를 잡아주기 위해 드래그 한 후

Equal Width를 클릭해줍니다.

StackView 를 클릭해보면 Width에
Proportional Width to: SuperView 라고 되어있는데

5. Edit 을 클릭해 Multiplier 를 1로 만들어줍니다. (SuperView와 StackView의 길이를 같게 해주기위해서 입니다.)

하지만 아직 오토레이아웃이 완벽히 잡히지 않았습니다.

이유는 높이가 아직 잡히지 않아서에요.

6. StackView안에 높이를 잡아주기 위해 View를 하나 넣어주고 Height를 80으로 잡아줍니다.

그러면 드디어 Autolayout이 잘 잡혔고 에러도 다 사라졌네요.

그리고 같은 뷰를 복사해서 여러개를 넣어주고, 하나의 뷰만 배경을 바꿔보았습니다. 스택뷰 안에 넣으니, 스택뷰의 장점중 하나인 자동높이 조절을 해주니 정말 편안합니다.

시뮬레이터에서 스크롤 뷰 작동하는 동영상 첨부하며 블로그 마치도록 하겠습니다~

--

--

JB
JB

Written by JB

iOS engineer @kakaobank

No responses yet