Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A UISwitch-like segmented control for your iOS app.
Pull request Compare This branch is 119 commits behind samvermette:master.
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



SVSegmentedControl is a customizable UI control class that mimics UISegmentedControl but that looks like an UISwitch.


  • Drag the SVSegmentedControl/SVSegmentedControl folder into your project.
  • Add the QuartzCore framework to your project.


(see sample Xcode project in /Demo)

In its simplest form, this is how you create an SVSegmentedControl instance:

segmentedControl = [[SVSegmentedControl alloc] initWithSectionTitles:[NSArray arrayWithObjects:@"Section 1", @"Section 2", nil]];
segmentedControl.delegate = self;

[self.view addSubview:segmentedControl];
[segmentedControl release];

You’re highly encouraged to position it using its center property: = CGPointMake(160, 70);


SVSegmentedControl can be customized with the following properties:

@property (nonatomic, readwrite) NSUInteger selectedIndex; // default is 0
@property (nonatomic, retain) UIFont *font; // default is [UIFont boldSystemFontOfSize:15]
@property (nonatomic, retain) UIColor *textColor; // default is [UIColor grayColor];
@property (nonatomic, retain) UIColor *shadowColor;  // default is [UIColor blackColor]
@property (nonatomic, readwrite) CGSize shadowOffset;  // default is CGSizeMake(0, -1)
@property (nonatomic, readwrite) CGFloat segmentPadding; // default is 10.0
@property (nonatomic, readwrite) CGFloat height; // default is 32.0
@property (nonatomic, readwrite) BOOL crossFadeLabelsOnDrag; // default is NO

Its thumb (SVSegmentedThumb) can be customized as well:

@property (nonatomic, retain) UIColor *tintColor; // default is [UIColor grayColor]
@property (nonatomic, retain) UIColor *textColor; // default is [UIColor whiteColor]
@property (nonatomic, retain) UIColor *shadowColor; // default is [UIColor blackColor]
@property (nonatomic, readwrite) CGSize shadowOffset; // default is CGSizeMake(0, -1)

Note: to customize the thumb’s appearance, you’ll have to set the properties through SVSegmentedControl’s thumb property. For instance, setting the thumb’s tintColor is done with:

segmentedControl.thumb.tintColor = someColor;

Responding to value changes

There are two ways to respond to the selectedIndex change:

1. Adopting the SVSegmentedControlDelegate protocol

Implement this delegate method:

- (void)segmentedControl:(SVSegmentedControl*)segmentedControl didSelectIndex:(NSUInteger)index;

2. Using a block handler

Assign a block to the selectedSegmentChangedHandler property:

segmentedControl.selectedSegmentChangedHandler = ^(id sender) {
	SVSegmentedControl *segmentedControl = (SVSegmentedControl *)sender;
	NSLog(@"segmentedControl did select index %i", segmentedControl.selectedIndex);
Something went wrong with that request. Please try again.