title: Customizing UISegmentedControl: how change tint color of selected segment's image?
body: <p>I've used this <a href="https://stackoverflow.com/questions/31651983/swift-how-to-remove-border-from-segmented-control">extension</a> for the <code>UISegmentedControl</code> which works as you can see <a href="https://i.stack.imgur.com/HudW0.png" rel="nofollow noreferrer">here.</a></p>
  
  <p>But I want to <code>UISegementedControl</code> to work slightly differently. When I select a segment, I want the selected segment's image to change color to <code>colorGreyLight</code> instead of having the background color change to <code>colorGreyDark</code> and the selected segement image change to <code>UIColor.clearColor()</code> (as you can see <a href="https://i.stack.imgur.com/HudW0.png" rel="nofollow noreferrer">here</a>)</p>
  
  <p>So how can I do this?</p>
  
  <p><strong>My Code</strong></p>
  
  <p>UISegmented Control Extension:</p>
  
  <pre><code>extension UISegmentedControl {
      func removeBorders() {
          setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default)
          setBackgroundImage(imageWithColor(tintColor), forState: .Selected, barMetrics: .Default)
          setDividerImage(imageWithColor(UIColor.clearColor()), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)
      }
  
      // create a 1x1 image with this color
      private func imageWithColor(color: UIColor) -&gt; UIImage {
          let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
          UIGraphicsBeginImageContext(rect.size)
          let context = UIGraphicsGetCurrentContext()
          CGContextSetFillColorWithColor(context, color.CGColor);
          CGContextFillRect(context, rect);
          let image = UIGraphicsGetImageFromCurrentImageContext();
          UIGraphicsEndImageContext();
          return image
      }
  }
  </code></pre>
  
  <p>UISegemented Control:</p>
  
  <pre><code>    let types = ["rectangle", "circle", "triangle"]
      shapeSelector = UISegmentedControl(items: types)
      shapeSelector.frame = CGRectMake(0, 0, sliderHeight*3 + 30, sliderHeight)
      shapeSelector.center = CGPoint(x: drawToolbar.bounds.width/2, y: sliderCenterY)
      shapeSelector.tintColor = colorGreyDark
      shapeSelector.removeBorders()
      shapeSelector.selectedSegmentIndex = 0 //default: select rectangle
      shapeSelector.addTarget(self, action: "selectShape:", forControlEvents: .ValueChanged)
      shapeSelector.setImage(UIImage(named: "rectangle"), forSegmentAtIndex: 0)
      shapeSelector.setImage(UIImage(named: "circle"), forSegmentAtIndex: 1)
      shapeSelector.setImage(UIImage(named: "triangle"), forSegmentAtIndex: 2)
      shapeSelector.contentMode = UIViewContentMode.ScaleAspectFit
      drawToolbar.addSubview(shapeSelector)
  </code></pre>
  
  <p>If it's any concern I'm using:</p>
  
  <ul>
  <li>IOS 9.2</li>
  <li>Swift 2</li>
  <li>Xcode 7.2</li>
  </ul>
  
  <hr>
  
  <p><strong>UPDATE</strong>
  Okay so I've changed my code (as marked with comments below) as suggested by Keyur</p>
  
  <p>UISegmented Control Extension:</p>
  
  <pre><code>extension UISegmentedControl {
      func removeBorders() {
          setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Normal, barMetrics: .Default)
          setBackgroundImage(imageWithColor(UIColor.clearColor()), forState: .Selected, barMetrics: .Default) //change to clear color
          setDividerImage(imageWithColor(UIColor.clearColor()), forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)
      }
  
      // create a 1x1 image with this color
      private func imageWithColor(color: UIColor) -&gt; UIImage {
          let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)
          UIGraphicsBeginImageContext(rect.size)
          let context = UIGraphicsGetCurrentContext()
          CGContextSetFillColorWithColor(context, color.CGColor);
          CGContextFillRect(context, rect);
          let image = UIGraphicsGetImageFromCurrentImageContext();
          UIGraphicsEndImageContext();
          return image
      }
  }
  </code></pre>
  
  <p>UISegemented Control:</p>
  
  <pre><code>    let types = ["rectangle", "circle", "triangle"]
      shapeSelector = UISegmentedControl(items: types)
      shapeSelector.frame = CGRectMake(0, 0, sliderHeight*3 + 30, sliderHeight)
      shapeSelector.center = CGPoint(x: drawToolbar.bounds.width/2, y: sliderCenterY)
      shapeSelector.tintColor = colorGreyDark
      shapeSelector.removeBorders()
      shapeSelector.selectedSegmentIndex = 0 //default: select rectangle
      (shapeSelector.subviews[0] as UIView).tintColor = colorGreyLight //added this line
      shapeSelector.addTarget(self, action: "selectShape:", forControlEvents: .ValueChanged)
      shapeSelector.setImage(UIImage(named: "rectangle"), forSegmentAtIndex: 0)
      shapeSelector.setImage(UIImage(named: "circle"), forSegmentAtIndex: 1)
      shapeSelector.setImage(UIImage(named: "triangle"), forSegmentAtIndex: 2)
      shapeSelector.contentMode = UIViewContentMode.ScaleAspectFit
      drawToolbar.addSubview(shapeSelector)
  </code></pre>
  
  <p><code>selectShape()</code> function:</p>
  
  <pre><code>func selectShape(sender: UISegmentedControl){
      switch sender.selectedSegmentIndex{
      case 0: //rectangle
          shapeType = "rectangle"
          (sender.subviews[0] as UIView).tintColor = colorGreyLight
          (sender.subviews[1] as UIView).tintColor = colorGreyDark
          (sender.subviews[2] as UIView).tintColor = colorGreyDark
      case 1: //circle
          shapeType = "circle"
          (sender.subviews[0] as UIView).tintColor = colorGreyDark
          (sender.subviews[1] as UIView).tintColor = colorGreyLight
          (sender.subviews[2] as UIView).tintColor = colorGreyDark
      case 2: //triangle
          shapeType = "triangle"
          (sender.subviews[0] as UIView).tintColor = colorGreyDark
          (sender.subviews[1] as UIView).tintColor = colorGreyDark
          (sender.subviews[2] as UIView).tintColor = colorGreyLight
      default:
          shapeType = "rectangle"
          (sender.subviews[0] as UIView).tintColor = colorGreyLight
          (sender.subviews[1] as UIView).tintColor = colorGreyDark
          (sender.subviews[2] as UIView).tintColor = colorGreyDark
      }
  }
  </code></pre>
  
  <p>Except when I try it, the selected shape is not always the one highlighted as you can see <a href="http://screencast.com/t/X5tREuST" rel="nofollow noreferrer">here</a>. It seems to be almost randomly highlighting the shapes and I don't understand why.</p>
  
  <p>Any help on this would be greatly appreciated!</p>