Case Study: Constraint Layouts Part 2

Loading...

En provenance du cours de University of California, Irvine

Best Practices for iOS User Interface Design

173 notes

University of California, Irvine

Best Practices for iOS User Interface Design

173 notes

Cours 3 sur 6 dans Specialization iOS Development for Creative Entrepreneurs

You will learn to develop sophisticated user interfaces for iOS, with a focus on user interface design best practices, UI animations, and responsive design. You will learn about the key UI widgets, mapping interfaces and view restoration.

À partir de la leçon

Getting to know iOS Design Concepts

Welcome to Best Practices for iOS User Interface Design! This week, we will take a deep dive into getting to know iOS design concepts. We will cover iOS, HCI, and HIG plus complete a peer review assignment called Layout with Dynamic Constraints that, as the name suggests, uses the auto-layout engine to make dynamic user interfaces.

Intro to iOS Design10:12

iOS Design Concepts21:17

iOS UI Composition14:47

Device Adaptivity23:10

Device Adaptivity Demo31:58

Launch Screen Demo6:48

Case Study: Constraint Layouts Part 121:53

Case Study: Constraint Layouts Part 213:06

Rencontrer les enseignants

Don Patterson
Associate Professor
Informatics and Computer Science
Sam Kaufman
Partner at Gradient

[MUSIC]

All right, so now what we need to do is We need to identify a different set of

constraints that we want to use when we're not when we're at compacted height.

So, over here on our object selector, our object hierarchy,

you can see that all of these constraints are active.

They're dark blue, and what we want to do is we actually want to make them inactive

when we go to compact view.

So, let's switch first to designing and compact view, by moving our height up.

And so we're now in compact view and so

this is now lain out for when we're in landscape.

Any changes from the NE NE will be required, recorded separately, so

to do that I want to actually select this, all of this and

I want to come over here and I want to hit the plus next to the installed

tab up here when you have the property, the attribute inspector selected.

Right now there installed for everything but if I

add an additional case to the current case that we're in, any within compact tight.

That's the landscape view compact height.

You'll see that they're installed when we're in that mode too, so

when we switch to landscape they'll be installed.

And actually I want to uninstall them.

So, that's now, they're now not dark blue over here because they're not

active in the current view that's being displayed.

And to help me out here what I want to do is I want to bring up the preview.

And I want to add a preview of the iPhone.

What do we add?

We get the iPhone 4" and should add it in the landscape mode.

Great!

You can see now, because this is a compact view the pieces are laid out

in weird ways, because they don't have the active constraints.

So, I'm going to change that and let's give us a little bit more space and

I'm going to lay these things out Anew.

I know that I want my web view to be on the left side, so let's go ahead and

select the web view.

And I know I want it to be the same width.

Actually I want everything to be the same,

everything on this top page to be the same width.

So, I'm going to have the map view, the web view and

the container all be the same width even though they're going to be side by side.

We're going to have equal widths.

Okay?

And now I know I want my web view to be anchored on the left side.

So, I'm going to add constraints.

And it's also going to fill up the screen.

So I'm going to add constraints for 0 minus 20 to take off that margin in 0.

And add those three constraints and

I know I want the Map View to be in the upper right third, so

I'm going to add constraints up here that place it 0 and -20.

I'm going to add those constraints, and

I'm going to slide these guys over Little bit, slide

this one over and put it roughly in the spot where I think it's going to end up.

And then I'm going to add the constraint that these two going to

control drag these two and I'm going to set the horizontal spacing

I'm in notice over here where the horizontal spacing got added.

Because when I added that constraint, the horizontal spacing

ends up being whatever it is on the UI, but I want to go edit it.

I just needed to add that constraint in place.

So, the web view, trailing edge,

where'd it go Map View Leading Web View Trailing + 91.

So, I put a space of 91 in there.

And I want to change that to be zero.

And now I hope if I option Cmd equal this will lay out the way it should lay out.

No, it didn't lay out quite right, let's see.

Let's just walk through with the areas.

Oh, it doesn't have a height, and

it should be anchored to the bottom what do you think about that.

All right so let me give these guys a height, equal height as well.

Before I adjust that web view I'm going to make these two things Be

let's anchor these first.

going to anchor the container to the right minus 20 and to the bottom there.

I want the top to be zero.

Top to be zero see how x code corrected that?

Add those constraints and now I want to control the height of these And

we'll make the height of those initially equal, and watch over

on the left to see where the constraint shows up because I'm going to edit it.

Here, because I don't want them to be equal.

I want one to be as twice as big as the other.

That will make them fill up [INAUDIBLE] will be

up [INAUDIBLE] 0.5 ratio is upside.

Okay, good now the map view is going to take up the top-third.

The container is taking the bottom two-thirds and then I'll

deal with the sub-views in a second and I don't have my web view showing up yet.

So, I'm little concerned about why are my web view

isn't showing up in my preview pan with the proper constraint.

So, let's walk-through this.

The web view leading, which is the left side, is on the margin by -20.

That's good. The web view width

matches the map view width.

That's good. That'll make it 50%.

The web view top equals the map view bottom.

I don't want that.

That got added somehow strangely.

So, let's delete that constraint, and let's make the web view top.

Be zero from the container as it is now.

See if that helps.

Okay, web view top equals top layout guide bottom.

All right good.

Now, we're starting to see some corrections on the preview pane.

The bottom layout guide equals the container view bottom.

Okay, that's the gray box.

The map view top equals the top layout guide bottom.

Good, that's the top of the map view.

Map view leading equals web view trailing.

Okay, that's good.

That makes them right and left.

The trailing margin equals a right view trailing.

So, the right side of the map view.

Map view height is 5.5 of the container view height.

That's good.

The trailing margin equals the container view trailing.

That's the right side.

It's good, they contain the view top equals the web view bottom that I don't

want that, I want to contain or view top to be equal to the map view bottom so,

I'm going to come over here, I'm going to select you know, different object.

Okay, so I just delete that constraint tryout.

I want Container top to be equal to Map View Button.

That's already there, so that's good.

All right, so that container is already there.

Trailing margin equals to container view margin, that's the right side,

the container view width equals map view width, that's good.

And container view top equals map view.

Alright, so it looks like the web view doesn't have a bottom constraint,

that's anchoring it to the bottom.

So, let's add that, and we get zero.

Add that constraint.

Great. Now, as I look over in my preview pane,

I see that I've got the basic layout the way that I want it to be.

Now, the view controller needs to be adjusted so

that the text views break up horizontally.

I'll save my projects so I don't have any crashes and

then I'm going to adjust my view controller now.

And one thing that I learned is,

it's kind of easier before you start doing constraints.

To just kind of, I don't know.

Let's see, how do I make this a little bigger.

Should be able to, I'm not going to deal with that.

What I'm saying is it's a little bit easier to roughly place,

as you'd like to see it before you add the constraints to the tops and

bottoms is mapped to the right thing.

All right.

Slide it over and slide it over.

All right, so we want that first text view selected, select it down here.

And we want it to be anchored to the top, so we're going to make it minus 20.

minus 20, minus 20 and we're actually going to make it zero from the bottom.

That's our text view below it.

Add those constraints and for the bottom text view, we want to make that one.

All four, we want the top to be zero.

Minus 20, minus 20, and 0.

Add those four constraints and

the last thing we need to do is we need to specify that we want

these two things to have an equal height so they split out fifty-fifty.

All right, as I look over on my text view pane,

I don't see exactly what I like over there.

I'm not, here it's okay, but here it's not looking quite right.

Oh you know why?

Because I didn't invalidate The constraints in that case.

All right, so let's see.

What I didn't do is, I didn't do my little install trick here, and I went ahead and

I added all these constraints that now messed us up.

Okay, so, what I'm going to do is,

I'm going to, I guess I could just work backwards.

I can undo until I- I don't want to undo too far.

Yeah, let's try and do it.

Okay that guy looks good,

let's see if we can do one more.

No those are layouts so that's okay.

Okay so now we're in any any.

This is these are the layouts from any any, from my sub-container.

I'm selecting all the constraints, I'm coming over here, I'm adding the new case.

I'm saying I want a new case when there's any width compact height.

And in that case I want all those previous constraints turned off.

And that will enable me now to come over here and

say I would like these two things to be equal height.

I'm going to count work backwards, equal height.

All right and

then I want, actually I want the constraints on these two to be the same.

I want all four of them matched.

I want the top to be zero and.

We'll do zero to give it some margin, zero on all four sides, add those constraints.

Great, and now over on the right you can see that although we're using a bigger

screen than we want, roughly it is the right size and

so we can see over on the left in our, where our constraints are listed,

that some of them are grayed out because they're not active, and

some of them are dark blue because they are active.

So, we save it, our project, stop it it's running, and run it again.

And now we should see that when we rotate our device,

we get the new constraint layout.

So good.

For starters, build up what we had, and when I rotate it to the left

You can see, yeah, you can see it laid out correctly.

So, here is our web page on the left.

We have our map in the upper right.

We have our text view here where we can just add more text if we want.

And we'll scroll, and we can do the same thing on the bottom.

Not a great layout because you can't see, there needs to be a little bit of margins.

Then if I rotate back to the right all the text remains the same and

we get the initial layout.

So, that's great, that's basically what we want to see you do for

your peer review although we'd like you to pick a location that matters to you.

All right so we started with a single view app, we added the map kit framework,

we put the UI elements in place, we assumed portrait view as our any-any.

And then we built our appropriate constraints in our generic,

in our general overall view.

We bound our views to our codes so we could have access to map view and the web

views so that we could center our map and so that we could load our web page.

And we added code to do that.

And then in part two we rebuilt the UI with the landscape view and

in order to do that, I had to Change our size class to be compact height.

I selected the constraints and I hit the + button over on the side for

a special case during this current constraint that gave me a constraint for

any width and a compact height and on the top view,

I correctly de-selected them and then I had to go back in the bottom view and

do the same thing Before I added the landscape view constraints, and

then I tested it out to make sure it was working okay.

All right, so that's what we'd like to see you do, good luck with that, it is

kind of fun to see the layout engine work once you understand what you're doing.

You can feel like you're banging your head against the wall a little bit

if the constraints get too messy and too nuts.

So, good luck.

Thanks for your attention.

[MUSIC]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play