Hey everybody what's going on this is Caleb with slopes dot com.
And in this video we're going to build out the app UI for the screen recording app we're going to build
with replay kit.
So pull open X code and go ahead and click Create new project just like so.
And we're going to make this a single view application and I'm just going to call this screamy.
Maybe that will be the name of our app screening and make sure everything else is good to go.
Your team should be just personal team your name your organization identifier just leave it as it is
and click next then go ahead and just save it wherever I'm going to save mine on my desktop and pull
this open in full screen so it looks like I've created too many little apps in the last seven days.
So you know what maybe it just has to do with creating a new provisioning profile like so.
Oh my app ID limited.
Ok so I'm going to switch to the dev slopes one that's fine k.
Super cool.
There we go.
And now what we're going to do is go into main storyboard and we're going to Dragon everything that
we need to build this app.
So first of all it's Dragon a UI label.
We're going to build this from top to bottom and let's go ahead and just set that there.
That's fine.
Doesn't really matter the size and with to be honest though I am going to set it to be centered and
in my example I used the system font against my better judgment so I'm going to switch it to Avenir
next Demi bold and let's make it a size 24 that would look pretty good.
Awesome.
So that looks great.
And let's just change this to say ready to record because that's what it's going to say.
Initially when we open the app next I'm going to go ahead and drag on a UI segment in control like so
and I'm going to actually go ahead and drag this from the left all the way to the right.
And we need four segments not just two.
So I'm going to go ahead and up the segment count all the way to four and now we're going to go ahead
and change the labels to say something different.
OK.
So the first segment is going to say skate because it's going to be that cool picture of the skatepark.
The second segment we're going to make say food because I have a picture of food that I'm going to give
you then segment two or three I guess but we're going with zero indexing is going to be cat.
It's a really big cat like a Jack not a Jaguar What is it like a snow leopard.
And the last segment is nature with one are not too sweet.
So that looks great.
I am going to actually change the tent to be green because I think that looks cooler.
And now we need to drag and AUI image view like so.
And let's go ahead and actually make this you know what we can afford to make it a square.
Yeah how about that.
3:43 by 3:43.
And we actually do constraints just yet but to make it a square that looks good.
And next we need to go ahead and create that.
You guys switch.
They're allowing us to turn off or on the microphone access and we need a label basically to say that
that's what the switch does so get another label drag it on there and let's just say microphone access
Caillat center that bad boy and let's go and change the font.
Custom custom Avenir next.
And you know what.
This will actually be OK just as medium.
Make sure we can see everything and center the font as well so it's right in the middle of the screen.
And then finally all we need to do is drag on a button at the bottom that we're going to push.
So search for button and drag on a button and we're just going to make this say record whoops like so
OK and we're going to change the font to match all the other font stuff we've been doing.
Like so and let's make this size 24 as well and we'll make that Demi bold also.
So put that there right in the center and change the font color to green because when we tap it we're
going to change it to red to say stop but green means go.
So now I guess we could change the font of the segment here.
I think we can maybe not though.
No way.
Well we can change the style that's for sure.
Interesting so it doesn't appear that in Interface Builder you can change the font of the segments here.
Super weird.
Anyway that's fine.
It looks OK.
So now what we need to do is we're going to go ahead and put these all together into a stack view.
But I want to go ahead and keep these close.
So I'm going to put these in their own stack for you.
All right.
And maybe spaced them out like five or so just to give it a bit of space.
And then what we're going to do is we're going to select the stack view the image view the button the
segment and the label and pinch those all together into a stacked view.
And now what we can do is we can pin this zero from the safe area zero from the right zero from the
left or vice versa.
Right right and left and zero from the bottom.
OK.
Now you're probably wondering hey what the heck is going on why is this all stretchy.
Well we need to set it to fill first and then we're going to go ahead and give it some spacing of maybe
30 maybe more let's do 40 K 40 is a bit too much it looks like about 30 again.
Yeah 30 looks good.
And this you're probably wondering hey what's going on.
Well we have it pinned the wrong way so change the alignment there horizontally and vertically to be
in the center.
And you know what I don't really like that that's actually stretching to the far side there so let's
put it 20 from the safe area and 20 from the safe area.
Whoops that's the bottom.
That should be zero and the trailing side should be 20.
There we go.
OK that looks much better.
So now our touch points are much bigger for our segment which is good.
And you know if we rearrange things it will look fine when we build it.
But for now that's going to have to do.
So now let's think.
This looks pretty good.
I'm OK with this so everything is ready to go.
Now we just need to wire it up in our interface builder for all the things that need to be interacted
with.
So make some space at the top.
What I did I'm sorry was I open the assistant editor here and what I'm going to do is I'm just going
to go from top to bottom and create Iby outlets.
So right click and drag and this is going to be status label Okay connect it by pressing enter.
This is going to be Image picker.
Connect that.
This is going to be image.
Well how about this.
Maybe selected image view.
OK.
This will be the mike toggle.
All right.
And this is going to be the record button
just like that.
So we can also get rid of did receive memory warning because we're not going to use it.
And you know what.
At the moment we can actually get rid of the load because we're not going to use it for this app.
We're not really modifying anything nothing is happening when the view loads.
It's not super important for this project particularly but yeah guys I think we're good to go.
You know what.
The only other thing is that this segment here needs to have an I.B. action because when we tap on one
of the different segments we need to do something.
So right click and drag from that UI segment control change to action and then we are already on value
change.
That's exactly right because whenever a value changes in the segment we want to call an action so let's
just say image picked K and the sender is actually going to be UI segment control.
We should have set that when we created the IB action I just forgot.
And now the only other thing we need to do is to set it so that when we actually tap on the record button
it's going to do something.
So we're going to create an IB action for the record button as well so we can say record wups record
button was pressed and go ahead and connect that.
And since it's just one button the center is not super important but it is important here because we
want to be able to access which segment was actually touched so that we know which image to load.
We'll talk about that in a future video.
But you know what I think we are good to go.
We're going to head over to the next video now.
The UI is done and though we're basically going to go ahead and start by importing replay kit creating
an instance of our peace screen recorder and we're also going to explore some of the capabilities of
replay kit to see what it's really capable of.
It obviously can be extended past this course.
This is just an intro to replay kit but we're going to learn the core essentials so that you can get
started using it in your apps no matter if it's a game app or a social media app whatever you can implement
screen recording into your very own application.
So let's head over to the next video and let's import replay kit.