[UIKit] Scrollable StackView 만들기

UITableView 또는 UICollectionView와 같이 콘텐츠 영역을 스크롤링 가능한 스택 뷰를 만들어보고자 합니다.
Storyboard 구현 및 소스 코드 구현 방법을 차례대로 작성하였습니다.

 

Storyboard 구현

 

1. Vertical StackView를 추가하고 StackView의 subviews로 4개의 이미지 뷰를 순서대로 추가합니다.

 

 

2. StackView를 선택하고 상단 메뉴에서 Editor > Embed In > Stack View 를 선택하여 ScrollView를 Embed 합니다.

 

 

3. StackView가 스크롤 뷰의 가로, 세로 영역에 맞게 떨어지도록 오토레이아웃을 설정합니다.
    StackView를 선택하고 오른쪽 하단 3번째 아이콘(Resolve Auto Layout Issues)를 클릭하여

    top, leading, bottom, trailing margin을 0으로 적용합니다.

 

 

4. 이번에는 스크롤 뷰의 부모 뷰의 가로, 세로 영역에 맞게 떨어지도록 오토레이아웃을 설정합니다.

    ScrollView를 선택하고 오른쪽 하단 3번째 아이콘(Resolve Auto Layout Issues)를 클릭하여 

    top, leading, bottom, trailing margin을 0으로 적용합니다.

 

 

5. 다시 StackView를 선택 후 마우스를 누른 채 ScrollView로 드래그 드랍하여 equal width constraint를 적용합니다.

 

 

6. StackView의 constraints 중에서 Proportional Width to > Edit을 선택하여 Multiplier을 1.0으로 적용합니다.

 

 

Source Code 구현

 

 

실행 결과