Questions tagged [uisegmentedcontrol]

UISegmentedControl is a class from UIKit in Apple iOS framework. A UISegmentedControl object is a horizontal control made of multiple segments, each segment functioning as a discrete button.

A UISegmentedControl object is a horizontal control made of multiple segments, each segment functioning as a discrete button. A segmented control affords a compact means to group together a number of controls.

A segmented control can display a title (an NSString object) or an image (UIImage object). The UISegmentedControl object automatically resizes segments to fit proportionally within their superview unless they have a specific width set. When you add and remove segments, you can request that the action be animated with sliding and fading effects.

You register the target-action methods for a segmented control using the UIControlEventValueChanged constant as shown below.

SWIFT

segmentedControl.addTarget(self, action: "action:", forControlEvents: .ValueChanged);

OBJECTIVE-C

[segmentedControl addTarget:self
                     action:@selector(action:)
           forControlEvents:UIControlEventValueChanged];

How you configure a segmented control can affect its display behavior:

If you set a segmented control to have a momentary style, a segment doesn’t show itself as selected (blue background) when the user touches it. The disclosure button is always momentary and doesn’t affect the actual selection.

In versions of iOS prior to 3.0, if a segmented control has only two segments, then it behaves like a switch—tapping the currently-selected segment causes the other segment to be selected. On iOS 3.0 and later, tapping the currently-selected segment does not cause the other segment to be selected.

Customizing Appearance In iOS v5.0 and later, you can customize the appearance of segmented controls using the methods listed in Customizing Appearance. You can customize the appearance of all segmented controls using the appearance proxy (for example, [UISegmentedControl appearance]), or just of a single control.

When customizing appearance, in general, you should specify a value for the normal state of a property to be used by other states which don’t have a custom value set. Similarly, when a property is dependent on the bar metrics (on the iPhone in landscape orientation, bars have a different height from standard), you should make sure you specify a value for UIBarMetricsDefault.

In the case of the segmented control, appearance properties for UIBarMetricsLandscapePhone are only respected for segmented controls in the smaller navigation and toolbars that are used in landscape orientation on the iPhone.

To provide complete customization, you need to provide divider images for different state combinations, using setDividerImage:forLeftSegmentState:rightSegmentState:barMetrics::

SWIFT

// Image between two unselected segments.
mySegmentedControl.setDividerImage(myImage, forLeftSegmentState: UIControlState.Normal,
    rightSegmentState: UIControlState.Normal, barMetrics: UIBarMetrics.Default)

// Image between segment selected on the left and unselected on the right.
mySegmentedControl.setDividerImage(myImage, forLeftSegmentState: UIControlState.Selected,
    rightSegmentState: UIControlState.Normal, barMetrics: UIBarMetrics.Default)

// Image between segment selected on the right and unselected on the left.
mySegmentedControl.setDividerImage(myImage, forLeftSegmentState: UIControlState.Normal,
    rightSegmentState: UIControlState.Selected, barMetrics: UIBarMetrics.Default)

OBJECTIVE-C

// Image between two unselected segments.
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal
                  rightSegmentState:UIControlStateNormal barMetrics:barMetrics];
// Image between segment selected on the left and unselected on the right.
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateSelected
                  rightSegmentState:UIControlStateNormal barMetrics:barMetrics];
// Image between segment selected on the right and unselected on the right.
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal
                  rightSegmentState:UIControlStateSelected barMetrics:barMetrics];

For more information about appearance and behavior configuration, see Segmented Controls.

1825 questions
27
votes
7 answers

How to set backgroundColor of UISegmentedControl to white in iOS 13

iOS 13 introduced some changes to the UISegmentedControl including a really nice animation when switching the selected segment. However I'm noticing that it's not displaying the backgroundColor property correctly, it always seems to have a bit of a…
Phil
  • 1,216
  • 2
  • 14
  • 23
27
votes
4 answers

Custom UISwitch with image

I need to implement a custom switch in a project. Currently what I have found is that we cannot alter with UISwitch in way to implement as shown in below image. I've followed posts and googled through stackoverflow and other blogs but didn't found a…
Arshad Parwez
  • 1,563
  • 2
  • 19
  • 29
26
votes
12 answers

Customizing the colors of a UISegmentedControl

Does anybody know of a way to customize the appearance of the string based UISegmentedControl? I am trying to set the background color of the cell and the text color differently depending on the selected state of the item. Alternatively, do you…
nicktmro
  • 2,298
  • 2
  • 22
  • 31
26
votes
3 answers

Customizing Left & Right UISegmentedControl Buttons

I'm trying to customize the following segmented control, using a left image for the first button and a right image for the second button. How would I do this using UIAppearance? I want to change the following segmentedControl: to something similar…
Year3000
  • 459
  • 2
  • 7
  • 15
25
votes
3 answers

How to change color of UISegmentedControl border in iOS7?

How do I change the border color of the segmented controller in iOS7 without changing the text color? It would be ideal if I could keep the line between the segments as is (i.e. same color as the text), but if a border color change implies a…
OscarWyck
  • 2,515
  • 5
  • 21
  • 26
25
votes
4 answers

UISegmentedControl setImage: Bug in iOS7

I have a UISegmentedControl in my app. As of iOS7 GM, the images I use are not showing up when run on iOS7 devices. Anyone else having this problem? Here's what it looks like in iOS6.1 and earlier . and here is what it looks like in iOS7 . Here is…
kevmalek
  • 1,373
  • 2
  • 12
  • 13
23
votes
5 answers

UISegmentedControl with square corners

I would like to modify UISegmentedControl with a subclass to remove the rounded corners. I can't seem to set the cornerRadius. Making the SegmentedControl wider than the screen (and therefor "chop" off the corners) is not an option since I have 4 or…
Joseph
  • 9,171
  • 8
  • 41
  • 67
22
votes
9 answers

Remove UISegmentedControl separators completely. (iphone)

Is there a way to completely remove the line separating the two segments in a UISegmentedControl? Setting the segmentedControlStyle is not helping.
Kazmi
  • 593
  • 1
  • 6
  • 24
22
votes
13 answers

How do I set the accessibility label for a particular segment of a UISegmentedControl?

We use KIF for our functional testing, and it uses the accessibility label of elements to determine where to send events. I'm currently trying to test the behaviour of a UISegmentedControl, but in order to do so I need to set different…
Simon
  • 25,468
  • 44
  • 152
  • 266
22
votes
6 answers

Swift how to set default text color for UISegmentedControl?

I want to set colors for the text and background of UISegmentedControl. So I've four colors to set, the default and selected color of the text and background. I can use tintColor and backgroundColor to set the background. But how to set the default…
LF00
  • 27,015
  • 29
  • 156
  • 295
22
votes
5 answers

Can I show an UISegmentedControl object in vertical?

Is there anyone who can teach me how to show an UISegmentedControl object in vertical direction, instead of in horizontal direction?
xeron
  • 255
  • 1
  • 2
  • 9
22
votes
9 answers

How to remove border from segmented control

How do I remove the outside border of a segmented control? I've set the divider image to what I wanted but now to follow the mock of my app I need to have a segmented control without the outer border.
Happiehappie
  • 1,084
  • 2
  • 13
  • 26
22
votes
3 answers

UISegmentedControl Best Practice

I'm trying to work out the "best" way to use a UISegmentedControl for an iPhone application. I've read a few posts here on stackoverflow and seen a few people's ideas, but I can't quite sort out the best way to do this. The posts I'm referring to…
Neal L
  • 4,329
  • 8
  • 34
  • 39
22
votes
7 answers

Toolbar with "Previous" and "Next" for Keyboard inputAccessoryView

I've been trying to implement this toolbar, where only the 'Next' button is enabled when the top textField is the firstResponder and only the 'Previous' button is enabled when the bottom textField is the firstResponder. It kind of works, but what…
BillySangster
  • 408
  • 1
  • 3
  • 16
20
votes
7 answers

UISegmentedControl - altering height in Interface Builder

I'm creating a number of static custom UITableViewCells and have dragged a UISegmentedControl onto one of the custom cells. Whilst the segmented control allows me to alter its width I cannot alter its height in Interface Builder (that property is…
Urizen
  • 2,331
  • 6
  • 23
  • 33