Giter VIP home page Giter VIP logo

evtoptabbar's Introduction

EVTopTabBar

CI Status Version License Platform

About

EVTopTabBar is a custom UIPageViewController for iOS where the page control is at the top. It currently supports two tabs.

Screenshot0

Usage

To run the example project, clone the repo, and run pod install from the Example directory.

Requirements

  • Swift 2.0+
  • iOS 8.0+

Installation

EVTopTabBar is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "EVTopTabBar"

Also include

use_frameworks!

Getting Started

import EVTopTabBar

Implement the EVTabBar protocol and conform to it. In order to conform to the protocol declare:

var pageController = UIPageViewController(transitionStyle: .Scroll, navigationOrientation: .Horizontal, options: nil)
//need to instantiate the topTabBar itself, later we will implement the delegate method
var topTabBar: EVPageViewTopTabBar = EVPageViewTopTabBar()
//array of view controllers that will be controlled by the page view controller
var subviewControllers: [UIViewController] = []
//image from the sample project can use any UIImage you want, this shadow is what is displayed under the tab bar.
var shadowView = UIImageView(image: UIImage(imageLiteral: "filter-background-image"))

Now in your view controller implement the EVPageViewTopTabBarDelegate method willSelectViewControllerAtIndex This method allows for view controllers to switch and gives a space to perform any other actions.

extension ViewController: EVPageViewTopTabBarDelegate {
	//delegate method
    func willSelectViewControllerAtIndex(index: Int, direction: UIPageViewControllerNavigationDirection) {
    	//required line that changes the displayed view controller
        pageController.setViewControllers([self.subviewControllers[index]], direction: direction, animated: true, completion: nil)
        //add whatever code you wish to occur on the transition!
    }
}

Next will want to call the setupPageView() and setupConstraints() methods in order to setup the page layout. You can override both of these methods to create a more custom application.

Lastly you will want to setup the topTabBar you previously declared

//attributes of the topTabBar you can set
topTabBar.fontColors = (selectedColor: UIColor.grayColor(), unselectedColor: UIColor.lightGrayColor())
topTabBar.rightButtonText = "Events"
topTabBar.leftButtonText = "Contacts"
topTabBar.labelFont = UIFont(name: ".SFUIText-Regular", size: 11)!
topTabBar.indicatorViewColor = UIColor.blueColor()
topTabBar.backgroundColor = UIColor.whiteColor()
topTabBar.setupUI()
//ensure you set the topTabBar's delegate
topTabBar.delegate = self
//add view controllers you wish to display
let firstVC = FirstViewController(nibName:"FirstViewController", bundle: nil)
let secondVC = SecondViewController(nibName:"SecondViewController", bundle: nil)
subviewControllers = [firstVC, secondVC]

Project description

EVTabBar Protocol

Methods

  • setupPageView() Sets the UI for the View Controller including the UIPageViewController, shadowView and View Controllers to display inside of the Page View.
  • setupConstraints() Sets the initial constraints for the View Controller

EVPageViewTopTabBar

Methods

  • setupUI() Sets the UI for the tab bar itself
  • willSelectViewControllerAtIndex(index: Int, direction: UIPageViewControllerNavigationDirection) Controls the changing of the View Controllers inside of the PageViewController and gives a space to perform any other actions on transition

Future Features

  • Support for more tabs
  • More flexibility with the shadow view

Author

Eric Vennaro, [email protected], blog

License

EVTopTabBar is available under the MIT License. See the LICENSE file for more info.

Copyright © 2016-present Eric Vennaro.

evtoptabbar's People

Stargazers

MohsinAli avatar

Watchers

MohsinAli avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.