UISegmentedControl selected state icon image

Question

How can I set the icon image for selected state of the UISegmentedControl? Is the UISegmentedControl really missing this functionality or it is just me missing skills?

Follow this link http://stackoverflow.com/questions/1281601/custom-uisegmentedcontrol — iMash, May 07 '12 at 10:05
I think setting the target and then changing the image from target action will work for you. — Kuldeep, May 07 '12 at 10:23

Kuldeep · Accepted Answer · 2012-05-07T10:26:34.677

20

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

-(void)segmentAction:(UISegmentedControl*)sender {

    [sender setImage:[UIImage imageNamed:@"image.png"] forSegmentAtIndex:sender.selectedSegmentIndex];

}

edited May 07 '12 at 10:26

answered May 07 '12 at 10:08

Kuldeep

2,589
1
18
28

score 3 · Answer 2 · edited Jul 30 '12 at 15:57

Here I created two UISegmentedControl elements programmatically u can set image icon.

UISegmentedControl *switchView=[[UISegmentedControl alloc] initWithItems:[[[NSMutableArray alloc] initWithObjects:@"Yes",@"No",nil] autorelease]];
[switchView setFrame:CGRectMake(180,802,94,27)];
switchView.selectedSegmentIndex=1;
switchView.segmentedControlStyle=UISegmentedControlStyleBar;
[switchView setImage:[UIImage imageNamed:@"switchBlueBg.png"] forSegmentAtIndex:0];   // set icon for when selected
[switchView setImage:[UIImage imageNamed:@"switchOffPlain.png"] forSegmentAtIndex:1];  //set icon for when unselected
[switchView addTarget:self action:@selector(checkOnOffState:) forControlEvents:UIControlEventValueChanged];             
[scrollview addSubview:switchView];

UISegmentedControl *switchView1=[[UISegmentedControl alloc] initWithItems:[[[NSMutableArray alloc] initWithObjects:@"Yes",@"No",nil] autorelease]];
[switchView1 setFrame:CGRectMake(180,1003,94,27)];
switchView1.selectedSegmentIndex=1;
switchView1.segmentedControlStyle=UISegmentedControlStyleBar;
[switchView setImage:[UIImage imageNamed:@"switchBlueBg.png"] forSegmentAtIndex:0];  // set icon for when selected
[switchView setImage:[UIImage imageNamed:@"switchOffPlain.png"] forSegmentAtIndex:1];  ////set icon for when unselected
[switchView1 addTarget:self action:@selector(checkOnOffState1:) forControlEvents:UIControlEventValueChanged];
[scrollview addSubview:switchView1];



-(IBAction)checkOnOffState:(id)sender
{
    UISegmentedControl* tempSeg=(UISegmentedControl *)sender;

    if(tempSeg.selectedSegmentIndex==0)
    {
        //your codes
    }
    else
    {
        //your codes
    }   
}

OrangeDog · Answer 3 · 2021-06-08T14:57:20.940

3

[segmentedControl setBackgroundImage:image 
                            forState:UIControlStateSelected
                          barMetrics:UIBarMetricsDefault]

You also have to set an image for UIControlStateNormal for this to take effect.

Apple documentation

edited Jun 08 '21 at 14:57

answered Jul 29 '15 at 16:39

OrangeDog

36,653
12
122
207

1

Thanks for this: `You also have to set an image for UIControlStateNormal for this to take effect` – Dannie P Sep 25 '15 at 15:59

score 1 · Answer 4 · answered Mar 12 '19 at 00:02

Swift 4

This is how I managed it. Make a segmented control and insert segments using the images.

Be sure to set one image as selected as this will be the initial selected index. Also set the backgroundColor and tintColor to clear so that segmented control will only show your images.

var newSegmentedControl: UISegmentedControl = {
        let segmentedControl = UISegmentedControl()

        segmentedControl.insertSegment(with: UIImage(named: "x_Selected.jpg"), at: 0, animated: true)
        segmentedControl.insertSegment(with: UIImage(named: "y_Normal.jpg"), at: 1, animated: true)

        segmentedControl.addTarget(self, action: #selector(segmentedControlChanged), for: .valueChanged)

        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.backgroundColor = .clear
        segmentedControl.tintColor = .clear            

    }()

Function called when the value of segmented control changes.

@objc func segmentedControlChanged(sender: UISegmentedControl) {

    if sender.selectedSegmentIndex == 0 {
        sender.setImage(UIImage(named: "x_Selected.jpg"), forSegmentAt: sender.selectedSegmentIndex)
        sender.setImage(UIImage(named: "y_Normal.jpg"), forSegmentAt: 1)
    } else if sender.selectedSegmentIndex == 1 {
        sender.setImage(UIImage(named: "x_Normal.jpg"), forSegmentAt: 0)
        sender.setImage(UIImage(named: "y_Selected.jpg"), forSegmentAt: sender.selectedSegmentIndex)
    } 

}

Hope you find this useful.. :)

score 0 · Answer 5 · answered May 07 '12 at 10:07

0

You can set by using single line of code [uisegmentButtonRef setImage:[UIImage imageNamed:@"allbtndown.png"] forSegmentAtIndex:segmentIndex];

If you use by Xib please find the image

enter image description here

answered May 07 '12 at 10:07

ajay

3,245
4
31
59

score 0 · Answer 6 · answered Oct 15 '14 at 13:55

Enhancement of @Kuldeep's Answer

you may have two or more controls in segmentcontrol

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

if you want to replace all images differently than use this code..

-(void)segmentAction:(UISegmentedControl*)sender
{
    if(sender.selectedSegmentIndex==0)
    {
        [sender setImage:[UIImage imageNamed:@"calf_selected.png"] forSegmentAtIndex:sender.selectedSegmentIndex];//0 index
        [sender setImage:[UIImage imageNamed:@"wrist.png"] forSegmentAtIndex:1];
    }
    else
    {
        [sender setImage:[UIImage imageNamed:@"calf.png"] forSegmentAtIndex:sender.selectedSegmentIndex];//for 1 index
        [sender setImage:[UIImage imageNamed:@"wrist_selected.png"] forSegmentAtIndex:0];
    }
}

UISegmentedControl selected state icon image

6 Answers6

Linked