Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 795
Abdul Hameed Avatar asked Dec 17 '15 12:12

Abdul Hameed


2 Answers

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

like image 189
E-Riddie Avatar answered Oct 18 '22 22:10

E-Riddie


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
like image 36
Juri Noga Avatar answered Oct 18 '22 21:10

Juri Noga