[iOS] UIScrollView 만들기

UIScrollView를 처음 사용해봤는데 다소 헤맸다.

정리하고 넘어가지 않으면 까먹을 각이라 오랜만에 적어보는 블로그.

 

아래와 같은 두가지 스크롤뷰를 만들어 보았다.

 

1. 세로 스크롤: ScrollView + StackView / 스토리보드 만으로 구성

2. 가로 스크롤 페이지: ScrollView + ImageView / 스토리보드 + 코드

 

각각 간단하게 정리해보려고 한다🙂

 

1. 세로 스크롤

세로 스크롤은 전부 스토리보드를 통해 구성했다.

화면의 반 정도 크기로 ScrollView를 만든 뒤, 서브뷰로 Vertical StackView를 추가해주었다.

그리고 스택뷰에는 이미지 5장을 추가해주었다.

 

적용한 Constraints는 다음과 같다.

 

• Scroll View & Safe Area - top, leading, trailing은 딱 붙게, bottom은 2번째 스크롤의 공간을 남기고.
• Stack View & Content Layout - top, leading, bottom, trailing 모두 0.
• Stack View & Frame Layout - width는 1:1로, height도 1:1로 하되 priority를 250으로.

Content Layout과 Frame Layout은 스크롤뷰를 추가하면 자동으로 생성되는 요소들인데,

위와 같이 Contraint를 준 뒤 각 영역을 확인해보면 아래와 같이 표시한다.

 

Content Layout Guide

Frame Layout Guide

Content은 subview가 나타내는 전체 영역을,

Frame은 화면에 나타나는 영역을 표시하는 것을 확인할 수 있다.

 

프레임 레이아웃에서 width는 고정하되, height의 우선순위를 낮춘 이유는 스크롤의 방향과 관련이 있다.

세로로 스크롤 할 것이기 때문에 너비는 변할 일이 없으나 높이는 변화를 염두에 두어야 하는 것이다.

 

이때, height constraint를 아예 주지 않아도 괜찮지만 화면 상에서 subview의 높이가 스크롤뷰의 것과 맞지 않으면 빨간 줄이 뜬다. (거슬리니까 1:1로 준 뒤 지우면 된다)

 

2. 가로 스크롤

가로 스크롤은 먼저, 페이지 방식으로 넘어가도록 하기 위해 Paging Enabled를 활성화해주었다.

 

View 구성은 ScrollView를 스토리보드로 구성한 뒤코드로 ImageView들을 추가하는 방식을 택했는데,

아예 subView를 추가하지 않으면 스토리보드에서 빨간 선을 없앨 수가 없어서 우선 View를 추가하고 레이아웃을 맞춰주었다.

(만약 모든 View를 코드로 구성한다면 없어도 되는 과정이겠지만... 우선 연습하는 거라 이렇게 넘어가는 걸로😂)

 

적용한 Constraints는 다음과 같다.

 

• Scroll View & Safe Area - top은 세로 스크롤에 맞춰서, 나머지는 safe area에 맞닿게.
• View & Content Layout- top, leading, bottom, trailing 모두 0.
• View & Frame Layout- width, height 모두 1:1로 하되 width의 priority를 250으로.

가로 스크롤은 높이가 고정이기 때문에 height의 priority는 1000으로 두고, width의 priority를 250으로 설정하였다.

 

그리고 ViewController에 다음과 같은 코드를 작성했다.

class ViewController: UIViewController {

    @IBOutlet weak var verticalScrollPage: UIScrollView!

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        let xUnit = verticalScrollPage.bounds.width

        verticalScrollPage.contentSize.width = xUnit * 10 //🔥

        for i in 0..<10 {
            let newImageView = UIImageView()

            newImageView.frame = CGRect(x: CGFloat(i) * xUnit,
                                        y: 0,
                                        width: xUnit,
                                        height: xUnit)

            newImageView.image = #imageLiteral(resourceName: "song")

            verticalScrollPage.addSubview(newImageView)
        }
    }
}

페이지 방식으로 넘어가도록 했기 때문에

이미지 크기 및 다음 이미지 뷰의 배치 간격은 스크롤뷰의 너비 만큼(xUnit)으로 설정했다.

 

여기서 가장 중요한 것은 🔥 부분이다.

스크롤뷰는 안에 속한 콘텐츠의 크기 만큼만 스크롤이 돼서,

스크롤 할 크기를 설정해주지 않으면 Frame 바깥의 이미지를 보여주지 않았다.

 

스토리보드에서 추가한 StackView는 이미지를 추가할 때마다 자동으로 contentSize를 늘려주었지만,

위와 같이 코드로 추가하는 경우 너비가 늘어났다는 것을 ScrollView에게 반드시 알려줘야 했다.

 

---

 

이렇게 Scroll View에 대한 간단한 연습과 정리 끝.

그간 머릿속에 집어 넣기 바빠서 블로그 정리를 못했는데, 비로소 삽을 떴으니 다시 차차 해보자🥲