How Create a Custom Segmented Control — Swift
It’s very common our Designer create some components that are not a UIKit pattern. Most of the time we can make then change somethings but sometimes not. Today I will teach you how to create a Custom Segmented Control.
First, let’s a UIKit Segmented Control.
We have a border, tint color, sections in most of the case we can customize this Segmented Control. Let’s suppose you want to create this component.
You don’t have a bottom view in interface builder to modify or remove selected section background.
Let’s create!
NOTE: I will not use IBInspectable / IBDesignable but if you know how to use them, you can.
Our CustomSegmentedControl is a subclass of UIView not UISegmentedControl
First, we need to create our variable:
We have three private variables, why private? Because we don’t want other classes can change this value without updateView. Three variables to customize our view with a default value.
Now we need to put our buttons in view but we have an array and this can be unlimited. The best to do this is create a Horizontal Stack View. Stack View makes the subViews with equal spacing without using any constraint.
How did you realize we create four constraints to make our stack view full all custom view.
Now, let’s create our selected view. We want the selected view has the same buttons width. We need to divide our view frame with the equal number of the section.
Let’s add some buttons in our array, how are we gonna do that? Using our buttonTitles array.
We first let’s remove any element in buttons and remove all subviews inside our view. We can create a for from our button titles and create an individual button from our titles, let’s set title, color, and action also add to our buttons array.
In this tutorial, I’m considering that always section zero will be selected.
let’s make this happen set color to button in index zero.
In our action func we must create a for using enumerated from our array buttons because we can have access to our single button and index in an array. First, we need to make the button set title color to default after this we need compare to find what button was clicked. We need to find the X position and move our selectorView to position using UIView.animated after this we set our button title color as selectedColor
Now we create a func called updateView to call others three configurations func. So simple.
We can create a Convenience Init or/and create a func passing an array. I’m gonna create these two. Why? Because with you are using “view code” we gonna using our init but if we gonna create IBOutlet we need call our func.
If you run the code it`s should work. Remember call your CustomSegmentedControl in your viewDidLoad()
Bonus
Hold on a second!!!!
If I want to notify my view controller that my Segmented Control changed? We need to create our delegate.
Let’s create a protocol called CustomSegmentedControlDelegate and just class can use it. We need to create a func inside this protocol called changeToIndex with an Int parameter
In our segmented control, we need to create a weak var with a CustomSegmentedControlDelegate type and make optional.
Let’s back to our action button func and inside comparison, let’s call our delegate func.
Hold on one more second!!!!
Now I want to know what section is selected and set selection index without user button action.
Let’s create func called setIndex and this func do the same thing that buttonAction without comparison.
Now we create to variable one private and other public. The public one just returns the private value because we don’t want that this value changes without called any func. Just back to buttonAction and set our private variable value. That simple.
Well, developers with this tutorial, you learned how to create a custom segmented control. If you any question about the code you can see full code here on GitHub with two examples.
