HoBshare pt II UI and Class Setup Part 5

Loading...

Del curso dictado por University of California, Irvine

Toward the Future of iOS Development with Swift

74 calificaciones

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

University of California, Irvine

Toward the Future of iOS Development with Swift

74 calificaciones

Curso 5 de 6 en SpecializationiOS Development for Creative Entrepreneurs

An introduction to the Swift programming language. This will prepare you for more extensive iOS app development and build a foundation for advanced iOS development topics. Upon completing this course, you will be able to: 1. Associate the relationship of Swift and Objective-C and their use in iOS and Mac (OS X) programming 2. Develop the ability to read and write Swift code 3. Distinguish how both programming languages can be used together in applications 4. Demonstrate how to write applications entirely in Swift with the help from several iOS programming samples 5. Determine how Swift can be used for development on new platforms such as Apple Watch and Apple TV 6. Create a working client-server iPhone application with location services that you can add to your portfolio.

De la lección

iPhone Applications and More

In this last week of the course, you will follow along and create a more full-fledged application called HoBshare. This is a more complex application that is intended to help you use many of the different techniques and language features introduced in the previous weeks and see how they can be used as tools to develop an application. We will also explore some of the new and exciting consumer technologies that developers can now work with using Swift.

HoBshare pt II UI and Class Setup Part 14:16

HoBshare pt II UI and Class Setup Part 26:45

HoBshare pt II UI and Class Setup Part 39:10

HoBshare pt II UI and Class Setup Part 47:09

HoBshare pt II UI and Class Setup Part 510:42

HoBshare pt II UI and Class Setup Part 69:41

HoBshare pt II UI and Class Setup Part 75:37

HoBshare pt II UI and Class Setup Part 810:54

Conoce a los instructores

Justin-Nicholas Toyama
UCI Extension Instructor
Lead iOS Developer at Smilefish Corporation
Frank Ayars
UCI Extension Instructor
CTO and Director of Software Development at Smilefish Corporation
Ralf Brockhaus
UCI Extension Instructor
Founder and CEO at Smilefish Corporation

[MUSIC]

All right let's go an edit and fill out the edit

hobbies view controller now just its UI So

we're going to put in a couple of collection

views which you can search for.

And make sure that you pick collection view and not collection view controller.

And we'll put one end here up at the top, and

this one needs to be kind of big.

And we'll use the dotted blue lines again to help us line everything up.

Make sure it touches the dotted blue line on the left and the right and

the one at the top as well.

Okay, so that's probably big enough.

It should take up about maybe 2/3 of our screen, give or take a little bit.

Now we need another separator line,

so I'm go and copy it from my view controller that I have over here.

So that's this one, and I'll say Cmd+C to copy it,

and I'll come over and select this view controller, and Cmd+V to paste it in.

And drag it into a nice place right below the collection view and

use the selected position when that horizontal dotted line appears.

Okay, next we need this my hobbies and

this collection view again, so I'm going to also Cmd+C those to copy them.

And then come over here in command view to paste them in and reline them up.

And then on this view we want our collection view told you a little bit

further down so let's line it up with that bottom dotted line.

And I'm going to hold down the alt button and

coy my hobbies label and put in that second instructions label.

So I'm going to double-click into here and say, tap a hobby to delete.

All right, so I hit Enter to set that and

then I'm going to re-line it up with the center.

And we should be doing pretty well there.

Okay, we also need to put in a prompt and a label and

our navigation bar on this view controller.

So again, I'm going to tap into the navigational

item and the title I will say choose up to three

hobbies and for the prompt, I will say

scroll up and down top to add.

Okay, and then again we run into that same issue where

our navigation bar gets a little taller.

So we're going to come over, drag the collection views handle so that we

can make the size a little bit smaller and line it up with that top dotted blue line.

So that it doesn't get covered up by the navigation bar on the top.

Okay.

So now, I think we have all of our UI on the screen here.

Yes, this is looking pretty good.

We're going to want to do our same little trick again,

which is to use the triangle button down here in the bottom right corner and

say for everything,

all views on the view controller we set to suggested constraints.

And then, we'll want to make sure that our separator line stays two points tall.

So I'll hit this pin button, in the bottom right corner.

And click the width height check mark, and it will add one constraint.

And we should be doing pretty well.

So let's run the application and see what it looks like.

And we should see when we click the edit button, since we put this segue here,

it should take us to the EditHobbiesViewController.

All right, so it does our collection view up here at the top is there.

Our separator line is good and it's a skinny two point tall line.

That's good.

My hobbies, tap bottom to delete and our second collection view down here.

It's a little bit too far spaced out though between all of these, so

let's see if we can fix that up.

Okay so we have the collection view has bottommost space

to view which is this line this great dark green line.

And if you select the dark green line it has bottom space to My hobbies.

If we select My hobbies it has bottom space to Tap a hobby to delete.

If we tap that it has bottom space to collection view.

And if we tap on the collection view it has bottom space to Bottom

layout guide.

All right, so let's take a look at the top space to the top layout guide.

That looks good.

That we don't want to take to be equal to 297.

So, if you see this height equals 297, we should delete that.

And then it's glued to to of the page and

glued to the top of that gray separator line.

So then if we, removes the constraints on its height,

it should be able to scratch and fill up the rest of the screen.

So, let's run it again and see what it looks like.

Okay, there, so now our top collection view takes up most of the screen and

this line.

And these two labels here on the collection view look spaced out,

how we expect them to be based off of our storyboard.

All right, and I have a little typo on top here.

Excuse me.

So tap on the navigation item over here.

And go to the attributes tab and check issues.

Guess we have is okay, good.

So we know if we're in the top collection view then we can tap a hobby to add it.

We know we can, we've,

I told you in the demo that we can only have up to three hobbies.

So if we tap a hobby down here from the bottom collection view of my hobbies

then you know that will be deleting it so we have space to add another hobby.

All right, so we have two out of our three views looking pretty good.

Let's go and now work on the neighbor's view controller which has our map on it.

So again we're going to have our separator line,

and the My hobbies prompt, and the collection view down here.

So I'll select those from one of the view controllers that I enabled already.

And Cmd + C to copy them.

And then, I'll come over here to this item 2 view controller it says right now.

And Cmd+V to paste them in there, and then I'll drag them into place,

lining them up with the dotted blue lines, like you see here.

All right, now I need to add a map view.

That takes up pretty much the same amount of space that the top collection view

in this other view controller take up.

So, I will search for a map view down here, map view.

And I get a map kit view and

they want to again line us up with these dotted blue guidelines.

And make sure you line them up on all four sides with the dotted blue guidelines, so

that stays good amount of space away from the top, left and right.

And a good amount of space away from this separator line, and

so now we're ready to do our trick again.

We come down and hit the triangle button, and

we say for all views in view controller we set to suggested constraints.

We're going to click on this gray separator line, pin its height.

Let's make sure it stays always only two points tall at one constraint.

And then let's run it and see how it looks.

So again you can run by hitting the play button, or command r on your keyboard.

So here's item one.

I hit edit.

We go into the edit hobbies decontroller, so that's good.

And you notice I get this back button for feedback to the [INAUDIBLE] controller.

And if I hit item 2, then we get our view with our map.

It looks like there's a little too much space again here, so

we should know how to fix that.

If I go click on my map and look at the size inspector again,

it's trying to constrain its height so that it never changes.

We'll just click on the height equals constraint and delete it.

And we see here that it's glue to the bottom of the view called view,

which we know is our separator line, and its glued to the top of the page.

So we should expect that it looks good now if we run the program.

All right, we click on item two and

now the map takes up the screen like how we'd expect based off our storyboard.

All right, great.

So we have the main Staples of our UI, for

all three of our views and our whole application then.

There is just a couple more things that we have to do.

We have a little header that we can put in here to let us know

that all of the hobbies are in the technology category for

now, but we'll get to that in a little bit later.

[MUSIC]

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2019 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play