[iOS - swift] 1. 스크롤되는 PagerView 구현 방법 - 상단 TabView 구현하기

1. 스크롤되는 PagerView 구현 방법 - 상단 TabView 구현하기  v

2. 스크롤되는 PagerView 구현 방법 - 하단 PagerView 구현하기

3. 스크롤되는 PagerView 구현 방법 - Tab과 Pager 스크롤 싱크 맞추기

구현한 PagerView

PagerView 형태

• 상단에는 TabView
  • UIScrollView안에 UIStackView를 넣어서 구현하고 각 tap 이벤트는 뷰의 tag를 사용하면 인덱스를 구할 수 있음
• 하단에는 PagerView
  • 페이지 기능을 쉽게 사용하기 위해서 UICollectionView를 사용하여 구현
  • 주의) UIPageViewController를 사용하지 않음 - UIPageViewController안에 내장된 UIScrollView의 형태는 내부 content 크기만큼 있는게 아닌 페이지의 크기만큼만 존재하므로, 스크롤 했을 때 제대로된 contentOffset을 가져오기가 힘듦

예제에 사용한 오픈소스

• UI 작성을 쉽게 하기위해 사용

pod 'Then'
pod 'SnapKit'

상단 TabView 구현

• UICollectionView를 사용하여 구현해도 되지만 UIScrollView와 UIStackView를 사용하면 쉽게 구현할 수 있으므로 사용
  • 필요한 UI 선언
  • highlightView는 문구 아래에 있는 bar indicator를 의미

import UIKit
import Then
import SnapKit

final class TabView: UIView {
    // MARK: UI
    private let stackView = UIStackView().then {
        $0.spacing = 16
        $0.axis = .horizontal
    }
    private let tabScrollView = UIScrollView().then {
        $0.showsHorizontalScrollIndicator = false
    }
    let highlightView = UIView().then {
        $0.backgroundColor = .gray
    }
    private var contentLabels = [UILabel]()
    
}

• 외부에서 값(dataSource)을 입력해주면 여기서 UILabel을 만들어서 stackView에 차곡차곡 쌓아올림
  • UILabel에는 각 tag와 tapGesture를 붙여놓고 gesture 이벤트 발생 시 tag값을 넘겨줌

// MARK: Property
var dataSource: [String]? {
    didSet { setItems() }
}
var didTap: ((Int) -> Void)?

private func setItems() {
    guard let items = dataSource else { return }
    items
        .enumerated()
        .forEach { offset, item in
            let label = UILabel().then {
                $0.text = item
                $0.numberOfLines = 0
                $0.font = .systemFont(ofSize: 16, weight: .regular)
                $0.textColor = .black
                $0.textAlignment = .center
                $0.isUserInteractionEnabled = true
                $0.tag = offset
                let tapGesture = UITapGestureRecognizer(target: self, action: #selector(tapItem))
                $0.addGestureRecognizer(tapGesture)
            }
            self.stackView.addArrangedSubview(label)
            self.contentLabels.append(label)
        }
}

@objc private func tapItem(sender: UITapGestureRecognizer) {
    guard let tag = sender.view?.tag else { return }
    didTap?(tag)
}

 

다음 포스팅글에서 계속) - 스크롤되는 PagerView 구현 방법 - 하단 PagerView 구현하기)

 

* 전체 코드: https://github.com/JK0369/ExPagerView