Code Monkey home page Code Monkey logo

minitabbar's Introduction

Swift Version Version License twitter: @dylan36032

MiniTabBar

A clean simple alternative to the UITabBar. Only shows the title when being tapped on. Gives the app a way cleaner look :)

Requirements

  • iOS 10.0+
  • Xcode 8

Installation

CocoaPods:

You can use CocoaPods to install MiniTabBar by adding it to your Podfile:

pod 'MiniTabBar'

Manually

Drag and drop MiniTabBar.swift and MiniTabBarItemView.swift into your project.

Usage

// First create some tab bar items:
// Icons should be a template image with the size 26 x 20 dp
var items = [MiniTabBarItem]()
items.append(MiniTabBarItem(title: "Tab Name", icon: <UIImage>))
//...

// Create a MiniTabBar instance and add it as a regular subview:
let tabBar = MiniTabBar(items: items)
tabBar.translatesAutoresizingMaskIntoConstraints = false
tabBar.delegate = self
self.view.addSubview(tabBar)

let constraints = [
	tabBar.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor),
	tabBar.widthAnchor.constraint(equalTo: view.widthAnchor),
	tabBar.heightAnchor.constraint(equalToConstant: 44),
]
NSLayoutConstraint.activate(constraints)

// Delegate protocol:
func tabSelected(_ index: Int) {
	print("Selected tab: ", index)
}

Costumization

Here are some ways to customize the look of the MiniTabBar:

// Change the tint colour of an item (title & icon):
tabBar.tintColor = UIColor.red

// Change the font of the title label:
tabBar.font = UIFont.systemFont(ofSize: 10)

// Select an item programmatically: 
tabBar.selectItem(2, animated: false)

// Change the background & key line of the tab bar:
tabBar.backgroundColor = UIColor.black
tabBar.backgroundBlurEnabled = false
tabBar.keyLine.isHidden = true

Custom View

It's also possible to have a custom view that doesn't act like a tab. For example a (+) button in the middle.

let customButton = UIButton()
customButton.backgroundColor = UIColor.orange
customButton.frame.size = CGSize(width: 50, height: 50)
let customItem = MiniTabBarItem(customView: customButton, 
                                    offset: UIOffset(horizontal: 0, 
                                                       vertical: -10))
customItem.selectable = false
items.append(customItem)

minitabbar's People

Contributors

d-32 avatar kenzo44 avatar

Watchers

James Cloos 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.