Custom segmented control

Question

I need to create a segmented control which is looking like this.

Any idea ? Thanks

Answer 1

It is probably of no use for you, but here is the how you can create a segmented control that resembles your image above.

First you create a standard control with as little adjustments in interface builder as possible. You don't even have to set the title, which I did anyway. This is shown in the pictures below.

Then in the view controller in which you have an outlet to the segmented control, you put the following code.

import UIKit

class ViewController: UIViewController {

    //MARK: - Outlets
    @IBOutlet weak var lesGroupes: UISegmentedControl!

    //MRK: - Properties
    var tousGroupes = "Tous les groupes"
    var mesGroupes = "Mes Groupes suivis"
    var tousCounter = 34
    var mesCounter = 0
    var attributesTousGroupes = []
    var attributesMesGroupes = []
    var dividerImage = UIImage(named: "dividerImage")

    override func viewDidLoad() {
        super.viewDidLoad()

        //Clear the border colors of the segmented control and put in the divider image. The image you can pcik yourself. I just got one of the internet.
        self.lesGroupes.tintColor = UIColor.clearColor()
        self.lesGroupes.setDividerImage(self.dividerImage, forLeftSegmentState: .Normal, rightSegmentState: .Normal, barMetrics: .Default)

        //Now adjust the title of the segmented control. I assumed the numbers are some counter telling the user the number of people in the groups.
        self.tousGroupes.appendContentsOf(" (\(self.tousCounter))")
        self.mesGroupes.appendContentsOf(" (\(self.mesCounter))")

        //Once the new title strings are defined the titles of the segmented controls can be set.
        self.lesGroupes.setTitle(self.tousGroupes, forSegmentAtIndex: 0)
        self.lesGroupes.setTitle(self.mesGroupes, forSegmentAtIndex: 1)

        //Please, remember. You set the entire color of the segmented control to clearcolor, which means no color. Now you have to set the title color of each segment seperately. I assumed when the segment is selected, you want the color to be red and the standard color is black.
        self.lesGroupes.setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.blackColor()], forState: .Normal)
        self.lesGroupes.setTitleTextAttributes([NSForegroundColorAttributeName : UIColor.redColor()], forState: .Selected)
    }
}

The result of this example looks like this in the simulator.

Please, let me know if this is what you were actually looking for.

Kind regards, MacUserT