Loading...

Modifying the View Hiearchy in Code

Course video 13 of 18

Here we begin to really add elegance to our UI

iOS App Development Basics

Торонтский университет

Курс 2 из 4 — Разработка iOS-приложений на Swift Специализация

iOS App Development Basics, the second course in the iOS App Development with Swift specialization, expands your programming skills and applies them to authentic app development projects. The topics covered in this course include Xcode basics, Core iOS and Cocoa Touch frameworks, simple user interface creation, MVC Architecture and much more. With a focus on using Apple’s components to access sensors like camera, microphone and GPS, by the end of this course you will be able to create a basic App according to specified parameters and guidelines. Currently this course is taught using Swift 2. The team is aware of the release of Swift 3 and will be making edits to the course in time. Please be aware that at this time the instruction is entirely with Swift 2.

Просмотреть программу курса

Получаемые навыки

iOS App Development, Computer Programming, Xcode, Swift (Programming Language)

Преподаватели

Parham Aarabi
Professor

Текст видео

[MUSIC]

Okay, everyone.

In the last module, we used the Interface Builder to build this entire nifty UI

that was built using views and constraints.

And then later on moved to stack views.

In this module, we're gonna go back to the code of it and

sort of tie everything together as to how to modify the user interface and

do other cool stuff such as, like, make these buttons work a bit more and

even look at some animations and stuff like that.

So in this lecture, we are going to make the filter button do something.

And it's not actually gonna filter the image.

It's gonna bring up a secondary menu above this bar that will

appear when you press Filter, and go away when you press it again.

And so this sort of changes the dynamics of our UI.

And a stack view here doesn't make sense anymore, because you don't want,

when the secondary menu appears, sure, it could be stacked on to here.

But then whenever you do that,

this top, the size of this top view is changing all the time.

You press Filter, and it appears, and this view becomes small.

And that's not a good experience for the user.

So, instead of that, the top secondary view is actually gonna just overlay this

on top of this image, and be a little bit transparent so

the user can still see that the image is behind there.

So the first things first, we're going to remove this top level stack view and

add the constraints back because it makes more sense now since we're going to

overlay something over it.

We're just going to drag these images views on the stack view and

it's gonna all be laid out.

And that's okay.

Gonna go ahead and delete the stack view, and

I'm gonna add back our view constraints.

Put the stack there.

Put our image view, drag it back up there.

And then add back these surrounding constraints.

They're aligned edges to each other.

This guy.

And you don't have to do this to the one down there again,

cuz we already added it to the other view.

And after you have all this and just select all your views and

press Update Frames.

And it should look the same again, let's double check by running.

You always want to double check by running as much as you can.

And yes, so our view looks okay.

Let's put a filter.

Actually crashes the image right now, because we have this one method

that was connected to all these buttons, which we're gonna fix by right

clicking on these buttons and deleting the actions that they perform.

One by one.

Since we copied and pasted this button, it maintains its action.

All right.

So how are we going to add this secondary menu?

We could go ahead and just add it here, but Xcode actually gives us

a way in Xcode 7 to add views that are not part of this hierarchy in the beginning.

And we can take advantage of that here by adding this view up here into this bar.

Not there.

Pick it back up.

Pick it back up and put it up here.

Yes. You want it to go straight into this bar,

and as you can see over up here, above the scene.

And even though it's above the scene, it's still in the scene, technically,

just not inside the view controller.

As you can see, it's right here.

But that's okay, and its size doesn't really matter anymore,

cuz once we put it in, we'll have to use Auto Layout to constrain

its edges once it's added to the view hierarchy.

But at this point, we can just constrain whatever's inside the view,

which will be another UI stack view, a horizontal one,

because we're going to add maybe five buttons for five different filters here.

We're gonna constrain the edges, like we always do.

And we're going to set it to fill equally as well,

as we'll have five buttons that fill equally.

So again, take the frames so it's all nice.

And we're gonna throw in a few buttons.

Each one of these is going to be a filter.

We'll do five for now.

And we're going to give them some fancy names.

You need come up with your own, but since I'm very creative,

it's gonna be red, green, blue, yellow, and purple.

Extremely fancy.

Cool. So that's all we need now,

because this stack view is constrained to this view.

So if this view, once we add it to our view hierarchy,

if it expands to fill the width, then the stack view will also be constrained to

take up the full width of whatever this view is.

All right, let's check out ViewController.swift again,

we haven't looked here in a while.

And we're actually, we removed sort of the image toggle button.

So we're just going to delete that code.

And in viewDidLoad, we had all this filtering code.

We're gonna delete that as well, cuz we're not doing that anymore for now.

And all we are left with is a connection to our image view, which we will keep.

Now we're gonna make a few more.

If you hold Alt and click on the storyboard,

you can bring up the secondary menu.

And you could add outlets for every singe one of your views right now.

But we're only going to do the ones we need, which happens to be this view here.

If it disappears, don't worry.

You can click on this guy and it will come back up.

And remember to hold Ctrl and drag.

We're gonna do it from here.

And we'll call this our secondaryMenu.

And give it some space.

Other than secondaryMenu we also need our Filter button.

And we need the bottom menu as well, because we're constraining

the secondary menu to be right above the bottom menu, so we'll need a reference.

See the bottom menu?

And that should be it for things we need.

Remember that the ViewController has like the view,

the sort of top view is the ViewController's view.

Every ViewController owns one of these ,and it's

just the one that contains everything.

And we can access that directly using View.

So we won't need an outlet for that one.

Lastly, we'll need an action to take action when the Filter button is tapped.

And again, we will Ctrl and drag that down here,

we're gonna go right to the bottom of this file.

Change this to an action and

call it onFilter, on the filter button.

Cool.

So we're going to close this side panel by doing that.

And so what we're going to do when the Filter button

is pressed is add the secondary menu into our view.

And remember, in code,

you can modify the UI all you want in the UIKit methods to do all of that.

Anything you can do in the storyboard you can do in the code.

But storyboard makes a lot of things a lot easier.

And so to get started here we're going to add

the secondary menu as a subview to view.

And that will add it into the hierarchy.

So it would basically take that view we have up here and

plop it down into our view.

And we're just gonna run that directly.

Notice, we haven't really told it where we want it or how we want it.

We're gonna run it anyways and see what happens.

So if it succeeds, that'll bring up the simulator, and press Filter, and yeah,

that's our view.

It's up there in the corner, not where we want it, not how we want it to look.

But it's definitely there.

And that's pretty nice.

So to put it where we want it, we're going to use Auto Layout constraints.

And if we were in the storyboard, let's just look at it here,

at this size, how would we, just think about how we would constrain it.

We would constrain this bottom edge to the top edge of our bottom view and

the sides to the view, and probably give it a height of let's say, 44,

which is the recommended size of a button.

Again, and so we're gonna do it in code this time.

And luckily, in iOS 9 and Xcode 7, we have a new way to create

constraints that's much more convenient than before using anchors.

Anchors are pretty much what you see in the storyboard,

like when you drag, when you select your storyboard, then you see this.

You see that the little blue connection, which is the constraint that constrains,

say, this image view to the bottom view.

It's sort of like anchoring the top of this view to the bottom of this view.

And iOS9 now lets us express that very well like this.

We're gonna create, define a bottom constraint for our secondary menu.

And you simply find the bottom anchor of our secondary menu.

And there's a method on that called constraint equal to another anchor.

And that's gonna be our bottom menu's top anchor.

And then there you've got a constraint that does exactly what we just said, but

it's actually not attached or activated yet.

You've created an object that represents a constraint that would constrain the bottom

of the secondary menu to the top of our bottom menu, but

it's not added into the layout hierarchy yet.

Kind of like you need to add subview to view, you need to add a constraint.

We're gonna do that in a bit.

We're gonna create the rest of the constraints.

And you need a left one, and we'll take the left anchor and then we're gonna

make it equal to, instead of the bottom menu, the view's left anchor.

Technically, it would work, the bottom menu's left anchor would work too,

because that's constrained to the view.

We're gonna make it more explicit,

as we want it to be more clear to everyone reading this.

And the right anchor is the same.

view.rightAnchor.

Cool.

Lastly, we need to constrain the height.

Well, we don't know how high and tall it's going to be.

So the heightConstraint, there's also a height anchor,

which doesn't make too much sense at the beginning, but once you see this

constraintEqualToConstant method it'll make sense again.

We're gonna make it 44.

And now we have all our constraints necessary to lay out this view.

Finally, to activate it, like I said before,

there's a NSLayoutConstraint method called activateConstraints.

Very convenient, takes an array of constraints, and if you remember in Swift,

you can define an array by just using these square brackets and passing in and

creating your array left constraint, right constraint, and height constraint.

All right, we're very, very close.

Now that these constraints are activated,

we need to tell our ViewController that we want it to re-layout its view.

And this is very important,

because the ViewController doesn't know when it should do that.

And the best way is for you is to tell it, or else it can't really assume anything.

It doesn't know when you're done changing a constraint or

when you want it to lay out.

So like you do to lay it out.

And it's called layoutIfNeeded on the view.

And so if we run it then, let's see what happens.

Tada!

We get something that is totally not what we want.

And that's okay, because Auto Layout is tricky,

and now we have, it gives us a warning, which is very convenient.

And the thing is, it has an auto resizing mask layout constraint

that's conflicting with our height constraint.

So this guy is saying that the height should be 128,

while we say it should be 44.

That's weird.

There's nowhere where we told it to be 144, except I guess here,

which is the height of this view itself.

And I guess it's 128, which is what it said.

And the interesting thing about this is, this is sort of a legacy thing where

before Auto Layout was introduced, which was in I believe iOS 5 or 6,

we used auto resizing constraints, and everything was more of a mess.

And so when you don't have Auto Layout constraints,

as you can see, the view can still lay out itself, but not as well.

And for any views that you don't want to have them do that,

you need to explicitly say, disable

translateAutoResizingMasksIntoConstraints, into false.

And this is very sort of arbitrary right now.

Try to remember that if you have something funny going on with this,

this might fix it.

And as you can see here, it does fix it.

So if we run that again since we don't hide the button yet, and we press Filter,

it adds it down here.

And again, just by setting this it just tells the system that we're gonna control

the constraints, we don't want you to do anything for us, and so don't try.

[LAUGH] And what it was doing before was trying to help us by constraining it to

what we set in the storyboard, which is really not what we want.

Okay, so before we end this, we're gonna do a few more things.

This is not what we wanted, we want it to be a little transparent, remember?

How we're going to do that is set the background color of our secondary menu.

And we're gonna go to access properties backgroundColor [INAUDIBLE].

We're gonna set it to a white color,

but with a alpha component of 0.5.

So that makes it exactly half transparent.

And when you run that, press Filter.

Ooh, pretty nice, pretty nice, getting somewhere.

And finally we want to dismiss it when we press it again.

So all of this is to add the view.

And we're gonna create a new function for that to make our code look a bit nicer.

So we're gonna call it showSecondaryMenu.

And I'm going to just copy all this code down here.

And now that we're cleaning up, this sort of setting the background

color of the secondary menu should be done in viewDidLoad, which will be called once.

So we don't have to set it every time, right?

And same, actually, for this translatesAutoresizingMask part,

put that up there.

Now our code's looking a bit more neat.

Let's fix up the spacing a bit.

And here we're going to check if the sender,

which we know is a button, so we can change this type to a button.

If sender dot is selected,

if it's already selected, it should be shown.

So we want to hide it, which we don't have that a method yet.

Else we're gonna showSecondaryMenu and then select the sender.

And so for height, height is much easier cuz when you're removing a view,

I'm going to create a new function called hideSecondaryMenu,

when you're removing a view, you simply have to remove it from its superview.

You don't have to worry about constraints cuz it's leaving.

And actually, when you remove it, all your constraints get lost.

Okay, just, they're just removed.

So we're just gonna call hideSecondaryMenu and

set the selected to false since it's not there anymore.

Let's run that.

And when you press on Filter, there it is, and [LAUGH] it gets selected.

And there's a little bug there we're gonna have to fix.

And if you press it again, everything disappears,

because we [LAUGH] removed our view from the superview and not our secondary menu.

So let's try that again.

Boop, boop, boop, boop, boop.

Not bad.

Let's go fix that one last thing,

which is a problem with all these buttons that we copied and pasted.

So we've gotta be careful about copy and pasting.

As you remember, we had a selected state for this button.

And we can change that here.

And it changes its text to Show Before Image.

So you can just remove that.

It should stop changing our text when the button is selected.

And so let's take a final look at our really sweet Filter menu.

All right, that's it for this lecture.

О Coursera

На онлайн-курсах, специализациях и дипломных программах у вас будут первоклассные преподаватели из лучших университетов и учебных заведений мира.

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2019 Все права защищены.

Загрузить из App Store

Загрузить в Google Play