A paging menu controller built from other view controllers placed inside a scroll view (like Spotify, Windows Phone, Instagram)

Related tags

Menu PageMenu
Overview

PageMenuHeader

Version License Platform Carthage compatible

Unfortunately, life gets in the way sometimes and I won't be able to maintain this library any longer and upgrade this library to where it needs to be.

Featured In

WhatSport Funny Or Die Alabama MVD HEALTHFUL Bboy Event
SportsQuack LLC Funny Or Die, Inc. CAPS Junaid Younus Jazz Pixels ООО

Latest Update

1.2.8 Release (06/22/2015)

  • Bug fixes
  • Obj-c more stable

Description

A fully customizable and flexible paging menu controller built from other view controllers placed inside a scroll view allowing the user to switch between any kind of view controller with an easy tap or swipe gesture similar to what Spotify, Windows Phone, and Instagram use

Similar to Spotify

PageMenuDemo

PageMenuScreen2

Similar to Windows Phone

PageMenuDemo2

PageMenuScreen2

Similar to Instagram segmented control

PageMenuDemoSegmentedControlGif

PageMenuDemoScreen6

Installation

CocoaPods

PageMenu is available through CocoaPods. !! Swift only !!

To install add the following line to your Podfile:

pod 'PageMenu'

Carthage

PageMenu is also available through Carthage. Append this line to Cartfile and follow this instruction.

github "uacaps/PageMenu"

Manual Installation

The class file required for PageMenu is located in the Classes folder in the root of this repository as listed below:

  • CAPSPageMenu.swift

How to use PageMenu

First you will have to create a view controller that is supposed to serve as the base of the page menu. This can be a view controller with its xib file as a separate file as well as having its xib file in storyboard. Following this you will have to go through a few simple steps outlined below in order to get everything up and running.

1) Add the files listed in the installation section to your project

2) Add a property for CAPSPageMenu in your base view controller

Swift

var pageMenu : CAPSPageMenu?

Objective-C

@property (nonatomic) CAPSPageMenu *pagemenu;

3) Add the following code in the viewDidLoad function in your view controller

Swift

// Array to keep track of controllers in page menu
var controllerArray : [UIViewController] = []

// Create variables for all view controllers you want to put in the 
// page menu, initialize them, and add each to the controller array. 
// (Can be any UIViewController subclass)
// Make sure the title property of all view controllers is set
// Example:
var controller : UIViewController = UIViewController(nibName: "controllerNibName", bundle: nil)
controller.title = "SAMPLE TITLE"
controllerArray.append(controller)

// Customize page menu to your liking (optional) or use default settings by sending nil for 'options' in the init
// Example:
var parameters: [CAPSPageMenuOption] = [
    .MenuItemSeparatorWidth(4.3), 
    .UseMenuLikeSegmentedControl(true), 
    .MenuItemSeparatorPercentageHeight(0.1)
]

// Initialize page menu with controller array, frame, and optional parameters
pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRectMake(0.0, 0.0, self.view.frame.width, self.view.frame.height), pageMenuOptions: parameters)

// Lastly add page menu as subview of base view controller view
// or use pageMenu controller in you view hierachy as desired
self.view.addSubview(pageMenu!.view)

Objective-C

// Array to keep track of controllers in page menu
NSMutableArray *controllerArray = [NSMutableArray array];

// Create variables for all view controllers you want to put in the 
// page menu, initialize them, and add each to the controller array. 
// (Can be any UIViewController subclass)
// Make sure the title property of all view controllers is set
// Example:
UIViewController *controller = [UIViewController alloc] initWithNibname:@"controllerNibnName" bundle:nil];
controller.title = @"SAMPLE TITLE";
[controllerArray addObject:controller];

// Customize page menu to your liking (optional) or use default settings by sending nil for 'options' in the init
// Example:
NSDictionary *parameters = @{CAPSPageMenuOptionMenuItemSeparatorWidth: @(4.3),
                             CAPSPageMenuOptionUseMenuLikeSegmentedControl: @(YES),
                             CAPSPageMenuOptionMenuItemSeparatorPercentageHeight: @(0.1)
                             };

// Initialize page menu with controller array, frame, and optional parameters
_pageMenu = [[CAPSPageMenu alloc] initWithViewControllers:controllerArray frame:CGRectMake(0.0, 0.0, self.view.frame.size.width, self.view.frame.size.height) options:parameters];

// Lastly add page menu as subview of base view controller view
// or use pageMenu controller in you view hierachy as desired
[self.view addSubview:_pageMenu.view];

4) Optional - Delegate Methods

In order to use the delegate methods first set the delegate of page menu to the parent view controller when setting it up

Swift

// Optional delegate 
pageMenu!.delegate = self

Objective-C

// Optional delegate 
_pageMenu.delegate = self;

After that you will be able to set up the following delegate methods inside of your parent view controller

Swift

func willMoveToPage(controller: UIViewController, index: Int){}

func didMoveToPage(controller: UIViewController, index: Int){}

Objective-C

// Optional delegate 
- (void)willMoveToPage:(UIViewController *)controller index:(NSInteger)index {}

- (void)didMoveToPage:(UIViewController *)controller index:(NSInteger)index {}

5) You should now be ready to use PageMenu!! 🎉

Customization

There are many ways you are able to customize page menu for your needs and there will be more customizations coming in the future to make sure page menu conforms to your app design. These will all be properties in CAPSPageMenu that can be changed from your base view controller. (Property names given with each item below)

1) Colors

  • Background color behind the page menu scroll view to blend in view controller backgrounds

    viewBackgroundColor (UIColor)
    
  • Scroll menu background color

    scrollMenuBackgroundColor (UIColor)
    
  • Selection indicator color

    selectionIndicatorColor (UIColor)
    
  • Selected menu item label color

    selectedMenuItemLabelColor (UIColor)
    
  • Unselected menu item label color

    unselectedMenuItemLabelColor (UIColor)
    
  • Menu item separator color (Used for segmented control style)

    menuItemSeparatorColor (UIColor)
    
  • Bottom menu hairline color

    bottomMenuHairlineColor (UIColor)
    

2) Dimensions

  • Scroll menu height

    menuHeight (CGFloat)
    
  • Scroll menu margin (leading space before first menu item and after last menu item as well as in between items)

    menuMargin (CGFloat)
    
  • Scroll menu item width

    menuItemWidth (CGFloat)
    
  • Selection indicator height

    selectionIndicatorHeight (CGFloat)
    

3) Segmented Control

  • Use PageMenu as segmented control

    useMenuLikeSegmentedControl (Bool)
    
  • Menu item separator width in pixels

    menuItemSeparatorWidth (CGFloat)
    
  • Menu item separator height in percentage of menu height

    menuItemSeparatorPercentageHeight (CGFloat)
    
  • Menu item separator has rounded edges

    menuItemSeparatorRoundEdges (Bool)
    

4) Others

  • Menu item title label font

    menuItemFont (UIFont)
    
  • Bottom menu hairline

    addBottomMenuHairline (Bool)
    
  • Menu item witdh based on title text width (see Demo 3)

    menuItemWidthBasedOnTitleTextWidth (Bool)
    
  • Disable/Enable horizontal bounce for controller scroll view

    enableHorizontalBounce (Bool)
    
  • Hide/Unhide top menu bar

    hideTopMenuBar (Bool)
    
  • Center menu items in menu if they don't span entire width (Not currently supported for menu item width based on title)

    centerMenuItems (Bool)
    
  • Scroll animation duration on menu item tap in milliseconds

    scrollAnimationDurationOnMenuItemTap (Int)
    

Apps using PageMenu

Please let me know if your app in the AppStore uses this library so I can add your app to the list of apps featuring PageMenu.

Future Work

  • Screen rotation support
  • Objective-C version
  • Infinite scroll option / Wrap items
  • Carthage support
  • More customization options

Credits

Niklas Fahl (fahlout) - iOS Developer (LinkedIn)

Thank you for your contributions:

masarusanjp

  • Type-safe options

John C. Daub (hsoi)

  • iOS 7.1 fixes
  • Content size fixes on viewDidLayoutSubviews()

Gurpartap Singh (Gurpartap)

  • CocoaPods fixes
  • ScrollToTop fixes

Chao Ruan (rcgary)

  • Swift 1.2 Support

Update Log

1.2.7 Release (06/05/2015)

  • CocoaPods now has current version
  • Objective-C version in Beta
  • Demos updated

1.2.6 Release (05/26/2015)

1.2.5 Release (04/14/2015)

1.2.4 Release (03/24/2015)

  • Small improvements thanks to hsoi and kitasuke

1.2.3 Release (02/09/2015)

  • iOS 7.1 errors resolved - hsoi
  • Scroll to top now working for each page when tapping status bar - Gurpartap
  • Now fully working with CocoaPods - Gurpartap

1.2.2 Release (02/09/2015)

  • Now fully working with CocoaPods thanks to Gurpartap

1.2.1 Release (02/02/2015)

  • Added delegate methods to know when page menu will move and did move to a certain page index
  • Fixed bug where pages would disappear when tapping around on menu items
  • Added a few more customization options (enableHorizontalBounce, hideTopMenuBar, menuItemSeparatorColor)
  • Edited Demo 5 to show how to set up view controllers and page menu in order to be able to push from cells, etc.
  • Changed setup of PageMenu to eliminate some common issues (Please be aware that you will need to make a few changes in your project if you're already using PageMenu)

1.2.0 Release (01/26/2015)

  • Added ability to center menu items if they don't span over entire width of the PageMenu view (currently only supported for fixed menu item width)
  • Added ability to use PageMenu in a similar way as segmented control
  • Added function to move to any page index in PageMenu

1.1.1 Release (01/16/2015)

  • Fixed bug that prevented user from tapping anything within a controller
  • Menu now fully scrollable

1.1.0 Release (01/15/2015)

  • Major performance improvements
  • Auto-rotation bug fixed
  • Customization option added for scroll animation duration on menu item tap

License

Copyright (c) 2014 The Board of Trustees of The University of Alabama All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
  3. Neither the name of the University nor the names of the contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Comments
  • Unable to push views (segue or programatically)

    Unable to push views (segue or programatically)

    Hi,

    1st thing - loving this controller!

    I am trying to push a segue when a collectionviewcell is pressed, however I am getting the below error:

    • Terminating app due to uncaught exception 'NSGenericException', reason: 'Could not find a navigation controller for segue 'ViewController'. Push segues can only be used when the source controller is managed by an instance of UINavigationController.'

    I am assuming this is due to the nav actually being a subview? Do you know of anyways around this? I have tried embedding my viewcontroller in a uinavigationcontroller but to no avail.

    Thanks!

    opened by oworsnop 23
  • Feature request - event callbacks

    Feature request - event callbacks

    Hi there,

    I have a suggestion for this awesome little git project. Event callbacks/delegates/closure calls (whatever you want to call it) for when the app displays a page.

    So lets say we have page A, page B and page C. If A is active and user taps on page C, after the animation has finished, fire this 'callback' function to do any necessary updates (i.e. updating the colour of the navigation bar based on the active page in a different view controller file). Same would apply if the user simply scrolled left or right, fire/call the appropriate thing and make sure to pass back the reference of the active page that the user scrolled to.

    Would be really useful, at least for me. :)

    opened by jyounus 20
  • From Child view controller we can not able to push the controller to another one.

    From Child view controller we can not able to push the controller to another one.

    From Child view controller we can not able to push the controller to another one. I am using collection view in child view and if i set the action of push view controller in did select function the controller not push. Please solve the issue.

    opened by ankitbansal806 10
  • Possible bug? or maybe feature request...

    Possible bug? or maybe feature request...

    Hi! It's me again, and once again congrats for PageMenu!

    Lets say I have a tableviewcontroller as one of the pages, and I have a pop segue on the cell.

    Then, on the view controller that has popped I have a dismiss button: self.dismissViewControllerAnimated(true, completion: nil)

    When I dismiss the view controller I see the tableview and after a second PageMenu gets me back to the first view controller of the array.

    Maybe some of the settings must be moved to ViewDidLoad instead of viewdidAppear?

    opened by ispiropoulos 9
  • View blank on swiping view when device orientation is change to landscape

    View blank on swiping view when device orientation is change to landscape

    My screen is set to portrait only. When I swipe the segment view on landscape mode, the screen is blank. But everything's will fine on a portrait mode. Can anybody provide me solution?

    opened by tiwariammit 8
  • Properties set after initialization are ignored

    Properties set after initialization are ignored

    Hey @fahlout,

    thanks for the new release. I changed the initialisation method of PageMenu to include frame: and options: parameters. I set options to nil. I kept the rest of my code that was setting various properties after instantiation but PageMenu seems to be ignoring them. It also appears to ignore the default values you've set? This is the output https://www.dropbox.com/s/clfrtjv9t4nit11/Screen%20Shot%202015-02-03%20at%2011.32.09%20AM.png?dl=0

    opened by attheodo 8
  • how to stay in the same page

    how to stay in the same page

    So far I like this library very much, its been brilliant . Currently I am having an issue is that, in my second page I got a collectionView, from there I got cell on which if I click it navigate into different ViewController. When I navigate back into the second page , it doesn't stay there , it moves to first page of the pagemenu. but I want to stay it on the same page even after navigating back from different page. Hope I could make the situation understand . Please give me some suggestion .

    opened by nthrussell 6
  • Update Title ?

    Update Title ?

    First of all thanx for the awesome library ... I just want to know that is it possible to update the Title. If user tap or swipe the page then the title should be change. For example in your demo PageMenu is your title then user select music then title should be Music, if user select friend then title should be Friend and so on ...

    Thanks.

    opened by nhjariwala 6
  • Custom Container View Controller

    Custom Container View Controller

    I've found this component's UX very well designed. However, it does not correctly implements a custom container view controller. This is important to get right because of the lifecycle of child view controllers.

    There's more info about this here: https://developer.apple.com/library/ios/featuredarticles/ViewControllerPGforiPhoneOS/CreatingCustomContainerViewControllers/CreatingCustomContainerViewControllers.html

    opened by marcelofabri 6
  • Orientation issue

    Orientation issue

    I discovered an issue where moveSelectionIndicator(page) was not called on scrollViewDidScroll() due to a problem with the recognition of the current device orientation. In my case.isPotrait was false because the device was in .isFlat orientation.

    I fixed it by changingcurrentOrientationIsPortrait = UIDevice.current.orientation.isPortrait in viewDidLayoutSubviews() from CAPSPageMenu.swift to currentOrientationIsPortrait = UIApplication.shared.statusBarOrientation.isPortrait.

    opened by MaciDE 5
  • PageMenu overlap with navigation

    PageMenu overlap with navigation

    Environment: Xcode 7.1, iOS 9.1

    I if create the Navigation Controller in Storyboard, and just copy the code from PageMenuDemo Storyboard, the PageMenu will overlap with the navigation bar (no title set up in picture)

    screen shot 2015-10-26 at 5 08 56 pm

    But if I copy the story from the demo project, then will be work as expect

    screen shot 2015-10-26 at 5 08 03 pm

    Is it a bug or I done something wrong?

    opened by neaped 5
  • Pagemenu not allow to scroll inside child element

    Pagemenu not allow to scroll inside child element

    • I have implemented Pagemenu, everything is working well but I am not able to scroll inside child controller. In my case, I have ScrollView in some child and some have TableView, I got issue with scroll view, TableView is working perfectly. I don't know why it's happening?
    opened by Miral09 0
  • In Xib,Not able to tapped on Menu Item

    In Xib,Not able to tapped on Menu Item

    Hello,

    Very nice and easy to understand this demo. I have used Xib not a Storyboard. in this demo Not able to tapped on menu item. i have used Demo2 in your folder. if i am using another code in didFinishLaunchingWithOptions for rootViewController then i am not able to tapped on menu item.

    if i am using this code then not able to clicked on menu item. window = UIWindow(frame: UIScreen.main.bounds) let objFirstViewController = FirstViewController(nibName: "FirstViewController", bundle: nil) navigationController = UINavigationController(rootViewController: objFirstViewController) window?.rootViewController = navigationController window!.makeKeyAndVisible() return true

    if i am using this code in didFinishLaunchingWithOptions then menu item is clickable. self.window = UIWindow(frame: UIScreen.main.bounds) self.window?.rootViewController = FirstViewController(nibName: "FirstViewController", bundle: nil) self.window?.makeKeyAndVisible() return true

    Plz Help me because its not possible to become testviewcontroller as a rootViewController.

    Thanks in advance PageMenuDemoNoStoryboard.zip

    opened by khushbu147Service 0
  • self.addChild(pageMenuController!)。Method 'viewDidAppear' in the childviewcontroller is executed twice

    self.addChild(pageMenuController!)。Method 'viewDidAppear' in the childviewcontroller is executed twice

    if add this code self.addChild(pageMenuController!)。Method 'viewDidAppear' in the childviewcontroller is executed twice。How to solve it

    code

      self.addChild(pageMenuController!)
      self.view.addSubview(pageMenuController!.view)
      pageMenuController!.didMove(toParent: self)
    

    childcontroller

    override func viewDidAppear(_ animated: Bool) {
         //executed twice
          print("hello")
    }
    
    opened by LCBbest 1
  • child viewcontroller use snakpit display problem

    child viewcontroller use snakpit display problem

    When the child is a tableview and Snapkit is used to control constraints, the first time you load the interface tableview can not display all, you need to move to the next subview, and then move back to display normally。if use tableview.frame,tableview display normally. image image

    opened by LCBbest 0
Releases(2.0.0)
  • 2.0.0(Mar 8, 2017)

    • Full swift 3 support
    • New configuration class for cleaner dependency injection (may eventually move to protocol)
    • new initializers to obfuscate view addition boilerplate
    • All demo projects fixed
    Source code(tar.gz)
    Source code(zip)
Owner
null
A paging view controller with a highly customizable menu ✨

Getting Started | Customization | Installation Features Parchment lets you page between view controllers while showing any type of generic indicator t

Martin Rechsteiner 3k Jan 8, 2023
XLPagerTabStrip is a Container View Controller that allows us to switch easily among a collection of view controllers

XLPagerTabStrip is a Container View Controller that allows us to switch easily among a collection of view controllers. Pan gesture can be used to move on to next or previous view controller. It shows a interactive indicator of the current, previous, next child view controllers.

xmartlabs 6.8k Dec 27, 2022
Custom transition between controllers. Settings controller for your iOS app.

SPLarkController About Transition between controllers to top. You can change animatable height after presentation controller. For presentation and dis

Ivan Vorobei 965 Dec 17, 2022
A fully customizable container view controller to display a set of ViewControllers in a horizontal scroll view. Written in Swift.

DTPagerController This is a control for iOS written in Swift. DTPagerController is simple to use and easy to customize. Screenshots Default segmented

Tung Vo 290 Nov 13, 2022
a simple macOS menu bar application that shows you the lyrics of current playing spotify track.

lyricsify a simple macOS menu bar application that shows you the lyrics of current playing spotify track.

Krisna Pranav 4 Sep 16, 2021
PagingKit provides customizable menu UI. It has more flexible layout and design than the other libraries.

PagingKit provides customizable menu & content UI. It has more flexible layout and design than the other libraries. What's this? There are many librar

Kazuhiro Hayashi 1.3k Jan 9, 2023
RadialMenu is a custom control for providing a touch context menu (like iMessage recording in iOS 8) built with Swift & POP

RadialMenu Looking for help? For $150/hr I'll help with your RadialMenu problems including integrating it into your project. Email [email protected] t

Brad Jasper 297 Nov 27, 2022
RadialMenu is a custom control for providing a touch context menu (like iMessage recording in iOS 8) built with Swift & POP

RadialMenu Looking for help? For $150/hr I'll help with your RadialMenu problems including integrating it into your project. Email [email protected] t

Brad Jasper 297 Nov 27, 2022
A side menu controller written in Swift for iOS

Description SideMenuController is a custom container view controller written in Swift which will display the main content within a center panel and th

Teo 1.2k Dec 29, 2022
Menu controller with expandable item groups, custom position and appearance animation written with Swift. Similar to ActionSheet style of UIAlertController.

Easy to implement controller with expanding menu items. Design is very similar to iOS native ActionSheet presentation style of a UIAlertController. As

Anatoliy Voropay 22 Dec 27, 2022
iOS Slide Menu Controller. It is written in pure swift.

SlideMenuController Requirements iOS 9+ Installation SlideMenuController is available through CocoaPods. To install it, simply add the following line

Myung gi son 40 Jan 16, 2022
A Slide Menu, written in Swift, inspired by Slide Menu Material Design

Swift-Slide-Menu (Material Design Inspired) A Slide Menu, written in Swift 2, inspired by Navigation Drawer on Material Design (inspired by Google Mat

Boisney Philippe 90 Oct 17, 2020
Slide-Menu - A Simple Slide Menu With Swift

Slide Menu!! Весь интерфейс создан через код

Kirill 0 Jan 8, 2022
EasyMenu - SwiftUI Menu but not only button (similar to the native Menu)

EasyMenu SwiftUI Menu but not only button (similar to the native Menu) You can c

null 10 Oct 7, 2022
Swift-sidebar-menu-example - Create amazing sidebar menu with animation using swift

 SWIFT SIDEBAR MENU EXAMPLE In this project I create a awesome side bar menu fo

Paolo Prodossimo Lopes 4 Jul 25, 2022
Hamburger Menu Button - A hamburger menu button with full customization

Hamburger Menu Button A hamburger menu button with full customization. Inspired by VinhLe's idea on the Dribble How to use it You can config the looks

Toan Nguyen 114 Jun 12, 2022
Ambar is a macOS Menu Bar app built with SwiftUI.

Ambar Ambar is a macOS Menu Bar app built with SwiftUI. It is a template project which means that it can be used as a starting point for a new Menu Ba

null 16 Nov 14, 2022
WWFortuneWheelView - A scroll wheel that can be customized.

WWFortuneWheelView A scroll wheel that can be customized. 一個可以自訂數量的滾輪. Installation with Swift Package Manager dependencies: [ .package(url: "http

William-Weng 1 Jan 6, 2022
Drawer view controller that easy to use!

KWDrawerController Drawer view controller that is easy to use! Installation CocoaPods (iOS 8+ projects) KWDrawerController is available on CocoaPods.

Jungwon An 157 Jun 14, 2022