Swift Adaptive layouts (Adaptive layout) tutorial (i)

The universal Stroyboard file is the first step toward a bright avenue for adaptive layout. Adapting the ipad and iphone layouts in a storyboard file is no longer a dream in iOS8. Instead of creating different storyboard files for different sizes of Apple mobile devices, we don't have to synchronize the contents of several storyboard files. This is really a wonderful thing.

We open Xcode and create a new project:

Select Ios\application\single View application to create a single view app:

Set project name Adaptiveweather, language Select Swift, device select Universal:

Once the project is created, we can see that there is only one storyboard file in the project directory structure:

The Main.storyboard file is a generic storyboard file that can be adapted to the Apple mobile device of all current screen sizes. Open the file and the students will see a view Controller, and an interface size that we're not familiar with:

Students do not be surprised, yes, you see is a simple, a bit big square! As we all know, in the previous version of Xcode, the screen size in storyboard corresponds to the size of the target device we selected, but this does not allow us to achieve the ambitious goal of "using a storyboard to get everything done". So in IOS8, Apple has abstracted the size of the screen in storyboard, which means that the square we see is an abstract screen size.

Let's go down, select the Main.storyboard file, then choose File Inspector tab in the right-hand toolbar and tick the use Size classes option:

In the new IOS8 project, this option is checked by default. But when you use the old version of the project to create a new storyboard file, you need to manually tick.

Set up your storyboard file

First, we open the Main.storyboard file, select the image view from the component library (Object library) and drag it to the view controller. Select the image View that you just dragged in, select the Size Inspector tab in the right-hand toolbar, set the X coordinate to 150,y coordinates of 20, the width to 300, and the height to 265.

Then drag into a view component and set the X coordinate to 150,y coordinates of 315, width to 300, and height to 265.

Select the view you just dragged into, select the Identity Inspector tab in the right-hand toolbar, and enter TextContainer in the Label property input box in the document panel. The function of this property is to give the view a name that is convenient for us to identify. Note here that the document panel may be hidden and we need to click the Show button behind it to display it. The view we dragged into is finally the container that shows the city and the temperature label.

After completing the above settings, the students may find that the view you just dragged is not visible because the background color and the background color of the view controller are the same, all white, so we are not easy to discern. To solve this problem, select View Controller's view and select the Attribute Inspector tab in the right-hand toolbar to set the background color to red: 74, Green: 171, Blue: 247. Then choose TextContainer, which is the view we dragged into, set the background color to red: 55, Green: 128, Blue: 186. In this case the Main.storyboard file should be the scene:

So far, we have added two components to the view controller, image view and view, which is the only two components, and then we'll add some layout constraints to them.

Add a layout constraint

Select Image View, click the Align button in the bottom Auto Layout toolbar, tick the horizontal Center in Container option, set the value below to 0, and click the Add 1 Constraint button to add the first constraint.

This constraint means that the image view remains centered in its container (View controller's view).

Then click the Pin button in the Auto Layout toolbar at the bottom to add a constraint to the top of the image view and the top of the container, which we set to 0:

The above two constraints cause the image view to be centered in the container, and the top of it has a fixed spacing from the top of the container. Now we need to add the constraint between the image view and the text container view. Students first select Image view, then hold down the CTRL key and left mouse button to move the mouse from image view to text container view:

Releasing the left mouse button will bring up a constraint menu, we choose vertical Spacing:

This constraint determines the distance between the bottom of the image view and the top of the text container view.

Now select the image view and then click on the Size Inspector tab in the toolbar on the right, and the students will find that there are different versions of Xcode in Xcode6 and before:

You'll see the three layout constraints you added earlier, and you can easily modify these layout constraints in size inspector. For example, clicking on the Edit button after bottom Space to:textcontainer constraint will bring up the constraint attribute edit box, we let constant value equals 20:

Then click anywhere outside the pop-up box to close the popup box.

You've already adjusted the TextContainer view top to the bottom of the image view by 20, and we need to add a textcontainer to the other three sides of the view.

Continue to select TextContainer View, click the Pin button at the bottom to pop up the ADD New constraints window, set the left, right, and bottom constraints in the Spacing to nearest neighbor panel, set the value to 0, then click ADD 3 Constraints button to add a constraint. It is important to note that the constrain to margins option is removed when you set the constraint, which avoids the TextContainer view margin:

These three constraints allow the left, right, and bottom three sides of the TextContainer view to be spaced 0 from the left, right, and bottom of the container.

Now the Main.storyboard should be the scene:

At this point the students should notice that there are several orange binding lines on the view, which means there are some constraints that need our attention. At run time, however, storyboard automatically updates the view size to meet its constraints with the container. We can also click on the bottom Resolve Auto Layout issues button, in the pop-up box, select the "All" in View controller/update Frames to fix the constraint problem, but if we do, then image VI The size of EW will be compressed to 0, which means you will not see the image view.

This is because our image view has no content, but it has a default height and width, and the value is 0. For automatic layout, if the constrained view has no actual height and width, the constraint is met by the default height and width.

We go on to learn, open the images.xcassets in the project structure, then click the + sign in the lower left corner and select New Image Set in the pop-up menu:

Double-click the Image title in the upper-left corner to change it to cloud:

The image set we just created is actually a collection of several image files, each of which corresponds to a specific application scenario, which is for Apple mobile devices with different resolutions. For example, a collection of images may contain images of three resolutions for non-retina, retina, and Retina HD. Since the library in Xcode is perfectly integrated with uikit, we only need to write the name of the picture when we introduce the picture in the code, and the program will automatically select the corresponding resolution image according to the device that is currently running.

Note: If you have previously used a library to manage your pictures, you may find that they are different in Xcode6. That's what 3x picture is about?

This new shard rate is designed for the iphone 6 Plus. This means that each point is made up of 3 pixel points, which means that the 3x picture is 9 times times more than the 1x picture pixels.

Currently your picture collection is still empty, students can download the desired picture cloud_images.zip here, and then drag the picture into the image collection named Cloud just created, drag the cloud_small.png picture to the 1x picture area:

Because the background color of our pictures is transparent, we see white pictures in the picture collection. You can select a picture and then press the SPACEBAR to preview the picture. For example, select the 1x image and press the space:

Now drag the [email protected] image to the 2x image area and drag the [email protected] image to the 3x image area. As before, we see only the white picture, but we can preview the picture in the picture collection by the space bar.

Now you can set the picture in the image view. We go back to Main.storyboard, select Image View, select Attribute Inspector tab in the right-hand toolbar, set the Image property in the Image view panel to cloud, and then the Mod in the View panel The E property is set to Aspect Fit:

Now your main.storyboard should be the scene:

We've seen the orange binding hints in storyboard, and it's time for us to fix them. First select View Controller's view:

Then click on the Resolve Auto Layout issues button at the bottom to select the Update Frames in the View Controller panel of the pop-up menu:

At this point, Storyboard automatically recalculates the view size to satisfy the constraint based on the constraint:

Previewing assistant Editor (preview Assistant editor)

In general, at this time we should be on the ipad, iphone4s, IPhone5S, IPhone6, IPhone6 plus these several different sizes of devices compiled to run the program, To test whether the universal storyboard can be adapted correctly on devices of different sizes. But this is really a manual work, over and over again to change the equipment, compiling, running, how hard to force. But God always favors us. The hard-pressed programmer, XCODE6 provides the preview Assistant Editor, in an interface to show the different size of the device program operation, whether there is a problem at a glance.

We open Main.storyboard and then select View\assistant editor\show Assistant Editor, where the editing area is divided into two parts. Click Automatic in the top navigation bar, select Preview in the pop-up menu, and then select Main.storyboard (preview):

A 4-inch interface is now displayed in the Assistant Editor area:

We can also click on the bottom of the preview screen, next to the name (more than the iphone 4-inch) to flip the screen to a horizontal screen:

This is undoubtedly a major improvement for checking the adaptive situation of different sizes of devices, but it's much more than that! Clicking the + button in the bottom left corner of the preview screen will bring up the various sizes of devices currently supported by the storyboard file, which we can preview:

Choose iphone 5.5-inch and ipad separately, and we can display three sizes of screens at the same time in the preview screen:

At this time, do students notice that the 4-inch horizontal screen display is a bit awkward? Yes, it's got too big, and we can improve the problem by adding additional constraints to the image view.

Go back to Main.storyboard, select Image View, then hold down CTRL to build and left mouse button, drag the mouse to view controller's view, release the mouse will pop up a menu, we choose Equal Heights:

There will be some red constraint hints, because the constraint we just added is in conflict with the previously added constraint conditions. Because we previously added the vertical spacing (Vertical Margins) constraint between the image view and the TextContainer view, the height of the image view cannot be equal to the height of its container (view controller's view).

To fix the problem, first select the Equal Heights constraint we just added in the storyboard structure directory, and then select Attribute Inspect tab in the toolbar on the right, if it is not cloud. Height, select the Reverse first and Second item in the drop-down menu to make the value of the item a cloud. Height:

Next, set the value of the Relation property to less Than or Equal, and set the value of Multiplier to 0.4:

The effect of this set of settings is to make the cloud image height equal to its own height, or equal to 40% of the screen height, and the last rendered effect chooses the smaller of the two heights.

Now you should notice that in the preview panel, the 4-inch horizontal screen shows the immediate response to the constraint changes you just made:

Do you have a look at other size previews that are automatically updated? The answer is a must, so the Preview Assistant Editor is really a major improvement, a boon for programmers and designers!

Since the example in this article is a weather application, we have to add the city and the temperature to the weather icon.

To be Continued ...

Swift Adaptive layouts (Adaptive layout) tutorial (i)