How to set image to the UISegmentedControl in iPhone?

Question

I am new to iPhone development. I have created UISegmentedControl having 2 segments. I want to display images for each segment instead of title. Here is my code

NSArray *itemArray = [NSArray arrayWithObjects: @"segment1", @"segment2", nil];
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:itemArray];
segmentedControl.frame = CGRectMake(5,100,300,40);
segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar;
segmentedControl.selectedSegmentIndex = 1;
[self.view addSubview:segmentedControl];
[segmentedControl release];

But instead of displaying the title ,segment1 and segment2 it should be replaced with the images I have.

score 29 · Accepted Answer · answered Jun 08 '10 at 21:14

29

It is almost exactly what you had, just pass an array of UIImages instead of NSStrings.

NSArray *itemArray = [NSArray arrayWithObjects:
    [UIImage imageNamed:@"segment1.png"],
    [UIImage imageNamed:@"segment2.png"],
    nil];

answered Jun 08 '10 at 21:14

drawnonward

53,459
16
107
112

11

Is it possible to have text and image both on segmented control? – Paresh Masani Nov 10 '11 at 11:02
1

@AppleDeveloper, nope. – AndrewShmig Mar 31 '14 at 16:27
1

Although it is possible to set both a label and an image for a segment, a segment should have one or the other, as described in macOS Human Interface Guidelines. https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/SegmentedControl/Articles/SegmentedControlCode.html – Jeff Jun 12 '17 at 17:56

score 24 · Answer 2 · answered May 03 '11 at 05:11

24

If you want to change the image during runtime, use the following method:

- (void)setImage:(UIImage *)image forSegmentAtIndex:(NSUInteger)segment

e.g.:

[segmentedControl setImage:[UIImage imageNamed:@"segment1.png"] forSegmentAtIndex:0];

answered May 03 '11 at 05:11

snibbe

2,715
1
27
34

4

Is it possible to have text and image both on segmented control? – Paresh Masani Nov 10 '11 at 11:06
1

Nope. Only one "title" or "image". – alexmorhun May 23 '12 at 16:10
@applefreak 10 years later, yes you can have both in one segmented control – Aly Yakan Apr 20 '21 at 09:54

score 13 · Answer 3 · answered Jul 18 '14 at 14:15

13

It's simple to do it with Interface Builder (Attributes Inspector tab).

Image setting with IB

Also you can set one segment with image and the other one with text.

Result

Happy xCoding! )

answered Jul 18 '14 at 14:15

Anton Gaenko

8,929
6
44
39

1

My segment control will not display any image in the segments – jcpennypincher Apr 06 '16 at 22:50

score 5 · Answer 4 · answered Jul 08 '16 at 04:37

5

For interface builder user, set "render as" as "original image" rather than default. In my case, it will show after running. It may work. @jcpennypincher

answered Jul 08 '16 at 04:37

Albert Zou

165
2
4

score 1 · Answer 5 · answered Jun 24 '13 at 07:15

1

In xcode 4.6.3 there is an option in interface builder to add an image to the segment controls.

answered Jun 24 '13 at 07:15

Nikhil Dinesh

3,359
2
38
41

How to set image to the UISegmentedControl in iPhone?

5 Answers5

Linked

Related