[swift] SnapKit으로 페이지 컨트롤 구현하기

14 Nov 2023

swift

SnapKit은 iOS 개발에서 인기 있는 오픈 소스 라이브러리로, Auto Layout을 코드로 작성할 수 있게 도와줍니다. 이번 블로그 포스트에서는 SnapKit을 사용하여 페이지 컨트롤을 구현하는 방법에 대해 알아보겠습니다.

Step 1: 프로젝트에 SnapKit 추가하기

첫 번째로, SnapKit을 프로젝트에 추가해야 합니다. SnapKit은 CocoaPods를 통해 설치할 수 있습니다. Podfile에 다음 코드를 추가한 다음, 터미널에서 pod install 명령어를 실행하면 SnapKit이 프로젝트에 추가됩니다.

pod 'SnapKit'

Step 2: 페이지 컨트롤 뷰 만들기

SnapKit을 사용하여 페이지 컨트롤 뷰를 만들어 보겠습니다. 먼저, 페이지 컨트롤을 위한 UIView를 추가합니다.

let pageControlView = UIView()
pageControlView.backgroundColor = .lightGray
self.view.addSubview(pageControlView)

// SnapKit으로 Auto Layout 적용
pageControlView.snp.makeConstraints { make in
    make.centerX.equalToSuperview()
    make.bottom.equalToSuperview().offset(-20)
    make.width.equalTo(200)
    make.height.equalTo(20)
}

Step 3: 페이지 인디케이터 추가하기

다음으로, 페이지 인디케이터를 추가해보겠습니다. 페이지 인디케이터는 현재 페이지를 나타내는 작은 점들로 구성됩니다. SnapKit을 사용하여 인디케이터를 추가하는 방법은 다음과 같습니다.

let indicatorViews = [UIView(), UIView(), UIView()]
let selectedColor = UIColor(red: 0.3, green: 0.5, blue: 0.8, alpha: 1.0)
let unselectedColor = UIColor(red: 0.8, green: 0.8, blue: 0.8, alpha: 1.0)

for (index, indicatorView) in indicatorViews.enumerated() {
    pageControlView.addSubview(indicatorView)
    
    indicatorView.backgroundColor = index == 0 ? selectedColor : unselectedColor
    
    indicatorView.snp.makeConstraints { make in
        make.centerY.equalToSuperview()
        make.height.width.equalTo(10)
        
        if index == 0 {
            make.left.equalToSuperview()
        } else {
            make.left.equalTo(indicatorViews[index - 1].snp.right).offset(10)
        }
    }
}

Step 4: 페이지 커런트 페이지 변경하기

마지막으로, 페이지 커런트 페이지가 변경될 때 인디케이터의 색깔을 변경해주는 로직을 추가해보겠습니다.

func setCurrentPage(_ index: Int) {
    for (indicatorIndex, indicatorView) in indicatorViews.enumerated() {
        indicatorView.backgroundColor = index == indicatorIndex ? selectedColor : unselectedColor
    }
}

// 예시로 2번째 페이지로 현재 페이지를 변경한다고 가정
setCurrentPage(1)

결론

이렇게 하면 SnapKit을 사용하여 페이지 컨트롤을 구현할 수 있습니다. SnapKit의 간편한 문법을 통해 Auto Layout을 코드로 작성하는 과정이 훨씬 쉬워지고 가독성도 좋아집니다. 페이지 컨트롤은 많은 앱에서 사용되는 중요한 기능 중 하나이므로, SnapKit을 활용하여 효율적으로 페이지 컨트롤을 구현해보시기 바랍니다.

참고 자료

SnapKit GitHub 저장소: https://github.com/SnapKit/SnapKit
SnapKit 문서: http://snapkit.io/docs/