CODEWITHSUNDEEP
iosuisegmentedcontrol
Abdul Hameed
Abdul Hameed

Reputation: 1043

how to remove border from UISegmentController?

I want to remove border of UISegmentController. If it is possible. otherwise change it in the custom border color.

Screenshot

Upvotes: 7

Views: 6549

Answers (2)

E-Riddie
E-Riddie

Reputation: 14780

Update

Case 1 - Customizing borderColor of each element in segmentedControl

Code

extension UIView {
    ///Add border color with corners
    func addBorderWithColor(color: UIColor, roundingCorners: UIRectCorner) {
        self.layer.borderWidth = 1
        self.layer.borderColor = color.CGColor
        self.addRoundingCorners(roundingCorners)
    }
    
    ///Use corner radius depending on UIRectCorner
    private func addRoundingCorners(roundingCorners: UIRectCorner) {
        let path = UIBezierPath(roundedRect:self.bounds, byRoundingCorners:roundingCorners, cornerRadii: CGSizeMake(4, 4))
        
        let maskLayer = CAShapeLayer()
        maskLayer.path = path.CGPath
        self.layer.mask = maskLayer
    }
}

let segmentedControl = UISegmentedControl(items: ["Red", "Green", "Blue"])

segmentedControl.subviews[0].addBorderWithColor(UIColor.blueColor(), roundingCorners: [.TopRight, .BottomRight])
segmentedControl.subviews[1].addBorderWithColor(UIColor.greenColor(), roundingCorners: [])
segmentedControl.subviews[2].addBorderWithColor(UIColor.redColor(), roundingCorners: [.TopLeft, .BottomLeft])

segmentedControl.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.blackColor()], forState: UIControlState.Normal)

Playground

Customize borderColor

Case 2 - Get rid of borders

Code

let segmentedControl = UISegmentedControl(items: ["Red", "Green", "Blue"])

//Change Text Attributes (Changing textColor to black)
//**Be sure to manage all the UIControlState for these attributes if you need to customize this for other states
segmentedControl.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.blackColor()], forState: UIControlState.Normal)

//Change tintColor to clear, in order to set border invisible
segmentedControl.tintColor = UIColor.clearColor()

Playground

Transparent borders

Original Answer

The answer is NO
You can't remove the border of the UISegmentedControl

You can create a custom control by using UIButtons to achieve what you are looking for.

In the state of UISegmentedControl, you can remove the dividers between items in the UISegmentedControl, or you can change the tintColor (borderColor)

enter image description here

Upvotes: 5

Juri Noga
Juri Noga

Reputation: 4391

To change color and text of segmented control try that:

Objective-C:

NSArray *array = [segmentedControl subviews];

[[array objectAtIndex:2] setTintColor:[UIColor redColor]];
[[array objectAtIndex:1] setTintColor:[UIColor greenColor]];    
[[array objectAtIndex:0] setTintColor:[UIColor blueColor]];

Swift:

let array = segmentedControl.subviews
array[2].tintColor = UIColor.redColor()
array[1].tintColor = UIColor.greenColor()
array[0].tintColor = UIColor.blueColor()

Note that subviews are in reverse order relatively to user interface.

You can customize border in the same way:

let array = segmentedControl.subviews
array[0].layer.borderWidth = 5 // change thickness of border
array[0].layer.cornerRadius = 4 //change corner radius

Upvotes: 3

Related Questions