ColorMatchTabs

There are multiple ways to organize navigation in apps: tab bars, side menus, Tinder-like swipes between screens. An issue with most existing solutions, however, is that they are inconvenient for phones with large screens. Users have to constantly stretch their thumbs to the icon to go to the next screen.

We decided to share the user interface animation concept we created that solves this problem of in-app navigation on large screens.

ColorMatchTabs

Requirements

  • iOS 9.0
  • Swift 3
  • Xcode 8

Installation

[CocoaPods]

pod 'ColorMatchTabs', '~> 2.0'

Carthage

github "Yalantis/ColorMatchTabs" ~> 2.0

How to use

Complete screen

To setup and customize the component you should implement ColorMatchTabsViewControllerDataSource for ColorMatchTabsViewController.

public protocol ColorMatchTabsDataSource: class {
    
    func numberOfItems(inController controller: ColorMatchTabsViewController) -> Int
    
    func tabsViewController(controller: ColorMatchTabsViewController, viewControllerAt index: Int) -> UIViewController
    
    func tabsViewController(controller: ColorMatchTabsViewController, titleAt index: Int) -> String
    func tabsViewController(controller: ColorMatchTabsViewController, iconAt index: Int) -> UIImage
    func tabsViewController(controller: ColorMatchTabsViewController, hightlightedIconAt index: Int) -> UIImage
    func tabsViewController(controller: ColorMatchTabsViewController, tintColorAt index: Int) -> UIColor

}

To customize popup view controller create a subclass of PopoverViewController and set it in the view controller:

tabsViewController.popoverViewController = ExamplePopoverViewController()

Customization

The component contains of:

  • top tabbar
  • scrollable content view
  • plus button
  • popover view controller

Menu view controller aggregates the elements described above. If you want to fully customize or rearrange the elements, just create your own view controller instead of MenuViewController.

GitHub