Hi Alex here from rebeloper.com and welcome back to the channel. In this
video I will show you how you can create a Custom UISegmentedControls so
without further ado let's jump right into it!
Okay! Let us just simply start
off and create a brand new project. So a new project. Okay and let's start with a
Single View App. Let's click on Next and I will name this... Okay and let's use navigation
controller. So let's click on Next here. I will add this here. Let's see, let's
create a new folder here I'm gonna name this... And I will create a GitHub
repository so you can take a look at it on GitHub. Okay! There we go! Let's resize
this and what we want to do you basically add a segmented control that
will change the background of our view controller, so to have TinyConstraints
we first need to close your project and open it up in finder. So navigate to your
project and select your root folder next up open up terminal as usual type in CD
and a space just drag and drop and the root folder of your project type in pod in it.
We can create our pod file. Next up we drag and drop the pod file onto
the xcode icon. Just uncomment platform iOS 12. Let's type in pod TinyConstraints.
if you don't know what time constraints
is go ahead and take a look at the video on it on my channel it will be
awesome I assure you. Let's type in pod install now,
so we can install TinyConstraints and as you can see
it's version 4.0.0. Let's constrain TinyConstraints to that version. Okay!
Let's add that there and finally let's just run pod install again so we may see
that indeed we have that version. Now that we have opened up our Xcode
workspace we are ready to go. Let's navigate to our RootViewController and
let's add our first function as usual and that is inside the viewDidLoad setupViews.
Okay! Since this is not existing at the moment let's create it as a fileprivate func.
And this is where we will set up our views. First of all let me
just add in here rather yet we will use custom colors.
I wanted to add some colors but we will use some custom, the default colors from
Xcode. What we want to do now is create our segmented control. So lazy var
and I will name this ... Okay and it will be of type UISegmentedControl and I
just realized that I don't need two L's there well nevermind that's how this
project is recognized from. There we go!
Let's create our control here and if we have type UISegmentedControl and
oh want to add it like so. And you can see that here we have some items
so let's add those items there. and just to make that ever go away
let's return our control and let's initialize it. We want to have some
items. Let's create them here: let items and that will be an array of strings.
Let's see! Let's have our background color as black and let's see red and
then purple pretty straightforward. Let's add those item into the UISegmentedControl.
Now what we want to do now is first of
all let's add the black background color to our view so just type in a view
backgroundColor = .black. Okay! That is pretty straightforward.
Now we want to add our segmentedControl. So: view.addSubView and
that is our segmentedControl. Now we want to constrain it and then I will use
TinyConstraints to do that. Let's import hit here TinyConstraints and
let's add or a segmentedControl.edgesToSuperview and we will exclude the bottom,
.buttom and inserts... well let's add our some UIInset here.
UIEdgeInsets. Okay and I will add in here a top let's say 12
and for the other left is 12 again, bottom 0, right 12 and I will
choose usingSafeArea. Let's add true in there. Finally we need to add a height
to our segmentedControl and that is pretty easy just type in here height 50.
Let's see what we have here. Let's build and run. First of all let's select
I found XR and let's see we do get a segmented control. After that we will add
a target to it and we will customize it later on. And yeah sometimes Xcode is a
little buggy here. It says that TinyConstraints cannot be found but as you can see
it is actually found and let's see how this looks like.
Okay there we go. Here we have black red and purple. And of course this is the basic
UISegmentedControl that is some sort of blueish and as you can see if I tap
on it it changes the color. What we want to do now is maybe let's have this to be
set to 30 because it's quite high as you could see it. What you want to do here
is type in control and .selectedSegmentIndex and I will choose 0
because black is what we don't want to add in here. Let's build and run
again and we should see the first segment selected already. There we go!
It's black there. It's that kind of... let's add now border color, border radius.
So: control and let's add here corner I believe we need to add in here
a layer.cornerRadius = 9 and finally we need to add
control.layer and masksToBounce = true. Okay!
Now let's build and run and see the corner radius in action. Let's just
wait for that and as you can see now we have an ID but we have some issues here
that we will fix it later on down the line when we will add some colors too.
Let's do that now: control.layer and believe it's borderWidth.
Yes, borderWidth = 1 and control.layer and borderColor
and let's make it .white.
I believe we should have a white. Okay one thing Oh
Xcode just crashed on me because we needed to add CGColor after our UIColor.
Let's restart Xcode here. There we go so we want to add in their
UIcolor.white.cgColor. Okay! Let's build and run and we should see
that now we would well off with those rounded borders. Great! Now I don't really
like this bluish so I will add tintColor: control.tintColor = UIColor
and this will be a UIColor... let's close this for now... and it will be
white. Let's hit command + R and see the changes. Okay! a Real nice. Okay! Now what we
want to do finally is a way to change the background. Let's type in
control.addTarget and the target is self. The action is... and I will create the
actions first or rather yet let's just type it in. #selector and it will be as objectiveC method.
And I will call this handleSegmentedControlValueChanged .
Okay! And add in two parenthesis there an
underline and column there. (_:). Okay so that is what we are going to do and for: touchUpInside.
Okay! Let's create this SegmentedControlValueChanged function.
It will be an objective-c function.
@objc and let's make it a fileprivate func. There we go.
And we will add in here a sender and that will be a UISegmentedControl. Okay!
Now that we have that we can check for the sender. Oh I still need to add in here an underscore.
Now we want to see the selected segment index and that is
inside our sender but let's add this to a switch statement.
So: sender.SelectedSegmentIndex. If that is 0, then we want to add the backgroundColor
to be black. Okay! Let's do that. Otherwise let's just copy and paste this
out again. Otherwise if it is one we want to have it .red or we want
to have it as purple. That's the case is two then we want to have purple there.
and we still need to add a default value. Let's see that will be black too.
Okay! Let's just remove that. Okay, and
I believe that is it so let's a build and run and see all of this in action.
There you go it's black, it's red, it's purple. It is not red and it is not
purple so what do we have wrong here? I just figured out that you don't have
to use the touchUpInside. You want to have valueChanged. Let's build and run
this one final time and we should have all of this ready. There we go!
Great! Now you know how you can create your very own custom UISegmentedControls
in Swift5. Hope you enjoyed this one, if you did go ahead and give it
a thumbs up, subscribe to the channel and hit that notification bell to get
notified of new videos as they do come out. And as usual I will see you in the next one!