Hi, Alex here from rebeloper.com. I want to know how to add segments control,
picker, stepper and textfield in your app. Then make sure you keep on watching.
Let's build out this app right here. Hit that subscribe button, open up Xcode and
let's dive. In the previous video we have implemented our show slider, toggle
and of course the sliders and our form. Okay! Now in today's video we are just
going to move forward and we are going to add a bunch of stuff like this
segment picker viewed, text field, this stepper and our picker view, okay.
So before we do that let me just go ahead and show you how our toggle view has this
toggle right here and if you recall correctly let me just show you what we
are have here. We have it here and that is a pretty easy fix, let me just add in
here fixed size, okay. And that will basically push the toggle to the text
and maybe just remove those, okay. So let's go back to our content view and
let's start off with our text field because yeah most probably that is the
easiest. So text field and we are going to use the one with a title and the text.
Okay! The title should be title goes here and we already have a text binding let
me just scroll all the way up. Here we have our title text okay and a dollar
sign title text and that couldn't be easier again the thumbnail view is
already connected with all over these states and the bindings, okay hello there.
Awesome, okay! Let's move forward and now let's create our stepper and the
stepper will be down here and again this is pretty straightforward.
So stepper and we are going to use the one with value in the range and with a label.
Okay! So the value will be our like count. So dollar sign, oh sorry,
dollar sign like count. The close range let's say from 0 till 100 and the label
will be a text saying, let's see likes. We are going to add in here our likes
and the value of those likes and that is of course our likes count, there we go.
We've have here our like count, okay. Let's build and run and see the stepper also
in action, okay. Here we have our likes, its incrementing and as you can see it's
incrementing also on the card, there we go. Okay, awesome and as you can see now we
cannot go further down the element zero. Okay, next step is the segmented control
or the picker and basically the segmented control is a picker. So let's
start off by creating and the general picker and we are just going to add this
into a section. So section just so you know that we can have multiple sections.
So let's create our picker here and we are just going to choose this
first one with a selection label and content. Now the selection is what we are
just going to select and up here for the images and current image name this is
corresponding for what we need for this picker. We are just going to choose
current image name. So that will be our binding the dollar sign current
image name. For the label let's add in here at text, there we go. Let's say should this
say select image.
There we go and for the content now this is the tricky part because we want to
have a list of all of our images and we have our image names here and I already
populated our assets with these images. Okay! Now for that we are just going to go
with a for each loop. I believe I will need a parenthesis here but if not I
will just remove that later on. So for each and we are going to use this
first one or the second one with the ID because yeah we need to have the ID and
for the data we are just going to have our image names the ID is this slash dot
self and the content let's just remove this will be an image name. So we are
just going to get back our image name and here we are going to construct a
view and let me just take a look at here an HStack with an image and a text.
So real quickly let's create our HStack here with an image, okay there we go.
And image name, image name there we go. And let's add some modifiers here.
It will be resizable and aspect ratio, aspect ratio dot fit. I'm really just
fast copying here and the frame should be 40 by 40 and no alignment, there we go.
And let's just add in here text too with the image name
and finally let's add a spacer so all of this will it be pushed to the left, okay.
And let's just add these here and that should be it. Let's hit command B and see
how that looks like. If it succeeds if not then most probably we have some
problem with this picker, there we go. Let's just refactor this and let's
remove these and these parentheses will go I believe
here, let's see. All of this should work out okay we just need to add in here
content, there we go. That should fix our problems. Auto completion is quite not
reliable just yet. Let's hit command B and hopefully
everything succeeded. Yes it did, so let's build and run and
see how this looks like. As you can see here we have our label, our title label,
our image and the name of that image and let's go in there and let's select
another one and of course because all of this is tied up with the thumbnail view
we have already our image in there, okay. One last thing to note is that in order
to this to work we need to be in a navigation view, okay. So make sure if
you're using a picker you are in a navigation view, okay. One last thing that
I'm going to do with this speaker is to refactor it in the, into the picker view.
So let me just copy out all of this and go to our picker view and add that here
and right of the bat you will see that we are going to need a current image name.
So that will be a binding and if you don't know what States or bindings
are go ahead and take a look at my other tutorial on States and binding it's
really useful to know how all of this works and this current image name is of
type string, okay. That is the binding. But we also need
image names. So that is a simple string of bindings and this could be a let I
know I did it a bar on the other view but yeah that could be it and that is an
array of strings and I believe that should take care of everything.
Let's add our missing arguments here as usual and let's add in
here a constant and the value of an empty string and we will have another missing
parameter and that is image names and that will be an empty array here.
I believe this should work. Let's hit command B if not then we will add a
simple yeah don't need to add anything else.
Now let's go back to our content view and just use this picker view picker view
and now all we need to do is add our current image name which is of
course dollar sign current image name and our image names which are of course
our image names and how awesome is this refactoring, okay. One final thing let's
go to our segmented control and that is basically another picker view and why we
are here let's go and create I believe the standard picker that is Auto
suggested here will work. So for our selection we are just going to use this
state of corner radius, there we go. Dollar sign corner radius. For our label
we are just going to use a simple text but it will have none. So this empty
string, there we go. And now for the content we are just going to go through
every for each element, let see data, ID and the data is our corner radiuses.
This simple array, the key is slash dot self and make sure all of these are
unique of course and for our content we are just going to have a corner radius
and let's just have a text here to make our corner radius.
To make this segmented picker we are just going to use our picker style.
Let's see picker style and this should auto complete but I've just used segmented
picker style, there we go and that should just work
let's hit command B and hopefully we will not have any issues here. Oh because
this corner radius is an integer we need to create how it has string. So let's
hit command B and now we should be able to see it, okay. Let's hit command R to
see this in action, there we go and it's already working, okay. Time to refactor
this and this is really, really simple. Let's just grab all of this code and
copy it out. Go to our segmented picker view and instead of our text we are just
going to add that in there and by now you already know the drill let's create
a binding with a current corner location and var corner location
radius and that is an integer and yeah we have our corner radiuses. So that is a
let current corner radiuses and that is an array of integers and that should
take care of it. All we have to do is add our missing arguments here which is
pretty straightforward constant value of 0 and let's wait for the other one for
the auto completion or rather yet the fix and that is an empty array, okay.
Finally let's go back to our content view and hit command B so we get our
xCode to complete and let's see segmented
picker view and we have our current corner radius which is of
course our dollar side current corner radius and our corner radiuses and that
is our corner radiuses, okay. And yeah I believe we are ready let's just test
this out if it's working as it should and yeah that is awesome. We have created
all of our elements. So that is it for this tutorial. I hope this video was
helpful to you. I want you to hit that notification bell because in my next
video I'm actually gonna talk about iCloud in Swift UI. If you're interested
make sure you hit the notification bell so you don't miss that video. While you
wait for that video make sure you also check out these two videos that I have
over here. I talked a lot about iOS development SwiftUI and how to
code smarter. So make sure to check out these videos as well and there's always
I will see you in the next one.