Everybody what's going on.
This is Kayla with slopes dot com.
And in this video we're going to build out the user interface for a workout Visi that's actually the
screen that you saw in the demo of the app with just the photo and the blurred view and the labels that
show the work out information on the screen.
So we're going to go ahead and get started by pulling open X code creating a new X code project and
we need to give it a good name.
So click single view app and for the product name let's name this.
Well how about leg day.
That sounds fun and make it all caps just for fun so it's a trendy kind of Nike style anyway.
And then I'll click next and I'm going to save it to my desktop.
Why not cool.
So let's go ahead and pull it open here.
I'm going to just unstick landscape left and right just for now.
So we don't have to deal with any of that rotation stuff.
And now I'm going to go into maned storyboard.
But you know well you know what before I do that let's actually change the name of the controller to
say work out VC and let's actually go ahead and update that in all the appropriate places like in the
file there as well as in main storyboard.
We're going to say workout C instead.
So we don't get a crash and now we actually need to drag in the asset.
The photo of the person jogging from the assets folder and if you did not download the source code check
out the first video and you can click on the download button.
There's a little folder with a download icon and drag in that asset to assets Doxey assets.
So let's go ahead and put it in right there.
Run a j peg and it's just simply a photo of someone jogging down a road.
I guess I don't know.
It just seemed cool like one of those you know trendy like moving them going places kind of photos.
So anyway back to my story board.
Let's go ahead and drag a UI image view into the frame and we're going to go ahead and snap it so that
it fits the entire view.
And let's go ahead and pin it like so with zero on all sides.
Add those constraints and now we can actually set the image in the attributes Inspektor by selecting
run.
And then we need to choose aspect fill.
Okay.
And that way it's not stretched out or looking funny.
So awesome that is now in place but I want to make a nice little blurb view in the center where our
text is going to go.
So go ahead and type UI blur.
Or maybe it's UI effect visual view.
Maybe not.
Oh yeah.
A visual effect you with Blur.
I had the words backwards.
So it dragged this in and as you can see it makes a nice blurry view right on our screen which is pretty
cool.
So we're going to go ahead and set a height for this and then also stretch it to the left and right
and we're going to use this as the house for our labels.
So let's go ahead and pin zero from the left and right and give it a fixed height.
Let's do two fifty.
Yeah.
And now we need to center it vertically in the container and that will allow the height constraint to
properly work.
And now that staying put it will stay in place.
And now we just need to add in some text labels and then wire them up with outlets.
So go ahead and search for a UI label.
Drag it on like so beautiful and I'm going to actually just copy and paste this a few times so we get
four labels.
And the reason for that is because we need it to say Leg day workout app.
Then this label will be to display the type of workout and this will be to display the time remaining
in the workout.
So let's go ahead and let's update that to say Leg day workout app and don't worry we're going to change
the font and the style.
This will be type type and this will be well just for now 0 0 0.
So now that we have all the words updated.
Let's go ahead and select all of these and put them into a stack view then we're going to go ahead and
select all the labels and center their font and then we're going to go ahead and go back to the stack
view and change it to fill.
Awesome.
So now let's center the stack.
You and let's go ahead and let's pin this 20 from the top 20 from the right 20 from the left and 20
from the bottom k.
So that will give us some nice spacing there.
But we definitely should be making these a little bit nicer looking.
So I'm going actually up the font size here for all of these.
I'm going to change them all to be Avenir next like so.
And let's go ahead and bump the size up to at least 24 and let's make them all.
Demi bulled k now.
Leg day is the logo.
So it's actually going to be much bigger maybe 56 and I'm actually going to make this heavy like so
then for workout app that I guess could be a little bigger like so yeah maybe like that.
What is that size 30.
Let's do 30 K and then type and time.
Those are fine but they need to be a different color.
So I set type to be blue.
Just for fun and I set time to be green.
OK.
Now leg day and work out up the dark dark dark colors pretty intense.
So I think I actually said it to be kind of like a dark gray like so just so it doesn't look so sharp
and so intense.
And now I want to actually go ahead and spaced these out a little bit like maybe 10 10 points of space.
Now if I select these and I try to delete them you see that it actually kind of gets a little messed
up looking.
These should be centered right in the middle of the screen.
And so I think I'm going to actually have to remove the top and bottom constraints from this to see
if that fixes the problem.
And if I get rid of it you'll see that it has a fixed height at the moment.
But if I get rid of these Watch what happens the height goes down.
But it's no longer in the center so we need to go ahead and pin it vertically in the container like
so.
And then when these are in there.
Oh you know what I just undid that.
Let me do that again.
It horizontally I mean vertically in the container.
And now if one of these gets deleted you'll see it goes right to the center it snaps beautifully.
And so what we're going to do is we're actually going to hide these from the get go and then show them
when there's an actual work out.
And so it'll automatically slide and do really cool things automatically which is very nice.
So that is that we could I guess do feel equally but the way that we're doing it ensures that the spacing
will be the same regardless of if this is at the top or bottom.
So now we need to go ahead and set up some Iby outlets.
So pull open the assistant editor here and let's go ahead and right click and drag from the type label
and name it type label.
OK I guess we could have said work out type label but whatever this one is going to be the timer label.
And those are both exactly where they should be.
Now from the get go in view to load We're actually going to go ahead and hide them.
So go ahead and type type label that is hidden equals true and timer label timer label that is hidden
equals true.
And so those should not be visible when we first run the app.
So I don't know about you but I want to go ahead and see how are you I looks on an iPhone 8 simulator
so let's build and run it and let's see how it looks.
The two labels here should be totally hidden and then after we verify that our UI is good we're going
to move on to the next video where we essentially set up enabling Siri and requesting the proper permissions
to use Siri in our application there are a couple of things that we got to do.
So let's see how are you looks.
And then we will move on that way.
Right here we go opening up leg day.
Let's see how we look Ooh look at that nice and centered nice and pretty.
Let's see what it looks like if these are not hidden.
Build and run it and take a look.
Here we go building to the device pulling open.
Look at that.
OK so awesome.
These stay exactly the same spacing regardless of where they are but definitely go ahead and uncomment
that because we don't want our time and type to show unless we have one.
So go ahead and uncomment that.
And great job guys.
Let's head over to the next video where we're going to enable Siri access and request the proper permissions
to even use Siri.
So let's head over that video and let's do it now.