Freebie: a Customizable Segmented Control for your iOS App | tapptitude

2 Min Read • Jan 31, 2017

Author Image

Alex Tudose

Head of iOS & Full Stack

Author Image

Developing high-quality mobile apps for iOS and Android is what we do here at tapptitude, day in and day out. So we decided to share with you guys something we finished up a while back and loved designing: an elegant, animated and customizable segmented control for iOS.

TTSegmentedControl - free resource by tapptitude

And here’s everything you need to know about it:

Features

  • Variable number of items
  • Animated transition
  • Fully configurable (colour, gradient, shadow, corner radius)
  • Designable into Interface Builder

Requirements

  • iOS 8.0+
  • Xcode 7.3+

Installation

  • CocoaPods
  • Swift 3.0

pod ‘TTSegmentedControl’

  • Swift 2.x

pod ‘TTSegmentedControl’, ‘0.1.1’

  • Manually

Add the TTSegmentedControl.swift file to your project.

Usage

  • Programmatic:
let segmentedControl = TTSegmentedControl()
segmentedControl.allowChangeThumbWidth = false
segmentedControl.frame = CGRect(x: 50, y: 200, width: 100, height: 50)
segmentedControl.didSelectItemWith = { (index, title) -> () in
print("Selected item \(index)")
}
view.addSubview(segmentedControl)
  • Interface Builder:

Add a UIView and set it’s class to TTSegmentedControl. You can customize the control directly from the interface builder.

TTSegmentedControl - free resource by tapptitude

How to customize?

Check out the playground and see how to implement and customize the SegmentedControl.

pod try TTSegmentedControl

In order to customize the segmented control, you’ll have to edit its properties.

segmentedControl.defaultTextColor = UIColor.blackColor()
segmentedControl.selectedTextColor = UIColor.whiteColor()
segmentedControl.thumbGradientColors = [UIColor.redColor(), UIColor.blueColor()]
segmentedControl.useShadow = true

License

TTSegmentedControl is available under the MIT license.

Contribution

Feel free to Fork, submit Pull Requests or send us your feedback and suggestions over at GitHub, right here.

Alex Tudose

Alex Tudose

Head of iOS & Full Stack

Senior iOS Developer with more than 5 years of experience in developing native mobile apps. I always aim to combine fantastic user experiences, with solid design principles, and strong development solutions. When I'm not coding, I'm most likely outdoors, riding my bike.

You Might Also Find These

Articles Interesting

#7YearsTogether - Evolving as a Product Building Studio feature image

Inside Tapptitude

#7YearsTogether - Evolving as a Product Building Studio

10 Min Read

Erika Kramarik

Erika Kramarik

Dec 14, 2020

React Native vs Native Mobile App Development Pros & Cons | Tapptitude feature image

Development

React Native vs Native Mobile App Development Pros & Cons | Tapptitude

10 Min Read

Erika Kramarik

Erika Kramarik

Oct 16, 2018

Flutter vs React Native - What to Choose for Developing Your Mobile App? feature image

Mobile Resources

Flutter vs React Native - What to Choose for Developing Your Mobile App?

7 Min Read

Erika Kramarik

Erika Kramarik

Nov 2, 2020

POC vs Prototype vs MVP in Mobile App Development | Tapptitude feature image

Startups

POC vs Prototype vs MVP in Mobile App Development | Tapptitude

21 Min Read

Erika Kramarik

Erika Kramarik

Nov 29, 2019