PagingKit provides customizable menu UI. It has more flexible layout and design than the other libraries.

Last update: Aug 3, 2022

img

Platform Swift 5.1 License Version Carthage compatible Swift Package Manager compatible

PagingKit provides customizable menu & content UI. It has more flexible layout and design than the other libraries.

What's this?

There are many libraries providing "Paging UI" which have menu and content area. They are convenient but not customizable because your app has to be made compatible with the libraries' layout and view components. When a UI desgin in your app doesn't fit the libraries, you need to fork them or find another one.

PagingKit has more flexible layout and design than the other libraries. You can construct "Menu" and "Content" UI, and they work together. That's all features this library provides. You can fit any design to your apps as you like.

paging_sample

Customized layout

You can align views as you like.

changing position placing a view between content and menu added floating button on right-side on navigation bar
sample_5 sample_4 sample6 2018-12-04 10 00 51

Customized menu design

You can customize menu as you like.

tag like menu text highlighted menu underscore menu App Store app like indicator
sample_3 sample_1 indicator

I'm looking for a pull request of your custom menu design :)

Feature

  • easy to construct Paging UI
  • customizable layout and design
  • UIKit like API
  • Supporting iPhone, iPad and iPhone X

Requirements

  • iOS 9.0+
  • Xcode 11.0+
  • Swift 5.1

Installation

Swift Package Manager

open Swift Packages (which is next to Build Settings). You can add and remove packages from this tab.

See Adding Package Dependencies to Your App

CocoaPods

  • Install CocoaPods
> gem install cocoapods
> pod setup
  • Create Podfile
> pod init
  • Edit Podfile
target 'YourProject' do
  use_frameworks!

  pod "PagingKit" # add

  target 'YourProject' do
    inherit! :search_paths
  end

  target 'YourProject' do
    inherit! :search_paths
  end

end
  • Install
> pod install

open .xcworkspace

Carthage

  • Install Carthage from Homebrew
> ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
> brew update
> brew install carthage
  • Move your project dir and create Cartfile
> touch Cartfile
  • add the following line to Cartfile
github "kazuhiro4949/PagingKit"
  • Create framework
> carthage update --platform iOS
  • In Xcode, move to "Genera > Build Phase > Linked Frameworks and Library"
  • Add the framework to your project
  • Add a new run script and put the following code
/usr/local/bin/carthage copy-frameworks
  • Click "+" at Input file and Add the framework path
$(SRCROOT)/Carthage/Build/iOS/PagingKit.framework
  • Write Import statement on your source file
import PagingKit

Getting Started

There are some samples in this library.

https://github.com/kazuhiro4949/PagingKit/tree/master/iOS%20Sample/iOS%20Sample

You can fit PagingKit into your project as the samples do. Check out this repository and open the workspace.

PagingKit has two essential classes.

  • PagingMenuViewController
  • PagingContentViewController

PagingMenuViewController provides interactive menu for each content. PagingContentViewController provides the contents on a scrollview.

If you make a new project which contains PagingKit, follow the steps.

  1. Add PagingMenuViewController & PagingContentViewController
  2. Assign them to properties
  3. Create menu UI
  4. display data
  5. Synchronize Menu and Content view controllers

1. Add PagingMenuViewController & PagingContentViewController

First, add PagingMenuViewController & PagingContentViewController on container view with Stroyboard.

1. Put container views on Storyboard

Put container views on stroyboard for each the view controllers.

2017-08-25 16 33 51

2. Change class names

input PagingMenuViewController on custom class setting. 2017-08-25 16 36 36

input PagingContentViewController on custom class setting.

2017-08-25 16 36 54

2. Assign them to properties

Assign them on code of the container view controller.

1. Declare properties for the view controllers

Declare properties in container view controller.

class ViewController: UIViewController {
    
    var menuViewController: PagingMenuViewController!
    var contentViewController: PagingContentViewController!

2. override prepare(segue:sender:) and assign the view controllers

Assigin view controllers to each the property on prepare(segue:sender:).

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if let vc = segue.destination as? PagingMenuViewController {
            menuViewController = vc
        } else if let vc = segue.destination as? PagingContentViewController {
            contentViewController = vc
        }
    }

3. Build App

Change menu color. 2017-08-25 17 47 58

Build and check the current state.

2017-08-25 17 47 29

It shows a container view controller that has PagingMenuViewController and PagingContentViewController.

3. Create menu UI

Next, you needs to prepare the menu elements.

1. Inherite PagingMenuViewCell and create custom cell

PagingKit has PagingMenuViewCell. PagingMenuViewController uses it to construct each menu element.

import UIKit
import PagingKit

class MenuCell: PagingMenuViewCell {
    @IBOutlet weak var titleLabel: UILabel!
}

2017-08-25 16 56 56

2. Inherite PagingFocusView and create custom view

PagingKit has PagingFocusView. PagingMenuViewController uses it to point the current focusted menu.

2017-08-25 16 59 07

3. register the above views to PagingMenuViewController

class ViewController: UIViewController {
    
    var menuViewController: PagingMenuViewController!
    var contentViewController: PagingContentViewController!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        menuViewController.register(nib: UINib(nibName: "MenuCell", bundle: nil), forCellWithReuseIdentifier: "MenuCell")
        menuViewController.registerFocusView(nib: UINib(nibName: "FocusView", bundle: nil))
    }

4. display data

Then, implement the data sources to display contents. They are a similar to UITableViewDataSource.

1. prepare data

class ViewController: UIViewController {
    static var viewController: (UIColor) -> UIViewController = { (color) in
       let vc = UIViewController()
        vc.view.backgroundColor = color
        return vc
    }
    
    var dataSource = [(menuTitle: "test1", vc: viewController(.red)), (menuTitle: "test2", vc: viewController(.blue)), (menuTitle: "test3", vc: viewController(.yellow))]

2. set menu data source

Return number of menus, menu widthes and PagingMenuViewCell objects.

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if let vc = segue.destination as? PagingMenuViewController {
            menuViewController = vc
            menuViewController.dataSource = self // <- set menu data source
        } else if let vc = segue.destination as? PagingContentViewController {
            contentViewController = vc
        }
    }
}

extension ViewController: PagingMenuViewControllerDataSource {
    func numberOfItemsForMenuViewController(viewController: PagingMenuViewController) -> Int {
        return dataSource.count
    }
    
    func menuViewController(viewController: PagingMenuViewController, widthForItemAt index: Int) -> CGFloat {
        return 100
    }
    
    func menuViewController(viewController: PagingMenuViewController, cellForItemAt index: Int) -> PagingMenuViewCell {
        let cell = viewController.dequeueReusableCell(withReuseIdentifier: "MenuCell", for: index) as! MenuCell
        cell.titleLabel.text = dataSource[index].menuTitle
        return cell
    }
}

3. configure content data source

Return the number of contents and view controllers.

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if let vc = segue.destination as? PagingMenuViewController {
            menuViewController = vc
            menuViewController.dataSource = self
        } else if let vc = segue.destination as? PagingContentViewController {
            contentViewController = vc
            contentViewController.dataSource = self // <- set content data source
        }
    }
}

extension ViewController: PagingContentViewControllerDataSource {
    func numberOfItemsForContentViewController(viewController: PagingContentViewController) -> Int {
        return dataSource.count
    }
    
    func contentViewController(viewController: PagingContentViewController, viewControllerAt index: Int) -> UIViewController {
        return dataSource[index].vc
    }
}

4. load UI

Call reloadData() methods with starting point.

    override func viewDidLoad() {
        super.viewDidLoad()
        //...
        //...
        menuViewController.reloadData()
        contentViewController.reloadData()
    }

Build and display data source.

2017-08-25 17 54 30

5. Synchronize Menu and Content view controllers

Last, synchronize user interactions between Menu and Content.

1. set menu delegate

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if let vc = segue.destination as? PagingMenuViewController {
            menuViewController = vc
            menuViewController.dataSource = self
            menuViewController.delegate = self // <- set menu delegate
        } else if let vc = segue.destination as? PagingContentViewController {
            contentViewController = vc
            contentViewController.dataSource = self
        }
    }
}

Implement menu delegate to handle the event. It is a similar to UITableViewDelegate. You need to implement scroll method of PagingContentViewController in the delegate method.

extension ViewController: PagingMenuViewControllerDelegate {
    func menuViewController(viewController: PagingMenuViewController, didSelect page: Int, previousPage: Int) {
        contentViewController.scroll(to: page, animated: true)
    }
}

2. set content delegate

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if let vc = segue.destination as? PagingMenuViewController {
            menuViewController = vc
            menuViewController.dataSource = self
            menuViewController.delegate = self
        } else if let vc = segue.destination as? PagingContentViewController {
            contentViewController = vc
            contentViewController.dataSource = self
            contentViewController.delegate = self // <- set content delegate
        }
    }
}

Implement content delegate to handle the event. It is similar to UIScrollViewDelegate. You need to implement the scroll event of PagingMenuViewController. "percent" is distance from "index" argument to the right-side page index.

extension ViewController: PagingContentViewControllerDelegate {
    func contentViewController(viewController: PagingContentViewController, didManualScrollOn index: Int, percent: CGFloat) {
        menuViewController.scroll(index: index, percent: percent, animated: false)
    }
}

That's it.

Tips

Class Design

There are some design policy in this library.

  • The behavior needs to be specified by the library.
  • The layout should be left to developers.
  • Arrangement of the internal components must be left to developers.

Because of that, PagingKit has responsiblity for the behavior. But it doesn't specify a structure of the components. PagingKit favours composition over inheritance. This figure describes overview of the class diagram.

Work with RxSwift

PagingKit goes well with RxSwift.

https://github.com/kazuhiro4949/RxPagingKit

    let items = PublishSubject<[(menu: String, width: CGFloat, content: UIViewController)]>()

    override func viewDidLoad() {
        super.viewDidLoad()
        
        menuViewController?.register(type: TitleLabelMenuViewCell.self, forCellWithReuseIdentifier: "identifier")
        menuViewController?.registerFocusView(view: UnderlineFocusView())
        
        // PagingMenuViewControllerDataSource
        items.asObserver()
            .map { items in items.map({ ($0.menu, $0.width) }) }
            .bind(to: menuViewController.rx.items(
                cellIdentifier: "identifier",
                cellType: TitleLabelMenuViewCell.self)
            ) { _, model, cell in
                cell.titleLabel.text = model
            }
            .disposed(by: disposeBug)
        
        // PagingContentViewControllerDataSource
        items.asObserver()
            .map { items in items.map({ $0.content }) }
            .bind(to: contentViewController.rx.viewControllers())
            .disposed(by: disposeBug)
        
        // PagingMenuViewControllerDelegate
        menuViewController.rx.itemSelected.asObservable().subscribe(onNext: { [weak self] (page, prev) in
            self?.contentViewController.scroll(to: page, animated: true)
        }).disposed(by: disposeBug)
        
        // PagingContentViewControllerDelegate
        contentViewController.rx.didManualScroll.asObservable().subscribe(onNext: { [weak self] (index, percent) in
            self?.menuViewController.scroll(index: index, percent: percent, animated: false)
        }).disposed(by: disposeBug)
    }

License

Copyright (c) 2017 Kazuhiro Hayashi

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

GitHub

https://github.com/kazuhiro4949/PagingKit
Comments
  • 1. Underline and Title are not vertically aligned

    Screenshot at Feb 24 10-37-24

    My problem is described like the illustration image. The title and underline are not aligned vertically What is the problem and hints to fix it please. Thank you in advance

    Reviewed by longunidev at 2021-02-24 03:47
  • 2. Populate content with different controller

    I was wondering if there was a way to populate the content with collection view??

    I am getting issue where when I pass in another controller like this:

    var dataSource: [(menu: String, content: UIViewController)] = [ (menu: "menu1", content: viewController(.blue)), (menu: "menu2", content: SecondViewController()) ]

    my SecondViewController only holds an imageView:

    `class SecondViewController: UIViewController {

    @IBOutlet weak var dankImage: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    
        let imageToSet = UIImage(named: "Dank")
        dankImage.image = imageToSet!
    }
    

    }`

    When i swipe it always show that it cannot unwrap and returns "nil" - but if i remove setting the image to image view so its blank. This runs fine.

    How does this work under the hood when populating view?

    Reviewed by snc001 at 2019-05-01 05:19
  • 3. Option to disable preloading the next viewController?

    I have 3 viewControllers for paging. Everything is perfect except one. viewDidAppear() of second viewController called when first viewController is loaded. Problem is we are presenting a viewController (basically a coach mark) when second view controller is loaded. Hence when first view controller appears, second viewController's presenting viewController (i.e coach mark) is shown.

    I have checked internal code of PagingKit. It has something called "isEnabledPreloadContent" property and 'preloadContentIfNeeded' method which is not used anywhere. I believe if isEnabledPreloadContent is set to false, it should not load viewControllers which are yet to present/load.

    As a workaround, I am using "menuViewController(viewController: PagingMenuViewController, didSelect page: Int, previousPage: Int) " method to decide whether to present viewController or not. But this is not satisfying!!

    Reviewed by hithakshi at 2019-08-09 06:41
  • 4. [Help] Need to create custom highlighted(bubble) indicator

    Hey, @kazuhiro4949 ! I love your framework so much.

    Could you help me and give an advice is it possible to implement custom indicator view like on images below? Thank you.

    img_4797 img_4796

    Reviewed by Sergozh at 2018-10-28 14:10
  • 5. Size of PagingMenuViewController incorrectly

    PagingMenuViewController container does not respect AutoLayout size information.

    Steps to reproduce in iOS Sample

    • PagingMenuViewController container is aligned to leading and trailing edge.
    • Set Storyboard device to iPhone SE. Container width is now 320.
    • Run on iPhone 6 or 8, the Container width should be 375 but is still 320. Or should be 320 and is 270. pagingmenucontroller bug

    Also please look at this other alignment issue: #40

    Thanks!

    Reviewed by wousser at 2018-03-14 10:48
  • 6. Not called completion handler in reloadData.

    In my project, I did not scroll immediately after calling reloadData. There was no problem with the sample. Just to be sure, I found a workaround so I will send you a PR.

    Reviewed by noppefoxwolf at 2017-12-16 15:22
  • 7. Support for iOS 12.0

    Hello,

    Can you please add support for iOS 12.0+? I have been getting the following error in the sample project when I run in the devices with iOS 12.4.4 and 12.4.5. However, it's working fine for devices with iOS 13+.

    Fatal error: Unexpectedly found nil while implicitly unwrapping an Optional value: file /PagingKit-master/iOS Sample/iOS Sample/SimpleViewController.swift, line 67

    Hoping to hear from you soon.

    Thanks a ton.

    Reviewed by nimitjarvis at 2020-02-17 09:24
  • 8. alignment property like UILabel.textAlignment

    I want a convenience method to align cells when PagingMenuView.contentSize.width is shorter than PagingMenuView.bounds.width.

    menuViewController.alignment = .center
    // |     |menu1|menu2|menu3|      |
    menuViewController.alignment = .right
    // |           |menu1|menu2|menu3||
    menuViewController.alignment = .left // default
    // ||menu1|menu2|menu3|           |
    
    
    Reviewed by kazuhiro4949 at 2018-02-07 13:53
  • 9. Can I preload all contentViewControllers?

    Hi~!

    I tried to preload all contentViewControllers before I tap the menus but It doesn't seem to work. Is it impossible to load all contentViewControllers before tap or swipe the menu?

    Thank you!

    Reviewed by richoh86 at 2021-05-27 07:29
  • 10. contentViewController won't scroll to specific page programmatically

    Hi, thank you for sharing this great project with everyone! I really like it! But I have a little issue here hoping someone could help me. Thanks a lot!!

    About The Issue

    I want to add my pages dynamically, reload both menu & content, and then scroll the menu & content to the last page. It turns out menuViewController works successfully, but contentViewController just can't scroll to the last page. Not sure why.

    My Tries & Results

    1. reload first, scroll later
    func addNewPage() {
            let vc = self.storyboard!.instantiateViewController(withIdentifier: "myViewController")
            pageList.append(vc)
    
            let lastPageIndex = pageList.endIndex
            
            menuViewController.reloadData()
            contentViewController.reloadData()
    
            menuViewController.scroll(index: lastPageIndex)
            contentViewController.scroll(to: lastPageIndex, animated: true)
        }
    

    Result: menuViewController will scroll to the last index, but contentViewController always stays at first index.

    1. use reload-with-preferredFocusIndex function
    func addNewPage() {
            let vc = self.storyboard!.instantiateViewController(withIdentifier: "myViewController")
            pageList.append(vc)
    
            let lastPageIndex = pageList.endIndex
            
            menuViewController.reloadData(with: lastPageIndex, completionHandler: nil)
            contentViewController.reloadData(with: lastPageIndex, completion: nil)
            
        }
    

    Result: menuViewController will scroll to the last index, so does contentViewController. BUT, contentViewController is totally blank!! (It didn't load its input views. But when I do a little scroll, like try to scroll to previous page a little but not really scroll to there, then contentViewController will load its input view successfully.)

    Reviewed by helloC1ndy at 2019-12-17 02:46
⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion
⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

CIRCLE MENU Simple, elegant UI menu with a circular layout and material design animations We specialize in the designing and coding of custom UI for M

Aug 3, 2022
A Slide Menu, written in Swift, inspired by Slide Menu Material Design
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

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

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

Aug 9, 2022
UIKit drop down menu, simple yet flexible and written in Swift
UIKit drop down menu, simple yet flexible and written in Swift

DropDownMenuKit DropDownMenuKit is a custom UIKit control to show a menu attached to the navigation bar or toolbar. The menu appears with a sliding an

Jul 5, 2022
SwiftySideMenu is a lightweight and easy to use side menu controller to add left menu and center view controllers with scale animation based on Pop framework.
SwiftySideMenu is a lightweight and easy to use side menu controller to add left menu and center view controllers with scale animation based on Pop framework.

SwiftySideMenu SwiftySideMenu is a lightweight, fully customizable, and easy to use controller to add left menu and center view controllers with scale

Feb 4, 2022
Quick Symlink - a Finder extension which provides a contextual menu item for the symbolic links creation on macOS
Quick Symlink - a Finder extension which provides a contextual menu item for the symbolic links creation on macOS

Quick Symlink The Quick Symlink is a Finder extension which provides a contextual menu item for the symbolic links (and other links) creation on macOS

Aug 3, 2022
A swift library based on the various options menu in material design in Android
A swift library based on the various options menu in material design in Android

KTOptionMenu Description KTOptionMenu is a swift library based on the various options menu in material design in Android that allows you to easily cre

Jul 21, 2022
Menu with a circular layout based on Macaw
Menu with a circular layout based on Macaw

FanMenu Easily customizable floating circle menu created with Macaw We are a development agency building phenomenal apps. Usage Create UIView in your

Jul 31, 2022
Slide-Menu - A Simple Slide Menu With Swift
Slide-Menu - A Simple Slide Menu With Swift

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

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)

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

Apr 24, 2022
Swift-sidebar-menu-example - Create amazing sidebar menu with animation using swift
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

Jul 25, 2022
Hamburger Menu Button - A hamburger menu button with full customization
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

Jun 12, 2022
A paging view controller with a highly customizable menu ✨
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

Aug 9, 2022
A fully customizable popup style menu for iOS 😎
A fully customizable popup style menu for iOS 😎

Guide Check out the documentation and guides for details on how to use. (Available languages:) English 简体中文 What's a better way to know what PopMenu o

Aug 5, 2022
🔻 Dropdown Menu for iOS with many customizable parameters to suit any needs
🔻 Dropdown Menu for iOS with many customizable parameters to suit any needs

MKDropdownMenu Dropdown Menu for iOS with many customizable parameters to suit any needs. Inspired by UIPickerView. Installation CocoaPods MKDropdownM

Jun 28, 2022
Animated side menu with customizable UI

Side Menu Animated side menu with customizable UI. Made in Yalantis. Check this project on dribbble. Check this project on Behance. Requirements iOS 7

Aug 1, 2022
A simple customizable side menu written in SwiftUI.
A simple customizable side menu written in SwiftUI.

NSideMenu Description A simple customizable side menu written in SwiftUI. Give a Star! ⭐ Feel free to request an issue on github if you find bugs or r

Mar 22, 2022
Swipable tab and menu View and ViewController.
Swipable tab and menu View and ViewController.

SwipeMenuViewController Overview SwipeMenuViewController provides SwipeMenuView and SwipeMenuViewController. This is very useful to build swipe-based

Aug 9, 2022
Grid and Circular Menu for iOS.
Grid and Circular Menu for iOS.

IGCMenu IGCMenu library gives easy way to create Grid and Circular menu in app. This is light weight and highly customisable menu.Support iOS 7 and ab

Apr 21, 2022