Add Border to the bottom of SELECTED segmented control - ios

Question

I am trying to add a border to the selected segmented control. Currently, I have code which sets the border of 3px to the bottom of the whole segmented control:
CALayer *bottomBorder = [CALayer layer];
bottomBorder.borderColor = [UIColor redColor].CGColor;
bottomBorder.borderWidth = 3;
bottomBorder.frame = CGRectMake(0, self.segmentedControl.frame.size.height - bottomBorder.borderWidth, self.segmentedControl.frame.size.width, bottomBorder.borderWidth);
[self.segmentedControl.layer addSublayer:bottomBorder];
However, I want to add this border ONLY to the selected segmented control. How do I do this?

Answer 1

You can use the following code to dynamically add the selection:
// Removing previous selection
[bottomBorder removeFromSuperlayer];
// Creating new layer for selection
bottomBorder = [CALayer layer];
bottomBorder.borderColor = [UIColor redColor].CGColor;
bottomBorder.borderWidth = 3;
// Calculating frame
CGFloat width = self.segmentedControl.frame.size.width/3;
CGFloat x = self.segmentedControl.selectedSegmentIndex * width;
CGFloat y = self.segmentedControl.frame.size.height - bottomBorder.borderWidth;
bottomBorder.frame = CGRectMake(x, y,width, bottomBorder.borderWidth);
// Adding selection to segment
[self.segmentedControl.layer addSublayer:bottomBorder];
You need to remove the previous selection when new choice is selected, for that purpose make the bottomBorder layer as a member variable.

Answer 2

I converted the Objective-C solutions into swift3 it is working for me, My Segment controller width is equal to View width
#IBAction func SegmentAction(_ sender: UISegmentedControl) {
self.segmentBottomBorder?.removeFromSuperlayer()
self.segmentBottomBorder = CALayer()
self.segmentBottomBorder?.borderColor = UIColor.red.cgColor
self.segmentBottomBorder?.borderWidth = 3
let width: CGFloat = sender.frame.size.width/CGFloat(sender.numberOfSegments)
let x = CGFloat(sender.selectedSegmentIndex) * width
let y = sender.frame.size.height - (self.segmentBottomBorder?.borderWidth)!
self.segmentBottomBorder?.frame = CGRect(x: x, y: y, width: width, height: (self.segmentBottomBorder?.borderWidth)!)
sender.layer.addSublayer(self.segmentBottomBorder!)
}

Answer 3

This might not be the proper way, but you can give it a shot.
At the time you load the segment control, try this in viewdidload, so the layer gets added according to the selectedsegment button
if (self.segmentedControl.selectedSegmentIndex==0) {
CALayer *bottomBorder = [CALayer layer];
bottomBorder.borderColor = [UIColor redColor].CGColor;
bottomBorder.borderWidth = 3;
bottomBorder.frame = CGRectMake(0, self.segmentedControl.frame.size.height - bottomBorder.borderWidth, self.segmentedControl.frame.size.width/2, bottomBorder.borderWidth);
[self.segmentedControl.layer addSublayer:bottomBorder];
}else if (self.segmentedControl.selectedSegmentIndex==1){
//change the border layer frame
} else if (self.segmentedControl.selectedSegmentIndex==2){
//change the border layer frame
}
Again in the segmentcontrol action method, you can alter these changes

Answer 4

//Connect action to segmented control.
- (IBAction)segmentedControlAction:(id)sender {
if(segmentedControl.selectedSegmentIndex == 0)
{
NSLog(#"First Segment (Feed) Selected");
//Remove SuperLayer when segment is selected
[_bottomBorder removeFromSuperlayer];
// Creating new layer for selection
_bottomBorder = [CALayer layer];
_bottomBorder.borderColor = [UIColor redColor].CGColor;
_bottomBorder.borderWidth = 3;
// Calculating frame
CGFloat width = self.segmentedControl.frame.size.width/3;
CGFloat x = self.segmentedControl.selectedSegmentIndex * width;
CGFloat y = self.segmentedControl.frame.size.height - _bottomBorder.borderWidth;
_bottomBorder.frame = CGRectMake(x, y,width, _bottomBorder.borderWidth);
// Adding selection to segment
[self.segmentedControl.layer addSublayer:_bottomBorder];
}
else if(segmentedControl.selectedSegmentIndex == 1)
{
NSLog(#"Second Segment (Stations) Selected");
//Remove SuperLayer when segment is selected
[_bottomBorder removeFromSuperlayer];
// Creating new layer for selection
_bottomBorder = [CALayer layer];
_bottomBorder.borderColor = [UIColor redColor].CGColor;
_bottomBorder.borderWidth = 3;
// Calculating frame
CGFloat width = self.segmentedControl.frame.size.width/3;
CGFloat x = self.segmentedControl.frame.size.width/3;
CGFloat y = self.segmentedControl.frame.size.height - _bottomBorder.borderWidth;
_bottomBorder.frame = CGRectMake(x, y,width, _bottomBorder.borderWidth);
// Adding selection to segment
[self.segmentedControl.layer addSublayer:_bottomBorder];
}
else if(segmentedControl.selectedSegmentIndex == 2)
{
NSLog(#"Third Segment (Events) Selected");
//Remove SuperLayer when segment is selected
[_bottomBorder removeFromSuperlayer];
// Creating new layer for selection
_bottomBorder = [CALayer layer];
_bottomBorder.borderColor = [UIColor redColor].CGColor;
_bottomBorder.borderWidth = 3;
// Calculating frame
CGFloat width = self.segmentedControl.frame.size.width/3;
CGFloat x = self.view.bounds.size.width - self.segmentedControl.frame.size.width/3;
CGFloat y = self.segmentedControl.frame.size.height - _bottomBorder.borderWidth;
_bottomBorder.frame = CGRectMake(x, y,width, _bottomBorder.borderWidth);
// Adding selection to segment
[self.segmentedControl.layer addSublayer:_bottomBorder];
}
}