7

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

Screenshot

rmaddy
  • 314,917
  • 42
  • 532
  • 579
Abdul Hameed
  • 1,025
  • 13
  • 17

2 Answers2

5

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

Community
  • 1
  • 1
E-Riddie
  • 14,660
  • 7
  • 52
  • 74
  • "EridB". Actually, You're Right. – Abdul Hameed Dec 17 '15 at 14:11
  • that is actually totally __not__ true at all, as the segmented control's appearance fully customisable via the `UIAppearanceProtocol` – including removing the outer edges. – holex Dec 17 '15 at 15:41
  • @holex No you can't "remove" it. You can customize it by setting tintColor to clearColor, which will set it to invisible along with text, and then setting textAttributes you can change the textColor of items in the segmentedControl. If this is what OP means, then I will edit the asnwer. :) – E-Riddie Dec 17 '15 at 16:12
  • @EridB, I'm not sure what you are talking about, the OP's question was how to remove the border, not about requesting explanations about _how you cannot do so_; the task can be completed via `UIAppearanceProtocol` – if you want to update your answer, please do it and show him how that works actually via that, but the OP has not raised this question because he wanted to get answer from whom _don't know_ how to commit that. – holex Dec 17 '15 at 16:21
  • @holex you are right on this context as it does the trick but however using `UIApperanceProtocol` requires `UI_APPEARANCE_SELECTOR` option, which on earlier versions of iOS has been a popular issue. So before saying `UIAppearanceProtocol` conformance you need to check the option. I always tend to follow up with public properties and methods of the Class, rather than doing customizations which can lead to bugs or unexpected behaviors. Anyway thanks for your points, I have edited the answer to match with the OP's intention :) – E-Riddie Dec 17 '15 at 17:28
  • @EridB, `UIAppearanceProtocol` is supported since iOS5, but at least you have updated your answer. – holex Dec 17 '15 at 17:44
  • @holex If you take a good look at my answer I did not mention anywhere for a lack of support for `UIAppearanceProtocol`. I was meaning that the public methods and properties of the class are the official support from Apple for iOS SDK and for UIAppearance too. Using the scripts [here](https://gist.github.com/mattt/5135521), you can see what I am pointing out. P.S I am broadcasting what I have read, if you prove me wrong, I welcome you :) – E-Riddie Dec 17 '15 at 18:02
  • @EridB, you have been stuck at here a little bit, you are still _wrong_ about making such statement which indicates the border cannot be removed at all; maybe you don't understand the weight of your words, but what you are saying is _wrong_. the correct statement is: __we, developers, are granted to remove the border around a `UISegmentedControl`__, maybe the way how the procedure can be done does not match your expectations or even you personally hate the way how it can be done, but your personal feelings won't change the pure fact which is __we. can. remove. it.__ – holex Dec 17 '15 at 18:47
  • @holex I just proved that I can **make** it, you have the update, but it is not on recommended terms as it is not supported specifically for `UISegmentedControl`, it is not just my personal taste. It is pointless to mention again that you are confusing the term remove with invisible. Anyway I was responding to you on behalf of "lack of support" for `UIAppearanceProtocol`, but you got yourself in. You keep talking about my personal thoughts and it is weird as I am just citing words from WWDC. – E-Riddie Dec 17 '15 at 19:31
3

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
Juri Noga
  • 4,363
  • 7
  • 38
  • 51