IOS 8 Auto Layout Interface Series 2-add layout constraints using Xcode's Interface Builder

http://blog.csdn.net/pucker/article/details/41843511

The previous article, "iOS 8 interface auto-layout series-1", gives a brief introduction to the way the iOS interface is laid out in the past life. This article details how to use automatic layouts to adapt to different screen sizes.

There are three ways to add automatic layout constraints (hereinafter referred to as constraints):

• Adding and setting constraints using the Interface Builder Interface designer of Xcode
• Add a constraint by code article by clause
• Adding constraints through the Visual format language VFL

This article will show you how to add constraints in these ways, as shown in a simple example. The interface of the program mainly consists of three parts, the top is a company logo image, the following is the area can be scrolled, including the company name and detailed description.

Open Xcode (This article uses the version 6.1.1), create a new project, and select Single View application, iOS, application.

The project is named Autolayoutxcode, language selection objective-c, device Selection Universal.

Click Main.storyboard, drag an image view, a scroll view, and two labels, and use the two label as the ScrollView child view. To make it easier to identify, change the name of the image view to the logo image, and the name of the two label to Description label.

Download the Apple logo image apple.jpg and drag it into the project. File: Http://yunpan.cn/cfmJB82dfSwf6 (Extract code: 4049)

With the logo image selected, in the image view of the Properties window (Attributes Inspector), set the image to apple.jpg and mode to aspect Fit. This allows you to adjust the display of the image according to the size of the image view.

In order to correctly position the image View, we need to add 4 constraints, namely:

• The left side of the Image view is aligned to the left of the parent view
• Right side of Image view aligned to the right side of the parent view
• The top of the Image view is aligned with the top of the parent view
• The height of the Image view is half the height of the parent view

Then select the Logo Image, click on the Pin menu below the designer, uncheck constrain to margins (otherwise there will be spacing) above the pop-up menu, and set the left, right and top constraint values to 0 (Note to light the constraint mark from the dashed line to solid), Finally, click the Add 3 Constraints button below the pop-up menu to add the above three alignment constraints, as shown in.

Size inspector to see the dimensions of the currently selected interface element and the constraints that are added. Select the logo image and click Size Inspector to see the three constraints you just added, as shown in.

The three blue lines represent the left, top, and right alignment constraints, respectively. The list below also lists these three constraints in detail, Trailing Space to ... For right alignment, leading Space to ... Left-justified, top Space to ... Aligns to the top. The mouse double-click on the top Space to:superview constraint displays the details of the constraint, as shown in.

Recall the previous article on the introduction of constraints, constraints are a linear relationship:

y = m * x + C

The vertical Space constraint in the figure indicates that the current constraint is a vertical spacing constraint. The first item corresponds to Y in the formula, which represents the dependent variable, which is shown here is the logo image.top represents the top of the picture. The relation corresponds to the = in the formula, which represents the equality relationship, which shows that equal is equal. The Second item corresponds to the X in the formula, which represents the argument, which shows that Superview.top represents the top of its parent view. The multiplier corresponds to the m in the announcement, which represents the scaling factor, where the value is 1. The constant corresponds to the C in the announcement, which represents the offset constant, where the value is 0. So a complete string of images is clearly expressed in relation to the top of the parent view.

Note that the two sides of the constraint are equal, either that Y changes relative to x, or that x changes relative to Y, so that the first item is interchangeable with the second item, which is the inverse function:

x = 1/m * y-c/m

Click on the first item or the Second item drop-down menu and select reverse First and Second item to swap the positions of both sides.

The multiplier and constant after exchange are calculated automatically based on the inverse function formula.

Notice that a red button appears in the upper-right corner of the document structure window on the left, indicating that there is a layout constraint error in the current interface. Outline

Click this button and Xcode will list the errors and give the suggestions for resolution.

We now add only 3 constraints to the picture, and we lack the constraint to determine the bottom position of the picture, which is the missing height constraint (need constraints for:height) as indicated in the figure. Click the red button and Xcode will give you a solution.

At this point, if you click the Add Missing Constraints button, Xcode will add the missing constraint itself, but it may not be as we wish or even cause confusion. So we click Cancel and we add the constraint ourselves.

We want the picture to always occupy the upper half of the screen, so you can create a height constraint between the picture and the parent view. In the Document Structure window, click to select Logo Image, control-Drag to its parent view view, and select Equal Height in the popup menu.

To keep the logo image selected, double-click the equal Height to:superview constraint in the Size inspector window and modify the multiplier value to 0.5.

The red arrow at the top right of the document structure window changes to a yellow arrow, indicating that the constraint has a warning rather than an error. A misplaced view appears after clicking on the yellow arrow, indicating that the current layout state of some views in the designer is not the final state after the constraint has been applied, and that the location needs to be updated according to the constraint's requirements. Click the yellow triangle button, select the update Frame in the pop-up window, and click the Fix misplacement button.

The scroll view is then created with a constraint that is left-aligned, right-aligned, and bottom-aligned with the parent view, and the vertical spacing between the image view and the scroll view is 0. In addition to using the Pin menu, you can create constraints directly in the Document structure window or in the designer by dragging and dropping. In the Document Structure window, select scroll view, control-drag to its parent view view, hold down the SHIFT key and the option key in the pop-up window, check leading space to Container, Trailing space to Container and Bottom Space to Bottom Layout Guide, click outside the window to close the window.

Select the logo Image in the designer, control-drag to scroll view, and vertical Spacing in the pop-up window.

The interface designer can display constraints on the selected view in real time. When scroll view is selected, 4 blue lines are displayed around it, with each blue line being a constraint.

By dragging and setting constraints, Xcode determines the constant value of the constraint according to the current actual size of the view, so it needs to be modified manually. In the Size Inspector window, click the Edit button for each constraint, and change the value of constant to 0.

Now the scroll view constraint is added. We can then add a constraint to the name label in the same way, aligning its left, top, and right sides to the corresponding portion of the scroll view, and qualifying its height at 20.

After clicking Add 4 Constraints, the interface designer displays 4 Orange Line lines that represent the current position size mismatch constraint for the view, and you need to update the location dimensions based on constraints. Click the Resolve Auto Layout issues button below the interface designer and click Update Frames to update the location size.

With the name label selected, set the text of the label in the attribute inspector window to "Apple" and set the background to green.

Also adds a constraint to the description label, aligns its left, bottom, and right sides with the corresponding portion of the scroll view, and the top is equal to the bottom of the name label. In the Attribute Inspector window, set the text of the label to

"Apple Inc. is a high-tech company in the United States. Three people, including Steve Jobs, Steve Wozniak and Rod Wehn (Ron Wayne), were founded on April 1, 1976 and named Apple Computer Inc., the Apple Company, January 9, 2007, Headquartered in Cupertino, California State.

The PC, which was primarily developed and marketed at the beginning of Apple, was dedicated to the design, development and sale of consumer electronics, computer software, online services and personal computers as of 2014. Apple II in the 1970 helped the PC Revolution, and the subsequent Macintosh relay continued in the 1980. The company's hardware products are mainly Mac computer series, ipod Media Player, iphone smartphone and ipad tablet, online services include icloud, ITunes store and App Store, consumer software includes OS X and iOS operating system, itunes Multimedia browser, Safari web browser, and ilife and iwork creative and productivity suites. Apple is known worldwide for its innovation in high-tech companies.
Apple's December 12, 1980 IPO, which hit a $623.5 billion market record in 2012, has been the world's largest market capitalisation for three consecutive years as of June 2014. Apple ranked 15th in the world's top 500 rankings in 2014. Apple overtook Coca-Cola as the world's most valuable brand in the "Global Best Brands" Report of the Hong League group on September 30, 2013. The Apple brand overtook Google in 2014 to become the world's most valuable brand. ”

Set the value of lines to 0, set background to yellow, and update the position size.

We can preview the interface at any time using Xcode's preview tool. Open Assistant Editor and select Preview----Main.storyboard in the Quick Jump drop-down menu.

In the right-hand preview window, you can see the actual performance on different devices. You can click the + button in the lower left corner of the preview window to add a device that needs to be previewed in the pop-up menu.

Now it's time to actually run the program in the simulator and find that scroll view has turned sideways rather than vertically, which is not the effect we want.

Note that when you use automatic layout to add constraints to scroll view, you need to specify the contentsize size of the ScrollView in addition to the location dimensions of the ScrollView itself. For the above example, Scroll view itself occupies the lower half of the screen, but the size of its contentsize is indeterminate, so an abnormal scrolling effect occurs. So we also need to determine the width of the two labels so that we can calculate the contentsize. Press the command key to select the logo Image, Name label and description label in the Document Structure window, click the Pin button and select equal width in the popup window, so that the width of the two Label is always the same as the image The width of the view is equal, i.e. the width of the contentsize of the scroll view is always the same as the width of the scroll view itself, so there is no horizontal scrolling.

Run again, now only scrolls vertically. Program final project File Link: Http://yunpan.cn/cfu9J9qvUQz2P (extract code: 7654)

With this example, it is not difficult to find out, in fact, the concept of automatic layout is not difficult, and it can be a good solution to multi-device interface adaptation and screen rotation processing work. And in these kinds of ways to add constraints, using Xcode's Interface Builder to visually create constraints and use the Preview tool to adjust constraints in real time is the simplest and most common way.

In the next article, we'll focus on creating Nslayoutconstraint objects through code, and how to add constraints using the VFL language.

If you have any suggestions, comments or questions about what I have written, please leave a message on my blog:

Puzhi's CSDN Blog

IOS 8 Auto Layout Interface Series 2-add layout constraints using Xcode's Interface Builder