ios - Remove UISegmentedControl separators completely. (iphone)

Question

Is there a way to completely remove the line separating the two segments in a UISegmentedControl?

Setting the segmentedControlStyle is not helping.

Answer 1

If anybody wants this kind of UISegmentedControl View-

EDITED:- Swift 3.0 extensions

    extension UISegmentedControl {

    func customizeAppearance(for height: Int) {

        setTitleTextAttributes([NSFontAttributeName:UIFont(name:"Helvetica Neue", size:13.0)!,NSForegroundColorAttributeName:UIColor.white], for:.normal)
        setTitleTextAttributes([NSFontAttributeName:UIFont(name:"Helvetica Neue", size:13.0)!,NSForegroundColorAttributeName:UIColor.white], for:.selected)
        setDividerImage(UIImage().colored(with: .clear, size: CGSize(width: 1, height: height)), forLeftSegmentState: .normal, rightSegmentState: .normal, barMetrics: .default)
        setBackgroundImage(UIImage().colored(with: .clear, size: CGSize(width: 1, height: height)), for: .normal, barMetrics: .default)
        setBackgroundImage(UIImage().colored(with: UIColor.init(red: 215/255.0, green: 0.0, blue: 30/255.0, alpha: 1.0), size: CGSize(width: 1, height: height)), for: .selected, barMetrics: .default);

        for  borderview in subviews {
            let upperBorder: CALayer = CALayer()
            upperBorder.backgroundColor = UIColor.init(red: 215/255.0, green: 0.0, blue: 30/255.0, alpha: 1.0).cgColor
            upperBorder.frame = CGRect(x: 0, y: borderview.frame.size.height-1, width: borderview.frame.size.width, height: 1)
            borderview.layer.addSublayer(upperBorder)
        }

    }
}

extension UIImage {

    func colored(with color: UIColor, size: CGSize) -> UIImage {
        UIGraphicsBeginImageContext(size)
        let context = UIGraphicsGetCurrentContext()
        context!.setFillColor(color.cgColor);
        let rect = CGRect(origin: CGPoint(x: 0, y: 0), size: size)
        context!.fill(rect);
        let image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return image!
    }
}

The UIImage extension generates a colored image with desired size.

Forcing the height parameter in customizeAppearance avoid any crash when building the context.

You can make it even more reusable by extracting each customization attribute and put it as function's parameters ;)

Here is sample code, tested over iOS 9 and works fine for me.

Add these lines of code in viewDidLoad-

[yourSegmentControl setTitleTextAttributes:@{ NSFontAttributeName:[UIFont fontWithName:@"Roboto-black" size:13.0],NSForegroundColorAttributeName:[UIColor whiteColor] }forState:UIControlStateSelected];

[yourSegmentControl setTitleTextAttributes:@{ NSFontAttributeName:[UIFont fontWithName:@"Roboto-black" size:13.0],NSForegroundColorAttributeName:[UIColor whiteColor] }forState:UIControlStateNormal];

[yourSegmentControl setDividerImage:[self imageWithColor:[UIColor clearColor]] forLeftSegmentState:UIControlStateNormal rightSegmentState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

[yourSegmentControl setBackgroundImage:[self imageWithColor:[UIColor clearColor]] forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

[yourSegmentControl setBackgroundImage:[self imageWithColor:[UIColor colorWithRed:215/255.0 green:0 blue:30/255.0 alpha:1.0]] forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

for (UIView *borderview in yourSegmentControl.subviews) {

    CALayer *upperBorder = [CALayer layer];

    upperBorder.backgroundColor = [UIColor colorWithRed:215/255.0 green:0 blue:30/255.0 alpha:1.0].CGColor;

    upperBorder.frame = CGRectMake(0, borderview.frame.size.height-1, borderview.frame.size.width, 1.0f);

    [borderview.layer addSublayer:upperBorder];
}

and

- (UIImage *)imageWithColor:(UIColor *)color {
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

Here is the Swift extension for achieving same view in Swift-

yourSegmentControl.setTitleTextAttributes([NSFontAttributeName:UIFont(name:"Helvetica Neue", size:13.0)!,NSForegroundColorAttributeName:UIColor.whiteColor()], forState:UIControlState.Normal)

yourSegmentControl.setTitleTextAttributes([NSFontAttributeName:UIFont(name:"Helvetica Neue", size:13.0)!,NSForegroundColorAttributeName:UIColor.whiteColor()], forState:UIControlState.Selected)

yourSegmentControl.setDividerImage(self.imageWithColor(UIColor.clearColor()), forLeftSegmentState: UIControlState.Normal, rightSegmentState: UIControlState.Normal, barMetrics: UIBarMetrics.Default)

yourSegmentControl.setBackgroundImage(self.imageWithColor(UIColor.clearColor()), forState:UIControlState.Normal, barMetrics:UIBarMetrics.Default)

yourSegmentControl.setBackgroundImage(self.imageWithColor(UIColor.init(red: 215/255.0, green: 0.0, blue: 30/255.0, alpha:1.0)), forState:UIControlState.Selected, barMetrics:UIBarMetrics.Default);

for  borderview in yourSegmentControl.subviews {

let upperBorder: CALayer = CALayer()
upperBorder.backgroundColor = UIColor.init(red: 215/255.0, green: 0.0, blue: 30/255.0, alpha: 1.0).CGColor
upperBorder.frame = CGRectMake(0, borderview.frame.size.height-1, borderview.frame.size.width, 1.0);
borderview.layer .addSublayer(upperBorder);

}

and

func imageWithColor(color: UIColor) -> UIImage {

    let rect = CGRectMake(0.0, 0.0, 1.0, yourSegmentControl.frame.size.height)
    UIGraphicsBeginImageContext(rect.size)
    let context = UIGraphicsGetCurrentContext()
    CGContextSetFillColorWithColor(context, color.CGColor);
    CGContextFillRect(context, rect);
    let image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image

}