A lightweight paging menu controller for iOS. Place view controllers or views inside a horizontal scroll view, with a customizable top bar for switching pages.
- Horizontal paging with a top menu bar
- Supports
UIViewControllerandUIViewas page content - Flexible bar items:
String,PagingBarItemTitle,PagingBarItemAttributedTitle, or customPagingBarItemProvider - Custom selected indicator / background via
barItemSelectedBackgroundView - Bar alignment: leading / center / trailing
- iOS 11.0+
- Swift 5.0+
pod 'PagingMenu'Then run:
pod installIn Xcode: File → Add Packages… and enter:
https://github.com/iLiuChang/PagingMenu.git
Or add it to your Package.swift:
dependencies: [
.package(url: "https://github.com/iLiuChang/PagingMenu.git", from: "2.0.0")
]- Download the files in the
Sourcesfolder - Drag them into your Xcode project
override func viewDidLoad() {
super.viewDidLoad()
let pagingMenu = PagingMenuController()
pagingMenu.barHeight = 44
pagingMenu.barInset = UIEdgeInsets(top: 0, left: 15, bottom: 0, right: 15)
pagingMenu.barItemNormalStyle = PagingBarItemStyle(
color: .black.withAlphaComponent(0.5),
font: UIFont.systemFont(ofSize: 16)
)
pagingMenu.barItemSelectedStyle = PagingBarItemStyle(
color: .black,
font: UIFont.systemFont(ofSize: 16)
)
pagingMenu.items = (
["Title1", "Title2", "Title3"],
[UIViewController(), UIViewController(), UIViewController()]
)
// Also supports UIView:
// pagingMenu.items = (["Title1", "Title2", "Title3"], [UIView(), UIView(), UIView()])
// Mix UIView and UIViewController:
// pagingMenu.items = (["Title1", "Title2", "Title3"], [UIView(), UIViewController(), UIView()])
addChild(pagingMenu)
view.addSubview(pagingMenu.view)
pagingMenu.view.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
pagingMenu.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
pagingMenu.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
pagingMenu.view.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
pagingMenu.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])
pagingMenu.didMove(toParent: self)
}Use barItemSelectedBackgroundView to show a line (or any custom view) under the selected title:
let itemBg = UIView()
let line = UIView()
line.backgroundColor = .blue
line.layer.cornerRadius = 1.5
itemBg.addSubview(line)
line.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
line.bottomAnchor.constraint(equalTo: itemBg.bottomAnchor),
line.centerXAnchor.constraint(equalTo: itemBg.centerXAnchor),
line.widthAnchor.constraint(equalToConstant: 16),
line.heightAnchor.constraint(equalToConstant: 3)
])
pagingMenu.barItemSelectedBackgroundView = itemBgThe top bar defaults to leading alignment. Center it with:
pagingMenu.barAlignment = .centerBar items support String, PagingBarItemAttributedTitle, PagingBarItemTitle, or a custom PagingBarItemProvider.
Containers support UIViewController, UIView, or a custom PagingContainerItemProvider.
public protocol PagingBarItemProvider {
var normalAttributedTitle: NSAttributedString { get }
var selectedAttributedTitle: NSAttributedString { get }
}
public protocol PagingContainerItemProvider {
var pagingContainerItemView: UIView { get }
func addToSuper(_ superView: UIView, pagingMenuController: PagingMenuController)
func removeFromSuper(_ pagingMenuController: PagingMenuController)
}pagingMenu.delegate = self
func pagingMenuController(
_ pagingMenuController: PagingMenuController,
didSelectAt index: Int,
actionBehavior: PagingMenuController.ActionBehavior
) {
// actionBehavior: .click or .scroll
}Open Demo/PagingMenu.xcodeproj and run the demo target.
PagingMenu is available under the MIT license. See the LICENSE file for details.