{"id":11483,"date":"2017-04-28T08:44:51","date_gmt":"2017-04-28T08:44:51","guid":{"rendered":"https:\/\/sep.live.e3cms.net\/blog\/custom-uisegmentedcontrol-swift-tutorial\/"},"modified":"2017-04-28T08:44:51","modified_gmt":"2017-04-28T08:44:51","slug":"custom-uisegmentedcontrol-swift-tutorial","status":"publish","type":"post","link":"https:\/\/hexboxdev.wpenginepowered.com\/blog\/custom-uisegmentedcontrol-swift-tutorial\/","title":{"rendered":"Swift iOS Tutorial: How to Customize UISegmentedControl"},"content":{"rendered":"

<\/p>\n

Customizing a UISegmentedControl<\/strong><\/h2>\n

If you have spent any time developing an iOS app, you have probably realized that customizing UI elements in Swift can be hard. There is either a checkbox that does what you want, or it takes hours of research and trial and error to get something just the way you want it. For example, customizing a UISegmentedControl to display the selected segment as white is pretty straightforward. Apple provides a place to make this change in storyboard or you can change the tintColor property in code. \u00a0However, changing the selected segment to have a darker background while the text and border remain white as in the image below is not so trivial.<\/p>\n

\"Custom<\/p>\n

This Swift iOS tutorial will help you get a segmented control that behaves as the one above. \u00a0As a disclaimer, the gradient background is just an image behind the UISegmentedControl, and the segments and their titles are set up in storyboard. This tutorial is primarily focused on customizing the look of the selected segment.<\/p>\n

The Tutorial: CustomSegmentedControl<\/strong><\/h2>\n

Add a new file to your project called CustomSegmentedControl.swift and add the following code to it:<\/p>\n

import UIKit class CustomSegmentedControl: UISegmentedControl {     required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        configure()     }     private func configure() {    }    func changeSelectedIndex(to newIndex: Int) {    }}<\/code><\/pre>\n
Identifying the Problem<\/strong><\/h3>\n
The inherent problem with trying to get the selected segment\u2019s background to change independently of everything else is that by default, the selected segment changes its background to fill with\u00a0the UISegmentedControl\u2019s tint color and changes its text color to be clear. \u00a0Any attempts to change the background color of the segment will be overwritten by this default behavior as soon as it is selected. So we need to work around this behavior.<\/p>\n
Important<\/strong>: First, set up an IBAction outlet for the UISegmentedControl\u2019s ValueChanged and make sure that sender is a CustomSegmentedControl.\u00a0 In that function, call sender.changeSelectedIndex(to: sender.selectedSegmentIndex).<\/p>\n
@IBAction func segmentControlValueChanged(_ sender: CustomSegmentedControl) {    sender.changeSelectedIndex(to: sender.selectedSegmentIndex)}<\/code><\/pre>\n
Because we cannot change the default behavior of the selected segment, the first thing we have to do is to make it so that the selected segment isn\u2019t actually selected.\u00a0 Add a currentIndex variable to manually keep track of which segment is selected.\u00a0 In changeSelectedIndex, set the currentIndex to newIndex and set the UISegmentControl\u2019s selectedSegmentIndex to UISegmentedControlNoSegment. This will deselect the selected segment and now we can begin to customize the\u00a0UISegmentcontrol. This is the current state of the file:<\/p>\n
import UIKitclass CustomSegmentedControl: UISegmentedControl {    var currentIndex: Int = 0 \u00a0     required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        configure()    }    private func configure() {    }    func changeSelectedIndex(to newIndex: Int) {        currentIndex = newIndex        self.selectedSegmentIndex = UISegmentedControlNoSegment    }}<\/code><\/pre>\n
Solving the Problem<\/strong><\/h3>\n
The only way to change properties of the views in a UISegmentedControl is to access its list of subviews. This list, however, is not guaranteed to be in any particular order.\u00a0 Because of this, add a variable to the\u00a0class called sortedViews that can be used to access the subviews of the UISegmentedControl.\u00a0 In configure, sort the array of subviews by their x position and save it in the\u00a0new variable.<\/p>\n
import UIKitclass CustomSegmentedControl: UISegmentedControl {    var sortedViews: [UIView]!    var currentIndex: Int = 0    required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        configure()    }    private func configure() {        sortedViews = self.subviews.sorted(by:{$0.frame.origin.x < $1.frame.origin.x})    }    func changeSelectedIndex(to newIndex: Int) {        currentIndex = newIndex        self.selectedSegmentIndex = UISegmentedControlNoSegment    }}<\/code><\/pre>\n
Making it Look Good<\/strong><\/h3>\n
Now we have all of the tools in place to customize the\u00a0UISegmentedControl. \u00a0Define a background color for the\u00a0selected segment as selectedBackgroundColor. \u00a0In changeSelectedIndex, set the old selectedIndex\u2019s background color to clear and set\u00a0the new selected segment\u2019s\u00a0background color to the defined color. \u00a0Also add a call to changeSelectedIndex in configure to initialize our UISegmentedControl properly.<\/p>\n
import UIKitclass CustomSegmentedControl: UISegmentedControl {        let selectedBackgroundColor = UIColor(red: 19\/255, green: 59\/255, blue: 85\/255, alpha: 0.5)    var sortedViews: [UIView]!    var currentIndex: Int = 0        required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        configure()    }       private func configure() {        sortedViews = self.subviews.sorted(by:{$0.frame.origin.x < $1.frame.origin.x})        changeSelectedIndex(to: currentIndex)    }        func changeSelectedIndex(to newIndex: Int) {        sortedViews[currentIndex].backgroundColor = UIColor.clear        currentIndex = newIndex        self.selectedSegmentIndex = UISegmentedControlNoSegment        sortedViews[currentIndex].backgroundColor = selectedBackgroundColor    }}<\/code><\/pre>\n
Finishing Touches<\/strong><\/h3>\n
The last step is to add a few finishing touches to the\u00a0configure function including the tint color, rounded corners, and font styling. This is the completed file:<\/p>\n
import UIKitclass CustomSegmentedControl: UISegmentedControl {        let selectedBackgroundColor = UIColor(red: 19\/255, green: 59\/255, blue: 85\/255, alpha: 0.5)    var sortedViews: [UIView]!    var currentIndex: Int = 0        required init?(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        configure()    }        private func configure() {        sortedViews = self.subviews.sorted(by:{$0.frame.origin.x < $1.frame.origin.x})        changeSelectedIndex(to: currentIndex)        self.tintColor = UIColor.white        self.layer.cornerRadius = 4        self.clipsToBounds = true        let unselectedAttributes = [NSForegroundColorAttributeName: UIColor.white,                                    NSFontAttributeName:  UIFont.systemFont(ofSize: 13, weight: UIFontWeightRegular)]        self.setTitleTextAttributes(unselectedAttributes, for: .normal)        self.setTitleTextAttributes(unselectedAttributes, for: .selected)    }        func changeSelectedIndex(to newIndex: Int) {        sortedViews[currentIndex].backgroundColor = UIColor.clear        currentIndex = newIndex        self.selectedSegmentIndex = UISegmentedControlNoSegment        sortedViews[currentIndex].backgroundColor = selectedBackgroundColor    }}<\/code><\/pre>\n
This process doesn\u2019t involve a lot of code, but it certainly took me some time to find a solution that gave me what I wanted. \u00a0Hopefully this saves you some trouble and gives you a new way of thinking about UI customization using Swiftin iOS.<\/p>\n
You can find the source code at\u00a0https:\/\/github.com\/JoeCoy\/CustomSegmentedControl\u00a0<\/a><\/p>\n
<\/p>\n
\n
Build awesome things for fun.<\/h2>\n
Check out our current openings for your chance to make awesome things with creative, curious people.<\/p>\n
Explore SEP Careers \u00bb<\/a><\/p>\n<\/div>\n
You Might Also Like<\/strong><\/p>\n