iOS에서 안드로이드의 PagerTabStrip 구현한 XLPagerTabStrip 사용하기

2018-09-05T00:15:32+00:002018/08/28|

iOS에서 안드로이드의 PagerTabStrip 구현한 XLPagerTabStrip 사용하는 방법을 까먹기 전에 작성하려고 합니다.

 

본업이 iOS 개발자가 아니라서 가끔 하게되는데 자꾸 까먹게되네요.


XLPagerTabStrip 소개

XLPagerTabStrip은 아래와 같은 기능을 구현해 놓은 오픈소스 프로젝트 입니다.

 

 

깃헙 페이지에서도 설명을 보시면 되겠지만 Swift4를 지원하고 있으며 CocoaPods1에서 설치할 수 있습니다. ( 그리고 MIT 라이선스 )


설치

설치는 아래와 같이 CocoaPods로 설치하시면 됩니다.

 


사용 방법

 

1.부모 컨트롤러 클래스 수정

싱글 뷰 컨트롤러 프로젝트를 생성 후, 스토리보드의 메인이 되는 클래스 파일을 아래와 같이 수정합니다.

 

2.부모 컨트롤러 레이아웃 수정

다음에 스토리보드로 이동하여 컨트롤러의 레이아웃을 수정합니다.

 

기본적으로 XLPagerTabStrip의 상단 탭은 CollectionView를, 하단의 뷰는 ScrollView를 통해 움직이는 것 같습니다.

 

그림으로 표현하면 아래와 같을 것 같네요.

 

2.1 CollectionView 추가 및 설정

위와 같이 레이아웃을 가져가기 위해서 먼저 CollectionView를 상단에 추가합니다. ( 추가 시 자동으로 딸려오는 Cell은 지워주도록 합니다. )

 

Constraints를 Top 0, Left 0, Right 0주고 높이를 64로 설정합니다. ( 퍼온 사진이라 화질구지 양해 부탁 드립니다. )

 

클래스를 ButtonBarView 클래스와 연결합니다. ( 이 작업을 먼저해야 New Referencing Outlet 에서 buttonBarView가 보입니다. )

CollectionView를 마우스 우클릭하여 New Referencing Outlet을 노란색 영역으로 드래그 후 buttonBarView에 연결합니다.

 

2.2 ScrollView 추가

ScrollView를 CollectionView 밑에 위치시키고, Constraints를 Top 0, Left 0, Right 0, Bottom 0 설정합니다.

 

마찬가지로 ScrollView를 마우스 우클릭하여 New Referencing Outlet을 노란색 영역으로 드래그 후 containerView에 연결합니다.

 

3. 컨트롤러 클래스에 viewDidLoad 수정

아래의 코드를 viewDidLoad에 작성해 주세요. ( viewDidLoad 함수 위에 변수 추가 필요 )

 

4. 자식 클래스 파일 생성

childViewController1.swift와 childViewController2.swift를 만들고 아래와 같이 코딩 해주세요.

자세히 볼 것은 import XLPagerTabStrip과 IndicatorInfoProvier 확장 및 indicatorInfo 프로토콜 구현입니다.

 

5. 부모에 자식 붙이기

아래의 코드와 같이 부모 컨트롤러 클래스에서 자식의 클래스 2개를 붙이는 코드를 작성해 줍니다.

 

사진으로 보면 아래와 같습니다.

6. 실행

실행해보면 아래와 색은 다르지만 ( 위의 설명에서는 자식 클래스에서 백그라운드 색 및 레이블을 지정안했기 때문에 ) 탭바 형식으로 실행되는 것을 볼 수 있으실 것입니다.

 

7. 레퍼런스

https://medium.com/michaeladeyeri/how-to-implement-android-like-tab-layouts-in-ios-using-swift-3-578516c3aa9

 

  1. CocoaPods는 Swift 및 Objective-C 코코아 프로젝트의 종속성 관리자입니다. 51,000 개가 넘는 라이브러리가 있으며 300 만 개가 넘는 응용 프로그램에 사용됩니다.

Leave A Comment