소개

안녕하세요.
XLPagerTabStrip 라는 멋진 Swift제의 iOS 라이브러리를 발견했으므로 사용법 등을 공유하고 싶습니다.
이르지 못하는 점 등 많이 있다고 생각합니다만, 코멘트등 받을 수 있으면 다행입니다.

※화상의 링크는 GitHub로부터 인용했습니다

htps : // 기주 b. 코 m / x 마 rt ぁ bs / XL 퍼지 r

도입에 대해서

실행 환경은 (Swift3.0.2) (Xcode8.2.1)로 CocoaPods를 이용하고,
이번은 기본적인 gif의 좌상의 Button Bar를 샘플로 해 보고 싶습니다.

Podfile.rb

use_frameworks!

pod 'XLPagerTabStrip'

수업 준비

관리 클래스 (ButtonBarPagerTabStripViewController)

ViewController들을 관리하는 ButtonBarPagerTabStripViewController를 상속한 클래스를 준비합니다.

MainViewController.swift

import UIKit
import XLPagerTabStrip

class MainViewController: ButtonBarPagerTabStripViewController {

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

    override func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        //管理されるViewControllerを返す処理
        let firstVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "First")
        let secondVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Second")
        let thirdVC = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "Third")
        let childViewControllers:[UIViewController] = [firstVC, secondVC, thirdVC]
        return childViewControllers
    }
}

관리되는 ViewController (IndicatorInfoProvider 프로토콜을 구현 한 UIViewController)

스와이프나 버튼을 눌러 전환하는 ViewController 클래스를 준비합니다.
이번 예에서는 First(보라색),Second(녹색),Third(물색)를 준비했습니다만, First가 되고 있는 곳을 Second,Third로서 있을 뿐입니다.

FirstViewController.swift

import UIKit
import XLPagerTabStrip

class FirstViewController: UIViewController, IndicatorInfoProvider {

    //ここがボタンのタイトルに利用されます
    var itemInfo: IndicatorInfo = "First"

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

    //必須
    func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return itemInfo
    }
}

Storyboard 준비

ViewController들을 관리하는 ViewController 1개(흑색)

스와이프로 전환하는 ViewController 3개(보라색, 녹색, 하늘색)

를 준비하고, StoryboardID를 First(보라색),Second(녹색),Third(물색)로 각각 설정하고, 각각의 클래스의 접속도 행하고 있습니다.
검은색의 ViewController에 대해서 전환 부분이 되는 Scroll View와 버튼 부분이 되는 Collection View를 배치합니다.



검정색 ViewController의 Scroll View를 선택하고 마우스 오른쪽 버튼을 클릭하고 다음과 같이 설정합니다.



또한 검은 색 ViewController의 Collection View 클래스를 "ButtonBarView"로 연결하고 Module을 "XLPagerTabStrip"이라고합니다. 그리고 마찬가지로 다음과 같이 설정합니다.

실행해보기

여기서 한 번 실행해 보겠습니다. 이번 예에서는 설치 장소가 자유롭다는 것을 명시하고 싶어서 BarView를 아래쪽에 설치해 보았습니다.

사용자 정의 정보

BarView는 색상 등을 자유롭게 변경할 수 있습니다.
주의점입니다만, 설정은 ViewDidLoad 안에서 행해 super.viewDidLoad() 보다 전에 기술합니다.

설정 예

MainViewController.swift

override func viewDidLoad() {
    //バーの色
    settings.style.buttonBarBackgroundColor = UIColor(red: 73/255, green: 72/255, blue: 62/255, alpha: 1)
    //ボタンの色
    settings.style.buttonBarItemBackgroundColor = UIColor(red: 73/255, green: 72/255, blue: 62/255, alpha: 1)
    //セルの文字色
    settings.style.buttonBarItemTitleColor = UIColor.white
    //セレクトバーの色
    settings.style.selectedBarBackgroundColor = UIColor(red: 254/255, green: 0, blue: 124/255, alpha: 1)
    super.viewDidLoad()
}

색상 설정 속성

코드
설명


buttonBarBackgroundColor: UIColor?
BarView 배경색

buttonBarItemBackgroundColor: UIColor?
버튼 배경색

buttonBarItemTitleColor: UIColor?
버튼의 문자색

selectedBarBackgroundColor: UIColor
선택 바 색상

여백 및 공백과 같은 설정 속성

코드
설명


buttonBarMinimumLineSpacing: CGFloat?
버튼 간격

buttonBarLeftContentInset: CGFloat?
버튼의 왼쪽 여백

buttonBarRightContentInset: CGFloat?
버튼의 오른쪽 여백

selectedBarHeight: CGFloat
선택 바 높이

코드에 의한 천이나 현재의 ViewController 취득 등

관리하는 ButtonBarPagerTabStripViewController(검정색)에는 다음과 같은 속성과 메서드가 있습니다.
초기 위치도 이것으로 설정할 수 있네요.


코드
설명


viewControllers: [UIViewController]
관리할 ViewController의 배열

currentIndex: Int
현재 ViewController의 Index를 나타냅니다.

func moveToViewController(at index: Int, animated: Bool = true)
색인을 지정하여 전환합니다.

참고로 한 기사

iOS에서 탭 디자인을 실현하는 XLPAgerTabStrip이 멋진 Hatena Blog

XLPagerTabStrip GitHub

How to implement Android-Like Tab Layouts in iOS using swift 3

봐 주셔서 감사합니다.