13
Aug

Stanford – Developing iOS 11 Apps with Swift – 3. Swift Programming Language


[MUSIC] Stanford University. Okay, well welcome to lecture number
three of Stanford CS193P, fall of 2017 and
18 academic year. Today mostly, we’re gonna
talk about some Swift stuff. Now, you’ve hopefully done
your homework for the reading, so some of the stuff will
be kinda summary, but some of this is really not
covered in the reading. So I’m trying to give you
the full picture of stuff, that reading is really great
but it is great concise. I know you probably
feel like well, that was a lot of reading for
something that’s concise, but it is quite concise.
So I’m gonna try and cover some of the other stuff.
But before I do all that, I’m gonna do a little,
what I call a teaser demo of auto-layout where I’m gonna
show you how we can make our UI in concentration look
good when we rotate the phone, or when we a run on little bit
different sized iPhone, or whatever. I call it a teaser
because I don’t intend to teach you auto layout which
is the feature that allows us to do that. It’s just to
show you what’s possible. We’ll actually have
a whole lecture on auto layout in about three
weeks I think. But then, after I do that little demo,
I’ll be back. I’m first gonna take just one minute to
review what you should have learned by what we did last
week and I’m literally just gonna read it off a list with
quick examples. And you can kind of say in your head,
oh yeah, yeah I got that, I got that or oh wait, I did
not really understand that and that’s a prompt to go back and
look at it. Then we’ll dive into this long
list that you see up here, of various Swift things. So
let’s start with this demo I was talking about,
this auto-layout demo. What we’re gonna do here, and
I apologize for any technical problems we have here because,
actually, my computer died, and I had to put it. This is
all brand new computer, so I hope everything’s installed
properly. But here’s the code, I think, that we had at
the end of the last lecture. And the UI looks pretty good.
We laid it out. But I just did this by
dragging these things and using the little dash
blue lines to put them in position. And when we run
this thing, it looks okay but only on an iPhone X and only in portrait mode like
this. If I were to for example, rotate this iPhone
to the side which I can do in a simulator by going,
Hardware, rotate left or right, you can see that my UI
looks like this. My buttons are kind of all jammed in the
corner here. I’ve lost flips, it’s down here somewhere.
I can’t even see it. Still works, but it’s kind of
off in the middle of nowhere. What we really want is for
this UI to spread itself out and fill the whole space
that’s involved. By the way, you can also rotate your
device with Command and the arrows. Kind of a cool
way to flip back and forth. All right, so
how are we gonna do that? How are we gonna make our UI
expand? Let’s go ahead and open up here, give
ourselves some more space. And also I’m gonna
zoom in a little so you can see. Another thing I’m
gonna do is we’re gonna be using these blue lines,
the dashed blue line that appears as you move
things around as part of this. So I’m gonna change my
background from black to back to white temporarily,
just so that we can see that
those blue lines and stuff a little bit better.
So I’m just gonna go to white. When we come to run,
I’ll turn it back to black. So this is purely for dealing
development issues here. So it’s really kinda two things I
need to do to make this work. One is, I need to kinda
take all those buttons and make them stick to the edges,
right? So that when they rotate and the edges get longer and
skinnier, they stick. Right now, everything’s stuck
to the upper left corner. The upper left corner, you’re
gonna find out next week, is the origin of drawing. In
IOS where everything is kinda stuck up to the upper left and
then just, so when we rotate it all,
it just goes off the bottom, we can’t see it. So that’s
really what we need to do, but to stick them to the edges, we also kind of need to group
them together. Because when the edges pull this group
of 12 buttons apart, they all need to kinda
share that space. So there’s two things
we have to do. One is group them together,
one is pin them to the edges. So we’re gonna do that with
two different features in IOS. One, the grouping
things together, we’re gonna do with stack
view. Okay, so UI stack view is just another class in IOS
like UI Button is a class and UI label is just another
view in fact. And what it does is it will take
other views, like let’s say these four buttons and
it will stack them together. Now, it only knows how
to stack horizontally or vertically. It can’t stack
12 of these things in two dimensions like this. So
I’m gonna have to make three horizontal stacks out of this
group, out of this group, and out of this group. But then
I’ll take those three stacks and stack them vertically.
Cuz it’s perfectly fine to put stacks inside stacks,
all right? And once I do that, I’ll have all 12 of these
kinda stocked together. And then I can pin it to the edges
and they’ll stretch out. So how do we make this stack use? Super simple, you just select
it here. Let me zoom in so we can really see what’s going
on here. We only need the top part for now. So I deselected
these four things. I’m going down to this
button right here. You see this button,
embed and stack? Well, that’s what it does.
It embeds in stack. And it embedded it.
Now, couple of things. One is, it made the buttons as
small as it could when you put in the stack. It has 50
point font, remember, for those emojis. So that’s just
as small as they’ll go. It also has no spacing
between. But I can put spacing in-between by just selecting
it. It was left selected after I stacked. And going over here
to the inspector because this stack view, just like
a button, can be inspected, right? And you can see
it made it horizontal, it kinda noticed my buttons
were mostly horizontal. So it picked horizontal. And so
here’s how I set the spacing. I go down here. I’m gonna
use a standard spacing. There’s a lot of places when
you’re doing UI design where you can pick an UI
standard value and it’ll pick a standard spacing. This is a standard
spacing between buttons. And you wanna use that pretty
much as much as possible. That way, your UI will be
spaced like other UI and you will feel like rolling
on the same page as UI designers across all these
apps. Also I wanna make sure that these four buttons get
equal amount of space. Okay, whatever space I am given here
gets equally distributed and I do that with this
distribution thing here, I say fill equally. Alignment
just means I fill the whole space, I could have these
things being centered or kinda pushed up to
the top of the stack but I’m gonna have it fill
the whole space. So that’s it. So I’m just gonna do the same
thing with these two rows. So this one go down here,
embed in stack, this group right here
embed in stack. Oops, I did it twice there. Now I’m
gonna select both of these. Make them fill equally and
standard value spacing. So now I’ve got three horizontal
stacks. I’m gonna stack these together, I’m gonna
select them. By the way, dragging to select is really
an awesome way to select. I highly recommend you do that
rather than trying to click on things. Because by the way,
let’s say I try to click on here to select this row. Oops,
I selected the button inside. I didn’t want that,
I wanted the whole row. But if I just drag, not control
drag but regular drag here, it selects the thing that I
intercepted with my drag. Anyway, so I’m gonna select
all three of these with drag. And I’m gonna go embed in
stack. You put them in a vertical stack. You notice
this time it’s vertical, cuz it noticed those three
things are vertical. If your things are random, it’ll pick the one that it
thinks is the most likely. You can always change
it by going here and changing it to the other one.
So we have vertical, we also wanna fill equally,
top to bottom here, and we also want standard spacing.
So it’s great. We got our
buttons in this nice grid. They’re all Perfectly laid
out in this rectangle. Now, we want to pin this rectangle
to the edges. Okay, so that when the device rotates,
or if the device was bigger, like if it was
an iPhone 8 Plus, or something like that and
it was wider, so that it would all just stretch
out. So, the way we do that is first I’m going to
use those dash blue lines. I picked up this thing.
Again, picking it up, you wanna select it first,
then pick it up. If you don’t select it first
and try to pick it up, oops, you might try and pull one of
these things out of there. Okay? So, be careful
about that. All right. So, I’m gonna use
the blue lines. I’m gonna put this where it
kinda suggests for the upper left hand corner. You see that? That’s pretty
much where the blue line, that would be the standard
spacing from the edges. That’s what the blue
lines are telling you. This is a standard
place to put this. Now, I need to pin it and the way
we make relationships between views and the UI like pinning
them to each other and stuff is with control drag.
Exact same way that we made a relationship between
our UI and our code, by dragging the code, we do
the same thing between views. So, I’m gonna control drag
from this already selected box here to the top. Okay, so
I’m just dragging up towards the top, and when I let go
it’s going to say, okay, what relationship do you
want between that view and the top. And there’s various
relationships you can have, like I said, in three
weeks we’re going to have a whole lecture on these
relationships, but at the very top is the one
Top Space to Safe Area. You see that Top Space to
Space Area? The safe area is a safe edge around
the screen where you can safely draw without
overlapping some other UI. So, here it’s putting it right
under the place where all the cameras and face
recognition stuff is all in here. So, it’s to keeping it
below that. Now, if I had other UI on this, like tab
bars, or title bars, or whatever, then the safety area
would be inside those. So, we wouldn’t overlap our titles
and stuff. It’s really cool. So, I’m gonna put this
top space little pin, so I’m kinda connected it and you
can see this blue line appears right here. Okay? This blue
line here, long blue line. It represents that pinning and
I can even click on it. Okay, and when I click on it, look,
it’s inspectable in the top half here. Okay? And it’s just
telling me that un-pinned from the safe area top to the
top of that stack view. And we’re zero points
away from it. We wanna be right up
against that safe edge. That’s where the blue dashed
lines told me to put it, so that’s where I’m gonna put it.
Now, we can do the same thing to the left edge over here, so
I’m gonna control drag over. This time it says,
Leading Space to Safe Area. Now, why do you think that
says leading instead of left? Anyone wanna guess? It says
leading instead of left, because some languages Hebrew,
Arabic, they go right to left. The letters come from
the right, and they flow out towards the left. In those
cases, you want pretty much your whole UI flipped over.
So, you would want these buttons pinned to the other
side, because the text on the buttons is gonna be
coming from the right. Okay? Now, it doesn’t matter
with our emojis, but that’s why we do leading and
trailing instead of left and right. Okay? So, I’m gonna
click this Leading Space to Save Area right here. Connect
it, I get another little blue thing right here. You see
this one? If I click on it, it looks like
a little eyebeam, it’s pinning these 2 and
it’s pinned it with 16 points. You see 16 points, evidently
the blue lines think from the left edge, or the leading
edge you want 16 points. Okay, I’ll take that.
And then, of course, I could pin to the other side.
Ctrl+drag over here. And now, here I didn’t use
the blue line for that edge. So, here if I say trailing
space to safe area. I get an eyebeam,
this huge, okay. So, it goes all the way
across like that. And I don’t want that, I want
it to be the same as the other side, 16 points. So,
in my inspector right here, this distance is this constant
right here, 215 points. So, I’m gonna change
that to be 16, so it matches the other side.
Oh, and look what happened, it pinned the edge of my buttons
and they spread out, equally, filling equally, because we
told we want to fill equally. Okay, so that’s pretty cool,
now we have the bottom. So, the bottom is a little
trickier, because we’ve got flips down here. So, we want
flips to be on the bottom, and we want this thing to
be above flips. So, let’s work on flips first,
let’s just get it, so that flips is on the bottom
and we’re gonna do exact same thing. So, I’m gonna grab
flips and use the blue lines, okay, put it in
the center on the bottom. And then a controlled
drag to the bottom, and say that I want the bottom
space to be pinned to the safe area. So, that’s good.
Now, when I did that, look I got this yellow and
red lines and I got a warning up here.
See a warning this warning, this means there is a warning
and it can be red if you have an error. And if you click on
it it will tell you what all your warnings are kind of
a quick summary there, and here it says horizontal
position is ambiguous for your flip count label.
In fact, it is ambiguous. I never told it where
it horizontally, I pinned it to the bottom, but I didn’t say it was in
the middle, or left, or right now I dragged it there
with a blue lines, but starting with blue lines,
it doesn’t pin it there. So really what I want
with flips is, I want it to be in the center.
Okay, I want it to be in center. Just to show you
something a little different. And to do that, again, I
Control+drag from flips right here, to the thing I wanted
to be in the center of, which is this background here.
So, I’m just gonna Control+drag
to the background. And another option is center this
horizontally in the safe area. So, I’m gonna do that. Now,
it, it puts it in the middle. It’s still yellow here.
So, what does this yellow say? It says the frame for the Flip
Count Label will be different at run time. That’s, because I
have not constrained the size of this Flip Count Label. I’ve
let it be any size it wants. And since it can be
any size it wants, it’s gonna want to
be its natural size, whatever size fits it. Now, I can fix this warning
down here in this button right here. This is where
all your constraints. All this pinning things to
edges is called constraints we’re constraining these views
to be in a certain place, that we can just, um, actually
we don’t fix it there, but we’re gonna fix
that over here. So, remember, our document
outline that we had over here this little thing we hide.
If you unhide that and look in the upper right, if
there are any of these little warnings you have this little
button, if you click on it, it will tell you all
the problems. So, this one is a misplaced view,
cuz this flip is too big. For what it should be. So, again,
if you click on this little triangle, it’ll offer, hey,
you wanna fix this? And you can fix it by updating
the frames, which we want, cuz we don’t care what the
frame this is, the rectangle that encloses it. It could
be anything as long as it’s pinned to the bottom and
in the center. And we can do other things too, we’ll
talk about a couple of weeks. So, I am just gonna update
frame drive here fix missplacement.
Look at moved flips down, it made the frame around
it just barely contain it. Okay, and now they frame
around that flip zero is it’s natural size. If I run this
and do a hundred flips, so that it has to be bigger it
will naturally get bigger. Because it’s size
is not constrained. It’s not pinned to anything,
only its location. So, its size will get as big, or
small it needs to to contain its stuff. And now, we see we
have no auto layout issues. We have no warning up here,
all is well. One last thing we need to do is the relationship
between the top of the flips, and the bottom of this. Now, I
could just take this thing up here and control drag between
that and the flips, right?, that’s a good idea.
And we could, for example, constrain the vertical spacing
between the two, so I’m gonna click Vertical Spacing, there
it is. It’s this huge bar. I could go over here and
change it from 454 to 0, and use all the space here. But
that didn’t look very good. I don’t really like tall
thin buttons like that. So I’m gonna leave this
constraint in here. But I’m gonna change it from equal,
where it has to be equal, to 0 with the flips. Also I
probably don’t want 0, I want a standard value here so I’m
gonna change to standard value difference, okay, this,
this, this distance. And I don’t it to be equal, I
want it to be greater than or equal. So I just wanna make
sure that these things on the top are always above the
flips, greater than or equal. But it doesn’t have to be
right above it like that. So you don’t have to always have
these constraints be equal. They can be greater than or
equal, less than or equal kind of relative
constraints. You see all this? Now, we can run the app and
this should all work. Everything is kind of
constrained to each other. We can actually kinda take
a look at it here in interface builder. Right, remember this
button down here that showed us all these phones? We can
say, okay, what’s this thing gonna look like on an iPhone
8? Here’s iPhone 8, we click on it, and
sometimes when it does it, you can kind of zoom in and
out to get it to redraw. So this is what it’s gonna
look like on iPhone 8. We can look at, back on
iPhone X, but rotate it. So here’s what it’s gonna look
like rotated on iPhone X, that looks like that’s
gonna look okay. So we can kind of preview
a little bit what’s going on here in interface builder,
but there’s no substitute for running it. So let’s just
run it on our simulator and see if it looks like
what we expect. Right here it is,
app seems to be working. Oh, let’s go make our background
black again. So go back here, background black, keep our
Halloween theme intact. Right now here, okay, so this
thing is working we can still match things, etc.
But now when we rotate, remember Command+Arrow, look,
it re-lays out the entire UI to fit the space. And
it’s doing this, it’s relaying it out because of those
constraints we put it. We constrained this edge
to be stuck to here, we constrained this edge
to be stuck up here. We constrained this
distance to be greater than or
equal to a standard distance. We constrained the bottom of
this to be a distance down here. We constrained the x
position of this to be in the center. We put those
constraints on here, and so that when we flip this thing
around, it’s living with those constraints. Got it? So like
I said, this is just a teaser of this constraint stuff. It’s
a very powerful system for doing these constraints and
we’ll talk all about that, like I said,
in about three weeks. Okay, back to the slides.
All right, so here’s your brief
review of week 1, okay, hyperspeed review. Of course
you know about target action, outlet out to out collection,
outlet collections. The card buttons, your flip
count label. The touch card, you know about that. You
learned all about methods and properties, what their syntax
was for all of those things. Properties like flip count and
tons of methods all the ones in concentration in card and
view controller. You learned about property observing right
when the flip count changed, we have that didSet that would
cause the UI to change as well. You obviously
learned about arrays, how to put things in arrays,
how to declare an array. You’ll learned a ton about
model view controller. We went and made
the Concentration game have a model like concentration
on the card. You learned about value types
versus reference types, right? The card, which is a struct,
a value type that gets copied when you throw it around. So
when we put them in the array there, we made the copy by
just putting it in twice. And they copied it each
time you put it in there, remember that? You learned
about initializers, we had initializers both for for concentration, they each
did different things to get card and themselves an initializer.
We didn’t initializer for our UI view controller and
we probably never will. UI view controllers
initialization is messy. Okay, so we try at all possible
not to use init for our view controller. And I explained
that in your homework that’s going out today, you
can read about it. You learned about static methods like get
unique identifier, static vars like the identifier
factory that we’ve created there. You learned about lazy
properties like game, which depended on another property,
and so it couldn’t initialize. We just made it lazy so
that it wouldn’t actually initialize until
someone asked for it, which would of course be after
the thing is all initialized. You learned about for
in loops, which in Swift only work by iterating over
what’s called a sequence. And we learned that countable
range is a sequence, right? 0..

Tags: , , , , , ,

3 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *