FSPageView

FSPageView

• 롤링 배너를 구현해야 하는 상황에서 간편하게 구현할 수 있게끔 도와주는 라이브러리
• 사용 기능
  1. 기본 배너(Banner)
  2. 배너 전환 시 다양한 애니메이션 및 UI 효과 적용(Transformers)
  3. 배너와 함께 보통 많이 사용되는 Page Control 커스텀 가능(Page Control)
• FSPageView는 CollectionView를 상속하여 커스텀한 라이브러리

---

FSPageView 기본 속성

// 무한 스크롤 가능 여부
pagerView.isInfinite = true 

// 스크롤 되는 시간 간격
pagerView.automaticSlidingInterval = 3.0

// 셀의 크기 
pagerView.itemSize = CGSize(width: 200, height: 180) // 가로 200, 세로 180

// PageView의 스크롤 방향
pagerView.scrollDirection = .horizontal

// PageView Cell들 사이의 간격
pagerView.interitemSpacing = 10

---

FSPageView Transformer 속성

// 다양한 페이지 전환 애니메이션 및 UI 변화
pagerView.transformer = FSPagerViewTransformer(type: .crossFading)
pagerView.transformer = FSPagerViewTransformer(type: .zoomOut)
pagerView.transformer = FSPagerViewTransformer(type: .depth)
pagerView.transformer = FSPagerViewTransformer(type: .linear)
pagerView.transformer = FSPagerViewTransformer(type: .overlap)
pagerView.transformer = FSPagerViewTransformer(type: .ferrisWheel)
pagerView.transformer = FSPagerViewTransformer(type: .invertedFerrisWheel)
pagerView.transformer = FSPagerViewTransformer(type: .coverFlow)
pagerView.transformer = FSPagerViewTransformer(type: .cubic)

---

PageControl

// 페이지가 1개일 경우 PageControll을 노출 여부
pageControll.hidesForSinglePage = true
        
// 원의 사이즈
pageControll.itemSpacing = 8
        
// 원들 사이의 간격
pageControll.interitemSpacing = 5
        
// 페이지컨트롤 정렬 기준
pageControll.contentHorizontalAlignment = .center
        
// 선택된 원의 색상
pageControll.setFillColor(UIColor.init(red: 23/255, green: 116/255, blue: 255/255, alpha: 1), for: .selected)
        
// 선택되지 않은 원들의 색상
pageControll.setFillColor(UIColor.init(red: 217/255, green: 217/255, blue: 217/255, alpha: 1), for: .normal)

---

Exsample

• 아래 예시와 같이 롤링 배너를 구현해야 하는 상황
• 요구사항
  1. 무한 스크롤 가능
  2. 좌우 여백의 앞, 뒤 Cell 노출
  3. PageControl 커스텀 가능(색상, 간격)

ViewController

import UIKit
import FSPagerView

struct Banner {
    let color: UIColor
}

class ViewController: UIViewController {
    
    let width = UIScreen.main.bounds.width
    
    lazy var collectionView: FSPagerView = {
        let view = FSPagerView()
        
        // 무한 스크롤 가능 여부
        view.isInfinite = true
        
        // 페이지 스크롤 인터벌
        view.automaticSlidingInterval = 3.0
        
        // 페이지 아이템의 사이즈
        view.itemSize = CGSize(width: self.width - 40, height: 100)
        
        // 스크롤 방향
        view.scrollDirection = .horizontal
        
        // 페이지들 사이의 간격
        view.interitemSpacing = 10
        
        view.register(EventBannerCollectionViewCell.self, forCellWithReuseIdentifier: EventBannerCollectionViewCell.identifier)
        return view
    }()
    
    var pageControll: FSPageControl = {
        let pageControll = FSPageControl()
        
        // 페이지가 1개일 경우 PageControll을 노출 여부
        pageControll.hidesForSinglePage = true
        
        // 원의 사이즈
        pageControll.itemSpacing = 8
        
        // 원들 사이의 간격
        pageControll.interitemSpacing = 5
        
        // 페이지컨트롤 정렬 기준
        pageControll.contentHorizontalAlignment = .center
        
        // 선택된 원의 색상
        pageControll.setFillColor(UIColor.init(red: 23/255, green: 116/255, blue: 255/255, alpha: 1), for: .selected)
        
        // 선택되지 않은 원들의 색상
        pageControll.setFillColor(UIColor.init(red: 217/255, green: 217/255, blue: 217/255, alpha: 1), for: .normal)
        return pageControll
    }()
    
    let bannerList = [Banner(color: .black),
                      Banner(color: .red),
                      Banner(color: .blue),
                      Banner(color: .cyan),
                      Banner(color: .darkGray)]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUpViews()
        
        self.collectionView.delegate = self
        self.collectionView.dataSource = self
        
        self.pageControll.numberOfPages = bannerList.count
    }
    
    func addSubviews() {
        self.view.addSubview(collectionView)
        self.view.addSubview(pageControll)
    }

    func setUpViews() {
        addSubviews()
        
        collectionView.snp.makeConstraints {
            $0.centerY.equalToSuperview()
            $0.leading.trailing.equalToSuperview()
            $0.height.equalTo(100)
        }
        
        pageControll.snp.makeConstraints {
            $0.top.equalTo(collectionView.snp.bottom).offset(5)
            $0.leading.trailing.equalToSuperview()
            $0.height.equalTo(15)
        }
    }

}

extension ViewController: FSPagerViewDelegate, FSPagerViewDataSource {
    func numberOfItems(in pagerView: FSPagerView) -> Int {
        return bannerList.count
    }
    
    func pagerView(_ pagerView: FSPagerView, cellForItemAt index: Int) -> FSPagerViewCell {
        let cell = pagerView.dequeueReusableCell(withReuseIdentifier: EventBannerCollectionViewCell.identifier, at: index) as! EventBannerCollectionViewCell
        cell.configureCell(banner: self.bannerList[index], tag: index)
        return cell
    }
    
    // 페이지 드래그 이동 시 페이지 컨트롤 변화
    func pagerViewWillEndDragging(_ pagerView: FSPagerView, targetIndex: Int) {
        self.pageControll.currentPage = targetIndex
    }
    
    func pagerViewDidEndScrollAnimation(_ pagerView: FSPagerView) {
        self.pageControll.currentPage = pagerView.currentIndex
    }
    
}

Cell

import UIKit
import FSPagerView

class EventBannerCollectionViewCell: FSPagerViewCell {
    // MARK: - Properties
    static var identifier: String {
        String(describing: self)
    }
    
    let bannerImageView: UIView = {
        let imageView = UIView()
        imageView.layer.masksToBounds  = true
        imageView.layer.cornerRadius = 3
        imageView.isUserInteractionEnabled = true
        return imageView
    }()
    
    // MARK: - Init
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    // MARK: - Method
    private func addSubviews() {
        self.addSubview(bannerImageView)
    }
    
    private func setupViews() {
        addSubviews()
        
        bannerImageView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
    
    func configureCell(banner: Banner, tag: Int)  {
        self.bannerImageView.backgroundColor = banner.color
    }
}

---

Reference

https://github.com/WenchaoD/FSPagerView