Name: Creating an iOS UI with Auto Layout - iDev Journey #14
Uploaded: 2020-03-28T16:41:32.000Z
Duration: 10 min 52 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

His first night Look, I don't journey Episode 14 right?

The imperative

Take you along with me on my Iowa's development journey.

Why learn Iose development, develop my first app and turned that app into a business?

But first I have a few announcements regarding the channel.

I, of course, do the idea of Journey Siri's, but I want to implement to Maur Siri's The first I started last week is called My Tech Set Up where I went over my text set up in what I use it for.

I went over some specs and whatnot, but I asked y'all to submit your tech setups to me.

I mean, it could be your camera and your PC and your laptop and your you know your peripherals or what not and what you do with it.

So for meals, iose development and creating content a little bit of gaining on this back behind me, and I want to know what you do or you three d artist.

I have a whole video link down below where it goes over all the rules for submissions and kind of what I'm looking for from you guys and the second, Siri's or the third.

Siri's behind Idol Journey in my text set up would be raped.

My app where you guys submit your abs to me and I review it rained it.

Based on, I think I have five categories, 50 points total.

That kind of rated the first experience so kind of.

Once I open the app, I'm like, Okay, I like this or I don't really understand what I'm supposed to do.

You know, you want to make sure the first experience is a good one.

I go over user interface and functionality and things like that.

And, of course, take my opinion with a grain of salt, just like you would your parents or brother, because if you create that, you want to get opinions from all sorts of different people and you want to get it from your mom, for example, and see how she likes it or your little brother.

See how he likes and you get it for me, someone who is also in Ohio's developer as well as a user, and you just get feedback from me and I will allow you guys learn allow me to learn kind of what I like in a nap.

What I should implement in my future app and whatnot.

And I think I'll just be a good learning experience for everybody as well as exposure for y'all, for your text set up and for your app.

And of course, I would want you guys to include any type of social media out that you have.

So you guys get exposure because is I grow this channel.

If you submit your after your text set up, your video will get more and more views, and then you will get more and more traffic to your website or whatever it may be.

And also aside from those three Siri's I just recently for Christmas got I got a new mouse.

It covers the whole desk, basically, and I got I got a few different things that I wantto use in the review for you guys, so you know if it's good or not, so stay tuned for those.

Those should start within the next month.

I want to get the rate my app out within the next few weeks, we'll see how everything plays out.

But without further ado, let's get on to the idea journey.

Four section for 49 in a Section four lecture 59.

So, basically what what we want to do with auto layout is say, you have an iPhone for you know, it's a very small screen.

You're apt to be able to scale from iPhone four to an iPhone seven screen or seven plus screening that all the way up to an iPad in portrait and landscape.

So, for example, of course, this is portrait, and then this will be landscape you want.

You're apt to be able to adjust to those you want it to fit well, instead of looked off discombobulated, cause I'm sure you've been on some type of websites orbit on the nap.

That really isn't optimized for your device, and it's a poor user experience, so that's basically what this auto layout's going for.

So here in Section four, lecture 59 exercise auto out like we just discussed, we want the screen to look the same on each device.

As you can see, we want to build a layout that looks like these images on the various screen sizes.

IPhone, four inch iPhone, 5.5 inch landscape, an iPad portrait, as you can see, all of whom are very similar.

You could tell us the same app, but we wanted to adapt to the screen.

You know, we want we don't want a little box like, say this right here.

Uh, well, we don't want this little iPhone four inch to be in the middle of an iPad.

What you'll see on your screen is me creating this app about three times the speed.

So if you were to follow along, just lowered the settings on YouTube.

I mean, keep the quality, but lowered the speed.

I mean, so lower 2.5 or something around there.

Whatever suits you if you want to build it with me starting off, we just make a simple single view application and X code I named exercise Auto layout.

We're only gonna be messing with the main dot storyboard.

We want all of the data that's used in the U I to be in the main dot storyboard at least as much as we can.

So we start off by creating the top box we want.

And what I did was just make the color similar to what they were in these samples we want to duplicate.

So we have the seams, excise boxes at the bottom and of course, we have to set our constraints.

So we wantto attach these, you know, said the constraints zero to the edge and also said a high constraint on the box atop the bottom left.

You want the left in the bottom constraint on and within height, since it's the square and it doesn't need to stretch And of course, the bottom right.

We attach that to the right in the bottom, And what I did was control all equals, and that basically adapted the constraints.

Since it was very skinny on the iPad, I figured I would make it a little bit little bit taller, and what you just saw is I added in a introduced of variation.

And since that seemed a little bit too easy, I want to add in labels.

So when I pad, I want to say iPad in on the iPhones I wanted to say I fell.

And of course, we want to add new constraints.

Well, at least inside the blue box, that is So right now we made a say iPad and we're gonna start off with success.

Plus, we're going to do is introduce a variation in basically uninstalled.

So there's a check box next installed were gone unchecked.

And we create a new label for with regular height compact and we make it say iPhone and that'll go across some of the other screens as well.

But for the others, we want to disable iPad, keep iPhone and make sure it's center inside the blue box at the top for all platforms.

And of course, we have to go back and disable the iPhone label on the iPads because we don't want overlap.

The iPhone S C, of course, is different from the others.

Therefore, we had thio independently disable iPad, and now we went to the very traits, and we're going to make sure everything looks proper.

So we start with I found no on the iPad and as we could see it, says iPad on the iPad, says iPhone on the iPhones in the center of the top box.

I was going to run on the simulator, but it was a bit too slow the time.

And I figured with this new you know, storyboard and the options that we're able to use with it, it's not that big of a deal.

And that's the auto lay on exercise, plus some a little bit that we added an iPad it for the iPad in the iPhone label for the iPhone and whatnot.

And like I said before, be sure if you want to follow along and you really see step by step process slowed down the video.

Don't tell this to my voice because it'll be slowed down and kind of annoying.

So just put it on you and just watch what I do and follow along with that.

If you want to see the really exact details, because this video, the one that you just saw on the screen wasn't cut at all it was just sped up 33 x So everything's there from start to finish.

I'm not exactly sure if that's that's exactly the right way to do it.

You know, make the different labels or if you even supposed to do that.

But I figured, you know, why not play around with it?

And then as we play around with it, more and more will find better ways to do, you know, processes like that.

And don't forget, if you have a cool text set up or an act that you won't meet a rate, go to the corresponding video, which would be the first episode off either Siri's and followed the rules listed in the video and then the description.

And I'll be sure to make a video regarding your set up our app and for Idol journey next week.

So, as promised, I did the auto layoff video, which is this one.