Hello, I'm going to put all the auto layout shortcuts in one video... kind of smeared them across all the videos so far, put them all in one place... so you can come back to them later on, bookmark this video, if you want to. To make an auto layout, easy, select them all, 'Shift A'... it's an auto layout, need to break up an auto layout, it's kind of the same... it's 'Shift A', plus 'Option' on a Mac, 'Alt' on a PC...
hit all those and it goes backwards, it's just a frame, not an auto layout. To add things to an auto frame you can click once, double click... click the item that's in the auto frame, copy and paste it... people like to hit the Command D, or Ctrl D for duplication, doesn't matter... you can add by dragging, where did that star come from? I just made it...
watch this, I click, hold, drag, and it just appears in my lovely auto layout... that doesn't work if you're trying to drag into the instance, undo... this does not want to go in here, it needs to go into the main one... even if you want it in here, but off over here... remember, you can't really delete it, just turns the eyeball off. So the main one rules everything...
even if you put more than you need... so that you can go, all right, I need you on, I need you off... let's turn the star back on, on this one... you might have to squeeze a bit too much into your component... to make it work for you. The thing that won't go inside our auto layout is this, it's a main component...
it's the main component for my Ticket icon... I can't put them in, look, just won't go... if it's an instance of it, look at this, it'll go in there fine... why is that? Not because it's an auto layout... is because this is actually a main component itself...
you can't put main components inside of other components, don't like it... you can put main components inside of this... which is just an auto layout, not a component... he'll go in there, happy, that makes sense? Can't put main components inside each other, there you go... let's do a little bit of shorthand for the padding...
so I've got my component instance selected... I've got a whole bunch of padding going on... I'm going to hit '0', 'Tab', '0', 'Tab', 'Tab', '0', 'Tab' to get rid of it all... click off, click back on... and I've just got these two options here which you're normally faced with... you can say, actually, I want it to be, I don't know, 48...
and it'll do both sides, I can 'Tab' across and then I can say... top and bottom, separated by a comma... so I can say, actually, I want it to be 64 at the top... and then a comma, and be 8 at the bottom... and hit 'Enter' on my keyboard it assumes top, comma, bottom... there we go, your fancy coder, look at that, using commas.
You can copy and paste parts of an auto layout, not all of it... so with this selected I want to put it on this other instance... I can use the shortcut that we've used before, when we copied the frame... remember, it's 'Command Option C' to copy, 'Ctrl Alt C', to copy on a PC... those same two keys, but 'V', but look at that... he's down there somewhere, there it is, and it pasted my padding...
and in this case I've got an absolute fixed height on this... so it's kind of not working. So I'm going to say, you, my friend, aren't a fixed height... you can hug the contents, please, they look the same... and last one, we've already done... you can click on this and use your arrows, left and right, to move it around.
All right, those are our auto layout shortcuts so far... they'll be in your shortcut sheet that you can download... and we'll keep practicing them throughout the course, next video.