Skip to content

Latest commit

 

History

History
142 lines (104 loc) · 5.26 KB

README.md

File metadata and controls

142 lines (104 loc) · 5.26 KB
Raw

Page Menu View

Installation

Add the PageMenuView.swift to your project manually (drag & drop the file into your project).

Usage

  1. Initialize your viewController class with title, then add the viewControllers to the array
// Init View Contollers
let viewController1 = UIViewController()
viewController1.view.backgroundColor = .blue
viewController1.title = "Child View 1"

let viewController2 = UIViewController()
viewController2.view.backgroundColor = .green
viewController2.title = "Child View 2"

let viewController3 = UIViewController()
viewController3.view.backgroundColor = .yellow
viewController3.title = "Child View 3"

// Add to array
let viewControllers = [viewController1, viewController2, viewController3]
  1. Initialize PageMenuOption class with frame constructor
// Page menu UI option
let option = PageMenuOption(frame: CGRect(
  x: 0, y: 20, width: view.frame.size.width, height: view.frame.size.height - 20))
  1. Initialize PageMenuView with viewControllers and option construnctor
// Init Page Menu with view controllers and UI option
let pageMenu = PageMenuView(viewControllers: viewControllers, option: option)
view.addSubview(pageMenu)

Result may looks like below. Sample Code

Optional - Delegate Methods

  1. Add PageMenuViewDelegate to your ViewController class
class ViewController: UIViewController, PageMenuViewDelegate {
  1. Set delegate
pageMenu.delegate = self
  1. Add follow delegate functions
func willMoveToPage(_ pageMenu: PageMenuView, from viewController: UIViewController, index currentViewControllerIndex : Int) {}
func didMoveToPage(_ pageMenu: PageMenuView, to viewController: UIViewController, index currentViewControllerIndex: Int) {}

Update menu title

Sometimes, we need to update menu title after presented page menu. You can update title whenever you want by calling the method updateMenuTitle

pageMenu.updateMenuTitle(title: "New Title!", viewControllerIndex: 0)

Customization

Here is a default page menu appearance if you don't change any default value in the option.

// Page menu UI option
let option = PageMenuOption(frame: CGRect(
  x: 0, y: 20, width: view.frame.size.width, height: view.frame.size.height - 20))

If you like the width depends on screen width

// Page menu UI option
var option = PageMenuOption(
  frame: CGRect(x: 0, y: 20, width: view.frame.size.width, height: view.frame.size.height - 20))
option.menuItemWidth = view.frame.size.width / 3
option.menuTitleMargin = 0

Here is how to change colors inside page menu view

// Page menu UI option
var option = PageMenuOption(frame: CGRect(
  x: 0, y: 20, width: view.frame.size.width, height: view.frame.size.height - 20))
option.menuItemWidth = view.frame.size.width / 3
option.menuItemBackgroundColorNormal = UIColor(red:0.388, green:0.424, blue:0.467, alpha:1)
option.menuItemBackgroundColorSelected = UIColor(red:0.227, green:0.678, blue:0.851, alpha:1)
option.menuTitleMargin = 0
option.menuTitleColorNormal = .lightGray
option.menuTitleColorSelected = .white
option.menuIndicatorHeight = 6
option.menuIndicatorColor = UIColor(red:0.969, green:0.424, blue:0.510, alpha:1)

Lastly, bellow table shows all option property of page menu view.

Property type definition default Value requirment
frame CGRect Size and position of the page menu zero *required
menuItemHeight CGFloat Height of the menu 44px optional
menuItemWidth CGFloat Width of the menu depends on text length optional
menuItemBackgroundColorNormal UIColor Background color of the menu (Unselected state) white optional
menuItemBackgroundColorSelected UIColor Background color of the menu (Selected state) white optional
menuTitleMargin CGFloat Margin between menu items 40 px optional
menuTitleFont UIFont Title size and font family systemFont, 14px optional
menuTitleColorNormal UIColor Title color (Unselected state) lightGray optional
menuTitleColorSelected UIColor Title color (Selected state) black optional
menuIndicatorHeight CGFloat Height of the menu underline indicator 3px optional
menuIndicatorColor UIColor Color of the menu underline indicator darkGray optional

Author

Wataru Maeda, [email protected]

License

PageMenuView is available under the MIT license. See the LICENSE file for more info.