Change border color of UISegmentedControl

Question

I need different border colour for both the sections.By default I am having white as border color.

Can anyone help me out with this?

Answer 1

Extension method code for the Segment Control.

This is working code with Latest Swift 3.0 [March 2017]

The Extension method is created, as the extension to the native segment control.

extension UISegmentedControl {
    func setSegmentStyle() {

        let segmentGrayColor = UIColor(red: 0.889415, green: 0.889436, blue:0.889424, alpha: 1.0 )

        setBackgroundImage(imageWithColor(color: backgroundColor!), for: .normal, barMetrics: .default)
        setBackgroundImage(imageWithColor(color: tintColor!), for: .selected, barMetrics: .default)
        setDividerImage(imageWithColor(color: segmentGrayColor), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
        let segAttributes: NSDictionary = [
        NSForegroundColorAttributeName: UIColor.gray,
        NSFontAttributeName: UIFont(name: "Merriweather-Regular", size: 14)!
    ]
        setTitleTextAttributes(segAttributes as [NSObject : AnyObject], for: UIControlState.normal)
        let segAttributesExtra: NSDictionary = [
        NSForegroundColorAttributeName: UIColor.white,
        NSFontAttributeName: UIFont(name: "Merriweather-Regular", size: 14)!
    ]
        setTitleTextAttributes(segAttributesExtra as [NSObject : AnyObject], for: UIControlState.selected)
        selectedSegmentIndex = -1
        self.layer.borderWidth = 1.0
        self.layer.cornerRadius = 5.0
        self.layer.borderColor = segmentGrayColor.cgColor
        self.layer.masksToBounds = true
    }

// create a 1x1 image with this color
    private func imageWithColor(color: UIColor) -> UIImage {
        let rect = CGRect(x: 0.0, y: 0.0, width:  1.0, height: 1.0)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context!.setFillColor(color.cgColor);
        context!.fill(rect);
        let image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return image!
    }
}

This extension can be used in anywhere of code where the UIsegment control is used.

myUISegment.setSegmentStyle()

This will apply all the styles that are applied to the segment control.

Note: Here in this sample I have removed default border, changed font, set different colors during normal , Selected mode, border explicitly made some colors.

Based on your requirement and colors you can change accordingly as green or any customized color which also shown in sample "segmentGrayColor"

Answer 2

In swift try this:

class MySegmentedControl: UISegmentedControl{

    override func awakeFromNib() {
       super.awakeFromNib()
       for selectView in subviews{
            selectView.layer.borderColor = borderColor?.CGColor
            selectView.layer.borderWidth = CGFloat(borderWidth)
            selectView.layer.cornerRadius = CGFloat(cornerRadius)
            selectView.layer.masksToBounds = true
       }
    }

}

its because, each Segment is a View, you can custom it However you want

Answer 3

Try like this.

NSArray *arri = [segment subviews];

// Change the tintColor of each subview within the array:

[[arri objectAtIndex:0] setTintColor:[UIColor redColor]];

[[arri objectAtIndex:1] setTintColor:[UIColor greenColor]];

Answer 4

A simple solution:

//Set default tint color. This will set text color and border color
[[UISegmentedControl appearance] setTintColor:[UIColor whiteColot]];
// Set background image for normal and selected state. This will appear on top of the border and cover the actual border.
[[UISegmentedControl appearance] setBackgroundImage:[UIImage imageNamed:@"btn-blue-shade-1"] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
[[UISegmentedControl appearance] setBackgroundImage:[UIImage imageNamed:@"btn-blue-shade-2"] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

Answer 5

try this

segment.layer.borderColor = [UIColor colorWithRed:<#(CGFloat)#> green:<#(CGFloat)#> blue:<#(CGFloat)#> alpha:<#(CGFloat)#>];
segment.layer.borderWidth = 1.0f;
segment.layer.cornerRadius = 5.0f;