Click on the horizontal spacing constraint we just made, and in the inspector change the constant to 10 and press tab. Shift select Horizontal spacing and equal widths, then press return. That’s because we still didn’t set its width, which we’ll do as an equal width to the buttons, and have a space between them of 10 points.Ĭontrol drag from the pepperoni button to the text view. Note on the preview that the text view has disappeared. We get several layout error, but we can see in the preview that they are now the right width. Remember pepperoni has an explicit width of 64, so that will make both 64 points high. Control drag from Cheese to Pepperoni and shift-select equal widths and equal heights. Update the frames to the new constraints.Īs you can see in the preview window, the buttons are now too small. Select pin and pin the cheese to the pepperoni 10 points away and the left margin 0 points away. Clear the constraints on the Cheese button. Xcode adds both constraints.Īs the warning indicates, we still have one more constraint to go, but we will get to that in a minute. Shift click the Bottom space to container margin and T railing space to container margin, then press return. Xcode give us both trailing and bottom constraints. Control-drag from the text view to the bottom right corner. We can do both at once with a diagonal drag. We also want a relationship with the right margin. Since we will be moving the done button, we want a relationship with the bottom of the container, not the button. Control drag from the text view to the label and release. We want to have a relationship to the pizza label, not the cheese button, so we can’t use the pin menu. Drag the left handle so the view is less wide than the cheese button. Select clear constraints in the constraints resolver. Select the text view in the document outline. To start let’s move the text view to the new location. if you have the file browser open, you may want to close it to give yourself more room. Set up Xcode with the preview mode to have the phones in landscape so we can check them as we go through the steps. Move the square to any width, compact height for a iPhone in landscape. In the storyboard, click the width:any height:any button on the bottom of the storyboard. For the iPad and iPhone 6, we’ll move all three buttons to the top of the screen in our next video. In our application, we will change the location of the three buttons from above and below the text file to left side of the text field for the compact iPhones in landscape, and leave them the way they are in portrait. The width in landscape is regular for an iPhone 6+. IPhones and the iPod touch are the compact size in both landscape and portrait, with one exception.įor both width and height, iPad is the regular size. Our current layout, as we can see on the bottom the story board is width:any height:any. Any is the generic size that works with anything. There are three sizes for size classes: compact, any, and regular. This allows you to set the size class you want to work with. If you click the width and height size class you will get a popup with a bunch of squares on it. Size classes let us customize certain devices or orientations for a different layout than this generic layout. It also works the same for each device in both landscape and portrait. In the last project we made a universal app like this: We’ll start with the completed project from the last video, so you might want to check that out first: In this video we are going to learn some more about Auto Layout and how to use Xcode’s new size classes feature. Make a different layout for iPhone in portrait with Size Classes.Using the layout error panel for misplaced layouts.Last week we looked at the basics of auto layout, this week, we learn
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |