Swift-ページングメニューの実装（PagingMenuControllerライブラリを使用してタブタグの切り替えを実装）
Swift Implementation Paging Menu
多くのページングメニュー（セグメントメニュー）
アプリで使用されます。ほとんどのニュースのようにNetease News、Today's headlinesなどのアプリでは、上部にナビゲーションメニューがあります。このナビゲーションメニューはラベルのコレクションであり、各ラベルはニュースカテゴリを表します。このタブをクリックすると、対応するサブページに切り替わります。同時に、ページを左右にスライドさせると、上のラベルも移動します。この記事では、優れたサードパーティのページングビューコントロールについて説明します。
PagingMenuControllerは、メニューをカスタマイズできるだけでなく、スタイルを自由に変更することもできます。 まず、インストール構成
（1）から
GitHubで最新のコードをダウンロードします。 https://github.com/kitasuke/PagingMenuController （2）ソースパッケージからダウンロードされます
PagingMenuController.xcodeprojをプロジェクトにドラッグアンドドロップします。 
（3）エンジニアリング->
一般->埋め込まれたバイナリアイテム、置くPagingMenuController.frameworkが追加されました。 
（4）最後に、使用する必要がある場合
PagingMenuControllerはどこにありますかインポートが入ります。 | 1 | import PagingMenuController |
第二に、純粋なコードの使用例
1、効果チャート
（1）メインビューのトップページメニューには、2つのサブビューに対応する2つのメニューラベルがあります。 （2）メニュータブをクリックすると、次に便利なものが切り替わり、対応するサブビューが表示されます。 （3）サブビューを左右に直接スライドさせて切り替えることもでき、上のメニューラベルのステータスも同期して更新されます。
2、サンプルコード
（1）サブビューコントローラー1（
ViewController1.swift）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import UIKit //Subview controller 1 class ViewController1 : UIViewController {override func viewDidLoad() {super .viewDidLoad()view.backgroundColor = UIColor .orangelet textLabel = UILabel (frame: CGRect (x: 0, y: 100, width: self .view.frame.width,height: 30))textLabel.textAlignment = .centertextLabel.font = UIFont .systemFont(ofSize: 33)textLabel.textColor = .whitetextLabel.text = 'the film'view.addSubview(textLabel)} } |
（2）サブビューコントローラー2（
ViewController2.swift）
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | import UIKit //Subview controller 2 class ViewController2 : UIViewController {override func viewDidLoad() {super .viewDidLoad()view.backgroundColor = UIColor .darkGraylet textLabel = UILabel (frame: CGRect (x: 0, y: 100, width: self .view.frame.width,height: 30))textLabel.textAlignment = .centertextLabel.font = UIFont .systemFont(ofSize: 33)textLabel.textColor = .whitetextLabel.text = 'music'view.addSubview(textLabel)} } |
（3）メインビューコントローラー（ViewController.swift） | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | import UIKit import PagingMenuController / / paging menu configuration private struct PagingMenuOptions : PagingMenuControllerCustomizable {/ / The first child view controllerprivate let viewController1 = ViewController1 ()/ / The second child view controllerprivate let viewController2 = ViewController2 ()//Component typefileprivate var componentType: ComponentType {return .all(menuOptions: MenuOptions (), pagingControllers: pagingControllers)}//All child view controllersfileprivate var pagingControllers: [ UIViewController ] {return [viewController1, viewController2]}//Menu configuration itemfileprivate struct MenuOptions : MenuViewCustomizable {/ / menu display modevar displayMode: MenuDisplayMode {return .segmentedControl}//Menu Itemvar itemsOptions: [ MenuItemViewCustomizable ] {return [ MenuItem1 (), MenuItem2 ()]}}/ / The first menu itemfileprivate struct MenuItem1 : MenuItemViewCustomizable {/ / Custom menu item namevar displayMode: MenuItemDisplayMode {return .text(title: MenuItemText (text: 'the film' ))}}//The second menu itemfileprivate struct MenuItem2 : MenuItemViewCustomizable {/ / Custom menu item namevar displayMode: MenuItemDisplayMode {return .text(title: MenuItemText (text: 'music' ))}} } //Main view controller class ViewController : UIViewController {override func viewDidLoad() {super .viewDidLoad()/ / paging menu configurationlet options = PagingMenuOptions ()/ / page menu controller initializationlet pagingMenuController = PagingMenuController (options: options)/ / page menu controller size settingspagingMenuController.view.frame.origin.y += 64pagingMenuController.view.frame.size.height -= 64/ / Establish a parent-child relationshipaddChildViewController(pagingMenuController)//Page menu controller view is added to the current viewview.addSubview(pagingMenuController.view)}override func didReceiveMemoryWarning() {super .didReceiveMemoryWarning()} } |
ソースコードのダウンロード： 
hangge_1656.zip 第三に、ストーリーボードの使用サンプル
1、レンダリング
具体的な機能は上記と同じです。
2、ストーリーボード関連の操作
（1）メインビューに1つ追加します
コンテナビュー、および関連する制約を設定します。 
（二）
コンテナビューのデフォルトの埋め込みはUIViewController、に変更しましたPagingMenuController。 
3、サンプルコード
（1）サブビューコントローラー（
ViewController1.swift、ViewController2.swift） | 1 | / / Specific reference to the above pure code implementation part |
（2）メインビューコントローラー（ViewController.swift）
ハイライトは、上記の純粋なコード実装と同じではないことを示しています。 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | import UIKit import PagingMenuController / / paging menu configuration private struct PagingMenuOptions : PagingMenuControllerCustomizable {/ / The first child view controllerprivate let viewController1 = ViewController1 ()/ / The second child view controllerprivate let viewController2 = ViewController2 ()//Component typefileprivate var componentType: ComponentType {return .all(menuOptions: MenuOptions (), pagingControllers: pagingControllers)}//All child view controllersfileprivate var pagingControllers: [ UIViewController ] {return [viewController1, viewController2]}//Menu configuration itemfileprivate struct MenuOptions : MenuViewCustomizable {/ / menu display modevar displayMode: MenuDisplayMode {return .segmentedControl}//Menu Itemvar itemsOptions: [ MenuItemViewCustomizable ] {return [ MenuItem1 (), MenuItem2 ()]}}/ / The first menu itemfileprivate struct MenuItem1 : MenuItemViewCustomizable {/ / Custom menu item namevar displayMode: MenuItemDisplayMode {return .text(title: MenuItemText (text: 'the film' ))}}//The second menu itemfileprivate struct MenuItem2 : MenuItemViewCustomizable {/ / Custom menu item namevar displayMode: MenuItemDisplayMode {return .text(title: MenuItemText (text: 'music' ))}} } //Main view controller class ViewController : UIViewController {override func viewDidLoad() {super .viewDidLoad()/ / Get the paging menu configurationlet options = PagingMenuOptions ()/ / Set the paging menu configurationlet pagingMenuController = self .childViewControllers.first as ! PagingMenuControllerpagingMenuController.setup(options)}override func didReceiveMemoryWarning() {super .didReceiveMemoryWarning()} } |
ソースコードのダウンロード： hangge_1656.zip 第四に、ラベル、ページ切り替え応答
新しいページに切り替えるときにデータを要求するなど、一部の操作でページ切り替えイベントをリッスンする必要がある場合があります。このパス
PagingMenuControlleronMoveコールバックは達成可能です。このメソッドは、ページ切り替えの前後、ページ切り替えの前後、および指でページをスワイプする前後にメニューが移動するたびに呼び出されます。
1、サンプルコード
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | / / page menu controller initialization let pagingMenuController = PagingMenuController (options: options) //....omitting some codeview.addSubview(pagingMenuController.view) / / page switch response pagingMenuController.onMove = { state inswitch state {case let .willMoveItem(menuItemView, previousMenuItemView):print ( '--- The label will be switched ---' )print ( 'Old label: (previousMenuItemView.titleLabel.text!)' )print ( 'New tag: (menuItemView.titleLabel.text!)' )case let .didMoveItem(menuItemView, previousMenuItemView):print ( '--- Label switching completed ---' )print ( 'Old label: (previousMenuItemView.titleLabel.text!)' )print ( 'New tag: (menuItemView.titleLabel.text!)' )case let .willMoveController(menuController, previousMenuController):print ( '--- The page will be switching ---' )print ( 'Old page: (previousMenuController)' )print ( 'New page: (menuController)' )case let .didMoveController(menuController, previousMenuController):print ( '--- Page switch completed ---' )print ( 'Old page: (previousMenuController)' )print ( 'New page: (menuController)' )case .didScrollStart:print ( '--- Pagination starts to slide left and right ---' )case .didScrollEnd:print ( '--- Pagination stops sliding left and right ---' )} } |
2、ランニング効果
（1）トップメニュータブをクリックしてページを切り替えると、コンソールに次の情報が出力されていることがわかります。
（2）指でスワイプしてページを切り替えると、コンソールに次のメッセージが出力されます。
5、コードを使用してラベルを切り替えます
たとえば、次のコードは、ページングメニューコントローラーを最初のコントローラーに自動的に切り替えます。
2ページ。 | 1 | pagingMenuController.move(toPage: 1, animated: true ) |
6つのカスタムページングコントローラースタイル
PagingMenuControllerCustomizableオブジェクトには、ViewController全体をカスタマイズするための次のプロパティがあります。 1、defaultPage：Int
デフォルトページのインデックスを設定します。指定しない場合、デフォルトで最初のビューページが表示されます。
2、animationDuration：TimeInterval
ページはアニメーション時間を切り替えます。
3、isScrollEnabled：ブール値
ページ切り替えのために指を左右にスライドさせるかどうか、
Falseは、メニュータブをクリックすることによってのみ切り替えることができます。 4、backgroundColor：UIColor
ページの背景色を設定します。
5、lazyLoadingPage：LazyLoadingPage
遅延読み込みページの数、これは列挙型であり、オプションの値は次のとおりです： | 1 2 3 4 5 | public enum LazyLoadingPage {case one // Currently sets false to isScrollEnabled at this moment. Should be fixed in the future.case threecase all // Currently not available for Infinite mode } |
6、menuControllerSet：MenuControllerSet
これは何をすべきかがあまり明確ではありませんが、次のようにオプションの値の列挙もあります： | 1 2 3 4 | public enum MenuControllerSet {case singlecase multiple } |
7、componentType：ComponentType
これは、ページングメニューコントローラー全体に含まれるページとメニューラベルを構成するために重要です。これは、次のようにオプションの値を使用した列挙型でもあります：
| 1 2 3 4 5 | public enum ComponentType {case menuView(menuOptions: MenuViewCustomizable )case pagingController(pagingControllers: [ UIViewController ])case all(menuOptions: MenuViewCustomizable , pagingControllers: [ UIViewController ]) } |
8、以下は完全な構成例です
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | / / paging menu configuration private struct PagingMenuOptions : PagingMenuControllerCustomizable {/ / The default display page 2var defaultPage: Int = 1/ / page switching animation playback time is 0.5 secondsvar animationDuration: TimeInterval = 0.5/ / Do not allow the finger to slide left and right page switchvar isScrollEnabled: Bool = false//The background color of the page is purplevar backgroundColor: UIColor = .purple//lazy loading page number (default is .three)var lazyLoadingPage: LazyLoadingPage = .three//Not sure what to use (default is .multiple)var menuControllerSet: MenuControllerSet = .multiple/ / The first child view controllerprivate let viewController1 = ViewController1 ()/ / The second child view controllerprivate let viewController2 = ViewController2 ()//Component typefileprivate var componentType: ComponentType {return .all(menuOptions: MenuOptions (), pagingControllers: pagingControllers)}//All child view controllersfileprivate var pagingControllers: [ UIViewController ] {return [viewController1, viewController2]}//Menu configuration itemfileprivate struct MenuOptions : MenuViewCustomizable {/ / menu display modevar displayMode: MenuDisplayMode {return .segmentedControl}//Menu Itemvar itemsOptions: [ MenuItemViewCustomizable ] {return [ MenuItem1 (), MenuItem2 ()]}}/ / The first menu itemfileprivate struct MenuItem1 : MenuItemViewCustomizable {/ / Custom menu item namevar displayMode: MenuItemDisplayMode {return .text(title: MenuItemText (text: 'the film' ))}}//The second menu itemfileprivate struct MenuItem2 : MenuItemViewCustomizable {/ / Custom menu item namevar displayMode: MenuItemDisplayMode {return .text(title: MenuItemText (text: 'music' ))}} } |
セブン、カスタムメニューバースタイル
MenuViewCustomizableオブジェクトには、メニューバーをカスタマイズするための次のプロパティがあります。 1、backgroundColor：UIColor
選択されていないメニューラベルの背景色を設定します。
2、selectedBackgroundColor：UIColor
選択したメニューラベルの背景色を設定します。
3、高さ：CGFloat
メニューラベルの高さを設定します。
4、animationDuration：TimeInterval
メニューラベルを切り替えたときのアニメーションの長さを設定します。
5、deceleratingRate：CGFloat
メニューを設定して、アニメーションの減速率を切り替えます（デフォルト：
UIScrollViewDecelerationRateFast） 6、menuSelectedItemCenter：ブール
何をすべきかよくわかりません。
7、displayMode：MenuDisplayMode
メニュー表示モード。これは、3つのオプション値を持つ列挙型です。
| 1 2 3 4 5 6 7 | public enum MenuDisplayMode {case standard(widthMode: MenuItemWidthMode , centerItem: Bool ,scrollingMode: MenuScrollingMode )case segmentedControlcase infinite(widthMode: MenuItemWidthMode ,scrollingMode: MenuScrollingMode ) / / This requires at least 3 pages } |
どこ
MenuItemWidthMode、MenuScrollingModeも列挙型です。 | 1 2 3 4 5 6 7 8 9 10 11 12 | / / Set the width of the menu label public enum MenuItemWidthMode {case flexible //automaticcase fixed(width: CGFloat ) //fixed width } / / How to scroll the menu public enum MenuScrollingMode {case scrollEnabled / / Can switch across multiple menu itemscase scrollEnabledAndBouces / / Can switch across multiple menu itemscase pagingEnabled / / Menu can only be switched one by one } |
| 1 2 3 4 | / / menu display mode (segment mode) var displayMode: MenuDisplayMode {return .segmentedControl } |
- 例2：標準モード、ここでは選択したラベルを常に中央に配置します
| 1 2 3 4 5 | //Menu display mode (standard mode) var displayMode: MenuDisplayMode {return .standard(widthMode: .fixed(width: 30), centerItem: true ,scrollingMode: .pagingEnabled) } |
- 例3：無限ループモード（これには少なくとも3つのメニュー項目が必要です）
| 1 2 3 4 | / / menu display mode (infinite loop mode) var displayMode: MenuDisplayMode {return .infinite(widthMode: .flexible, scrollingMode: .pagingEnabled) } |
8、focusMode：MenuFocusMode
メニューラベルのスタイルを選択します。これも列挙型です。 | 1 2 3 4 5 6 7 | public enum MenuFocusMode {case nonecase underline(height: CGFloat , color: UIColor , horizontalPadding: CGFloat ,verticalPadding: CGFloat )case roundRect(radius: CGFloat , horizontalPadding: CGFloat , verticalPadding: CGFloat ,selectedColor: UIColor ) } |
| 1 2 | / / selected items no style var focusMode: MenuFocusMode = .none |
| 1 2 3 | //Selected item is orange underline style var focusMode: MenuFocusMode = .underline(height: 3, color: .orange, horizontalPadding: 0,verticalPadding: 0) |
| 1 2 3 | //Selected item is an orange rectangle background var focusMode: MenuFocusMode = .roundRect(radius: 6, horizontalPadding: 5,verticalPadding: 8, selectedColor: .orange) |
9おかしいdummyItemViewsSet：Int
どうしたらいいのかわからない。
10、menuPosition：MenuPosition
メニューバーの場所。メニューバーがページビューの上にあるか下にあるかを指定できます。 
これも列挙型です。
| 1 2 3 4 | public enum MenuPosition {case topcase bottom } |
11、dividerImage：UIImage？
各ラベルの右側に表示される、メニューラベル間の個別の画像。 
| 1 2 | / / Set the separation picture between the labels var dividerImage: UIImage ? = UIImage (named: 'dividerImage.png' )! |
12、以下は完全な使用例です
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | / / Menu bar configuration fileprivate struct MenuOptions : MenuViewCustomizable {/ / Set the unselected menu label background is dark grayvar backgroundColor: UIColor = .darkGray/ / Set the selected menu label background is light grayvar selectedBackgroundColor: UIColor = .lightText/ / Set the menu label height is 40var height: CGFloat = 40/ / Menu switch animation playback time is 0.5 secondsvar animationDuration: TimeInterval = 0.5/ / Menu switch animation deceleration rate (default: UIScrollViewDecelerationRateFast)var deceleratingRate: CGFloat = UIScrollViewDecelerationRateFast//I don’t know what to do.var menuSelectedItemCenter: Bool = false/ / menu display mode (segment mode)var displayMode: MenuDisplayMode {return .segmentedControl}//Selected item is an orange rectangle backgroundvar focusMode: MenuFocusMode = .roundRect(radius: 6, horizontalPadding: 5,verticalPadding: 8, selectedColor: .orange)//I don’t know what to do.var dummyItemViewsSet: Int = 3/ / Set the menu bar belowvar menuPosition: MenuPosition = .bottom/ / Set the separation picture between the labelsvar dividerImage: UIImage ? = UIImage (named: 'dividerImage.png' )!//Menu Itemvar itemsOptions: [ MenuItemViewCustomizable ] {return [ MenuItem1 (), MenuItem2 (), MenuItem3 () , MenuItem4 ()]} } |
8、個々のメニューラベルスタイルをカスタマイズします
MenuItemViewCustomizableオブジェクトには、個々のメニュー項目をカスタマイズするための次のプロパティがあります。 1、horizontalMargin：CGFloat
メニューラベルの左右の水平方向の間隔を設定します。
| 1 2 3 4 5 6 7 8 | //The second menu item fileprivate struct MenuItem2 : MenuItemViewCustomizable {//The horizontal margin of the label is set to 50var horizontalMargin: CGFloat = 50/ / Custom menu item namevar displayMode: MenuItemDisplayMode = .text(title: MenuItemText (text: 'music e' )) } |
2、displayMode：MenuItemDisplayMode
列挙型であるメニューラベルの表示モードを設定します。
| 1 2 3 4 5 6 | public enum MenuItemDisplayMode {case text(title: MenuItemText ) //Normal title textcase multilineText(title: MenuItemText , description: MenuItemText ) //title + description textcase image(image: UIImage , selectedImage: UIImage ?) //imagecase custom(view: UIView ) //Custom view } |
- 例1：ラベルはタイトル+説明テキストとして表示されます
| 1 2 3 4 5 6 7 8 9 10 11 12 | //The second menu item fileprivate struct MenuItem2 : MenuItemViewCustomizable {//The horizontal margin of the label is set to 50var horizontalMargin: CGFloat = 50/ / Custom menu item title and descriptionvar displayMode: MenuItemDisplayMode {let desFont = UIFont .systemFont(ofSize: 10)let description = MenuItemText (text: 'Music' , font: desFont , selectedFont: desFont )return .multilineText(title: MenuItemText (text: 'music' ), description: description)} } |
| 1 2 3 4 5 6 7 8 9 10 11 | //The second menu item fileprivate struct MenuItem2 : MenuItemViewCustomizable {//The horizontal margin of the label is set to 50var horizontalMargin: CGFloat = 50/ / menu items are displayed as picturesvar displayMode: MenuItemDisplayMode {return .image(image: UIImage (named: 'forward' )!,selectedImage: UIImage (named: 'forward' )!)} } |
原文： www.hangge.com 転載は元のリンクを保持してください： http://www.hangge.com/blog/cache/detail_1656.html 転載：https：//www.cnblogs.com/Free-Thinker/p/7228766.html
hangge_1656.zip 
これも列挙型です。
