[Swift_Library] PagingKit

 

Paging view 상단에 segment를 같이 표현해주면서 보여주는 뷰를 본적이 있을것이다.

그리고 이번에 진행하게된 프로젝트에서 위와 같은 뷰를 Library 사용으로 구현하는 과정을 포스팅 하려한다.

 

대부분의 Library들은 개발자들이 사용하기 용이하게 Readme에 Library에 대한 정보와 빌드업 과정을 상세하게 적어놓는다.

덕분에 짧은 시간안에 기능 구현을 시도할 수 있다.

 

그럼에도 불구하고 이번 작업은 Library에 대한 연구가 다소 필요했던 편이었고 프로세스를 이해하는데 시간이 조금 걸렸다.

각설하고 포스팅을 이어 가겠다.

 

일단 GitHub주소는 하단을 참고 하면된다.

kazuhiro4949/PagingKit

 

다른 Library들과 다를게 없이 cocoapod을 사용하여 install을 해준다.

pod "PagingKit"

 

상단에 Library를 import 해주고

import PagingKit

 

일단 VC 구성은 Main이 될 MainVC

그리고 MainVC안에 구성되는 VC1, VC2, VC3을 만들겠다.

즉 MainVC안에 3개의 Tab이 위치하게 될거다.

 

상단에는 PagingMenuViewController의 View

하단에는 PagingContentViewController의 View의

레이아웃을 각각 잡아 줄꺼다.

 

상단에 Tab을 먼저 구현 하자면

PagingMenuViewController의 인스턴스를 만들고

let menuVC = PagingMenuViewController() // 상단 메뉴

 

menuVC.View의 레이아웃을 잡아준다

menuVC.view.snp.makeConstraints { (make) in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
            make.left.right.equalToSuperview()
            make.height.equalTo(50)
        }

 

그다음

TableViewCell을 만들듯이 Library에서 PagingMenuViewCell이라는 Cell을 준비해두었다.

이 Cell은 상단에 Menu 하나하나가 될 Cell이다.

그리고 그 메뉴에 text를 표시할것이기 때문에 label을 하나 만들겠다.

class MenuCell: PagingMenuViewCell {
	let labe = UILabel()
    	...
}

 

 

그리고 TableViewCell을 재사용 할 때와 같이 register와 delegate, dataSource의 주소를 셋하는 방법은 동일하다.

menuVC.register(type: MenuCell.self, forCellWithReuseIdentifier: "MenuCell")

menuVC.dataSource = self
menuVC.delegate = self

 

 

그러면 menu의 개수와 각 menu의 width, 그리고 cell의 재사용, 설정을 할 수 있는 cellForItemAt의 메소드를 구현하라고 컴파일에서 알려준다.

didSelect delegate 메소드에 대해서는 마지막에 같이 다루겠다.

각각의 개수와 cell의 너비, dequeueReusableCell을 설정해준다.

 

참고로 DataSource는 아래와 같이 튜플 배열 타입으로 구성해놓았다.

lazy var dataSource: [(String, UIViewController)] = [
        (menuTitle: "vc1", vc: vc1),
        (menuTitle: "vc2", vc: vc2),
        (menuTitle: "vc3", vc: vc3)
    ]

indexPath를 사용하여 menuTitle을 집어 넣어주면 된다.

 

 

그리고 마지막에 reloadData()를 꼭 호출 해 주어야 한다.

menuVC.reloadData()

 

아래와 같이 나온다면 성공이다.

안나온다면 DataSource를 잘 설정해주었는지 확인해보길 바란다..!

 

 

이제 하단에 컨텐츠들을 보여줄 VC들을 구현하겠다.

일단 VC들은 앞전에 만들었고 

PagingContentViewController의 인스턴스를 만들겠다.

let contentVC = PagingContentViewController() // 하단 컨텐츠

 

그리고 메뉴를 설정했던 방법과 동일하게 contentVC.view의 레이아웃을 잡아주고

 delegate, dataSource를 설정해주고 해당 필수 구현 메소드들을 작성하면 되고

reloadData도 호출해준다.

contentVC.view.snp.makeConstraints { (make) in
            make.top.equalTo(menuVC.view.snp.bottom)
            make.left.right.equalToSuperview()
            make.bottom.equalTo(view.safeAreaLayoutGuide)
        }

contentVC.dataSource = self
contentVC.delegate = self

contentVC.reloadData()

 

하지만 여기서 뭔가 2% 부족한걸 느낄 수 있다.

그렇다

상단 Cell을 터치하면 동일한 index에 해당하는 VC로 스크롤 되는 기능을 구현해야한다.

 

아까 위에서 마지막에 다룬다 했던 delegate 메소드를 보면

didSelect - 메뉴를 선택했을때 호출되는 delegate 메소드

didManualScrollOn - VC를 스크롤했을때 호출되는 delegate 메소드

이렇게 이해하면 된다.

각 VC의 scroll 메소드를 사용.

더 자세한 내용은 상단에 달아놓은 링크를 확인바란다

// MARK: - Menu Delegate

extension MainVC: PagingMenuViewControllerDelegate {
    func menuViewController(viewController: PagingMenuViewController, didSelect page: Int, previousPage: Int) {
        contentVC.scroll(to: page, animated: true)
    }
}

// MARK: - Content Delegate

extension MainVC: PagingContentViewControllerDelegate {
    func contentViewController(viewController: PagingContentViewController, didManualScrollOn index: Int, percent: CGFloat) {
        menuVC.scroll(index: index, percent: percent, animated: false)
    }
}