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

Answer 1

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.. :)

Answer 2

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];
    }
}

Answer 3

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

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

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

}

Answer 4

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

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

Apple documentation

Answer 5

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
    }   
}

Answer 6

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