TaillookTech

フルスタックエンジニアになる

Swift4 PagingMenuControllerでタブを実装する

PagingMenuControllerとは

上部のタブをスワイプで切り替えることが出来るUIライブラリ

f:id:taillook:20171020191014g:plain

インストール

今回はCocoaPodsでインストールします.

# Uncomment the next line to define a global platform for your project
platform :ios, '11.0'

target 'test' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for test
  pod 'PagingMenuController'
end

実装

まず,Storyboard上でViewController(以下vc)を3つ置く.
次に各ViewControllerにclassを設定する.

  • 白背景のvcにViewController
  • 緑背景のvcにViewController1
  • ピンク背景のvcにViewController2

f:id:taillook:20171020191419p:plain

以下コード
ViewController.swift

import UIKit
import PagingMenuController

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let options = PagingMenuOptions()
        let pagingMenuController = PagingMenuController(options: options)
        
        addChildViewController(pagingMenuController)
        view.addSubview(pagingMenuController.view)
        pagingMenuController.didMove(toParentViewController: self)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

private struct PagingMenuOptions: PagingMenuControllerCustomizable {
    let vc1 = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "ViewController1") as! ViewController1
    let vc2 = UIStoryboard(name: "Main", bundle: nil).instantiateViewController(withIdentifier: "ViewController2") as! ViewController2
    
    fileprivate var componentType: ComponentType {
        return .all(menuOptions: MenuOptions(), pagingControllers: pagingControllers)
    }
    
    fileprivate var pagingControllers: [UIViewController] {
        return [vc1, vc2]
    }
    
    fileprivate struct MenuOptions: MenuViewCustomizable {
        var displayMode: MenuDisplayMode {
            return .segmentedControl
        }
        var height: CGFloat {
            return 40
        }
        var backgroundColor: UIColor {
            return UIColor.gray
        }
        var selectedBackgroundColor: UIColor {
            return UIColor.gray
        }
        var focusMode: MenuFocusMode {
            return .underline(height: 4, color: UIColor.darkGray, horizontalPadding: 0, verticalPadding: 0)
        }
        var itemsOptions: [MenuItemViewCustomizable] {
            return [MenuItem1(), MenuItem2()]
        }
    }
    
    fileprivate struct MenuItem1: MenuItemViewCustomizable {
        var displayMode: MenuItemDisplayMode {
            return .text(title: MenuItemText(text: "First", color: UIColor.lightGray, selectedColor: UIColor.white))
        }
    }
    
    fileprivate struct MenuItem2: MenuItemViewCustomizable {
        var displayMode: MenuItemDisplayMode {
            return .text(title: MenuItemText(text: "Second", color: UIColor.lightGray, selectedColor: UIColor.white))
        }
    }
}

PagingMenuOptionsのMenuOptions内でビューのUIをカスタマイズしている.