PagingMenuControllerとは
上部のタブをスワイプで切り替えることが出来るUIライブラリ
インストール
今回は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
以下コード
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をカスタマイズしている.