PageMenuKitSwift

PageMenuController Swift。

A class of the user interface that displays the side scroll menu screen used in news applications and its contents. Since Xcode's complete set of projects are registered, you can check the operation on the simulator if you run it.

When reimplementing with Swift 3, we redesigned the class to be versatile and easy to extend. Since only the appearance of the page menu is different, we implemented a subclass of PMKPageMenuItem for each style and used it. Therefore, you can easily add custom menus.

Installation

pod 'PageMenuKitSwift'

How to use PageMenuKit.framework

Running Build with Xcode's Build Target with PageMenuKitFatBinary creates PageMenuKit.framework. This is set in Project of Xcode of homebrew application.

After that, write the following code and use it.

class RootViewController: UIViewController
{
  var pageMenuController: PMKPageMenuController? = nil

  override func viewDidLoad() {
    super.viewDidLoad()

    var controllers: [UIViewController] = []
    let dateFormatter = DateFormatter()
    for month in dateFormatter.monthSymbols {
      let viewController: DataViewController = DataViewController()
      viewController.title = month
      controllers.append(viewController)
    }

    let statusBarHeight: CGFloat = UIApplication.shared.statusBarFrame.size.height
    /*
     * Available menu styles:
     * .Plain, .Tab, .Smart, .Hacka, .Ellipse, .Web, .Suite, .NetLab and .NHK
     * See PMKPageMenuItem.swift in PageMenuKit folder.
     *
     * menuColors: [] means that we will use the default colors
     */
    pageMenuController = PMKPageMenuController(controllers: controllers, menuStyle: .Smart, menuColors: [], topBarHeight: statusBarHeight,itemWidth:100)
    self.addChildViewController(pageMenuController!)
    self.view.addSubview(pageMenuController!.view)
    pageMenuController?.didMove(toParentViewController: self)
  }
}

For more detailed code look at RootViewController.swift in PageMenuKitDemo.

Available Menu Styles

.Plain

News path like menu screen

.Tab

Gnochey like menu screen

.Smart

SmartNews like menu screen

.Hacka

Hacka Doll like menu screen

.Ellipse

JCnews like menu screen

.Web

JCnews website website like menu screen

.Suite

NewsSuite like menu screen (background color is gradation)

.NetLab

Netorabo like menu screen

.NHK

NHK News · Disaster Prevention like menu screen

Examples

Specifying [] for menuColors of the initializer of PMKPageMenuController sets the default color scheme. Here, an example of changing the color for each style is shown.

.Plain, .Hacka, .Ellipse, .NHK

.Plain, .Hacka, .Ellipse, .NHK styles can specify only one color. In the following example, purple (.purple) is set to .Plain style .

pageMenuController = PMKPageMenuController(controllers: controllers, menuStyle: .Plain, menuColors: [ .purple ], topBarHeight: statusBarHeight,itemWidth:100)

.Plain

.Hacka

.Ellipse

.NHK

.Tab, .Smart

.Tab, .Smart style can specify one or more colors. In the following example, red, orange, yellow, green, blue, purple are set in. Tab style . If the number of menus is larger than the number of colors, colors are applied in order.

pageMenuController = PMKPageMenuController(controllers: controllers, menuStyle: .Tab, menuColors: [ .red, .orange, .yello, .green, .blue, .purple ], topBarHeight: statusBarHeight,itemWidth:100)

.Tab

.Smart

.Web

As with the .Tab, .Smart style, Web styles can be specified with one or more colors. However, the background color is currently fixed. Also, in the current implementation, the color specified at the beginning is the color of the boundary line.

In the following example, red, orange, yellow, green, blue, purple are set for Web style . If the number of menus is larger than the number of colors, colors are applied in order.

pageMenuController = PMKPageMenuController(controllers: controllers, menuStyle: .Web, menuColors: [ .red, .orange, .yello, .green, .blue, .purple ], topBarHeight: statusBarHeight,itemWidth:100)

.Suite

Although there is only one color that can be specified with the Suite style, the color of the indicator is only changed at present. In the following example, blue (.blue) is set for the Suite style .

pageMenuController = PMKPageMenuController(controllers: controllers, menuStyle: .Suite, menuColors: [ .blue ], topBarHeight: statusBarHeight,itemWidth:100)

.NetLab

Only one color can be specified in .NetLab style. Currently, it affects the color of characters when not selected. In the following example, red ( . Red) is set for .NetLab style .

pageMenuController = PMKPageMenuController(controllers: controllers, menuStyle: .NetLab, menuColors: [ .red ], topBarHeight: statusBarHeight,itemWidth:100)

Delegate Methods (optional)

It is also possible to use Delegate which is called when switching pages.

pageMenuController?.delegate = self

Add the above description and implement the following methods as necessary. At the moment, I use it only when displaying a .Hacka style badge.

public protocol PMKPageMenuControllerDelegate: class
{
  // Called before switching by swipe operation on page screen
  func  pageMenuController ( _  pageMenuController : PMKPageMenuController, willMoveTo  viewController : UIViewController, at  menuIndex : Int )
   // Called when page switching is complete
  func pageMenuController(_ pageMenuController: PMKPageMenuController, didMoveTo viewController: UIViewController, at menuIndex: Int)

  // Called when creation of menu item etc. is completed
  func  pageMenuController ( _  pageMenuController : PMKPageMenuController, didPrepare  menuItems : [PMKPageMenuItem])
   // Called when the menu is tapped
  func pageMenuController(_ pageMenuController: PMKPageMenuController, didSelect menuItem: PMKPageMenuItem, at menuIndex: Int)
}

To move tab to particular index position

pageMenuController?.movePageTo(index:0)

References

Also look at the implementation of PageMenuKit, the user interface of Qiita's news applications . It also describes how to implement custom menus.

Requirements

• Swift 4
• iOS 11.0 or later
• Xcode 9.0 or later

All

• .Suite, .Web and .NetLab style customization method

Credits

Since there is no Cocaopod installation option and no English Readme for the original repo PageMenuKitSwift, I have create an Cocaopod and English Readme. All credits goes to original repo PageMenuKitSwift and owner Kouichi ABE.