지혜의 개발공부로그

다이어리 앱 만들기 - XLPagerTabStrip 라이브러리 사용해보기

14 Aug 2020 | PROJECT

개인 프로젝트를 정리한 것입니다.
잘못된 내용이 있다면 편하게 댓글 남겨주세요!

다이어리 구성을 바꾸면서 XLPagerTabStrip을 사용해볼 기회가 생겼다.
생각보다 예쁘고 간단하며 커스텀하기 편하다는 장점을 느끼게 되어 정리해보려 한다.

XLPagerTabStrip Github

XLPagerTabStrip

우선 pod에 설치해보자

pod 'XLPagerTabStrip', '~> 9.0'

그리고 메인 뷰컨(부모가 될 뷰컨트롤러)와 하위뷰컨에 XLPagerTabStrip를 import해준다.

import XLPagerTabStrip

Main ViewController

메인(부모) 뷰컨트롤러에서 UIViewController의 상속을 지우고 ButtonBarPagerTapStripViewController를 상속 및 적용해준다.

class ViewController: ButtonBarPagerTapStripViewController
  • 스토리보드에 컬렉션뷰를 추가해주고 ButtonBarView 클래스를 상속시켜준다
  • 스토리보드에 스크롤뷰를 원하는 사이즈에 맞게 추가하고 오토레이아웃을 잡아준다(컬렉션 뷰도 마찬가지)

그리고 코드는 아래와 같다.

import XLPagerTabStrip

class ParentVC: ButtonBarPagerTabStripViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        let diary = UIStoryboard.init(name: "Diary", bundle: nil).instantiateViewController(withIdentifier: "DiaryVC") as! DiaryVC
        diary.tabName = "다이어리"


        let calendar = UIStoryboard(name: "Calendar", bundle: nil).instantiateViewController(withIdentifier: "CalendarVC") as! CalendarVC
        calendar.tabName = "달력"

        let plan = UIStoryboard(name: "Plan", bundle: nil).instantiateViewController(withIdentifier: "PlanVC") as! PlanVC
        plan.tabName = "일정"

        return [calendar, plan, diary]
    }
}
  • Main ViewController에서 다음과 같이 Paging될 화면과 뷰컨 재활용으로 화면 표시한다.
  • 반드시 viewController함수를 오버라이딩해서 표시해주어야 한다.
    • 그렇지 않으면 쓰레드에러가 발생한다.
  • Child ViewController의 내용은 메인뷰컨의 스크롤뷰에 적용되어 표시해야한다.

Child ViewController

메인 뷰가 아닌 하위 뷰에는 아래와 같은 코드를 추가해준다.

import XLPagerTabStrip

class PlanVC: UIViewController, IndicatorInfoProvider {
    var tabName: String = ""
    @IBOutlet weak var tabNameLbl: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        tabNameLbl.text = tabName
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return IndicatorInfo(title: "\(tabName)")
    }
}
  • IndicatorInfoProvider는 PagerTab에 나올 이름과 뷰컨을 재활용하여 화면에 보여준다.
  • func indigator는 각 화면에 맞는 Label값을 인디케이터 이름으로 리턴한다.

Related Posts