Laying out the bottom section

The bottom section for this page looks simple, but you need to think very carefully about the way it is set up. On small screens, all of the elements should be displayed in a single column, while larger screens have two columns. The simplest way to do this is to wrap both of these sections in a container view as shown in the following screenshot:

The biggest challenge you face is to make sure the scroll view's content view knows how to calculate the height of its contents. Previously, you added a constraint that pinned the label to the bottom of the content view. You should remove this constraint because it isn't needed anymore. Instead, the left column of the layout will be pinned to the bottom of the content view since it's the tallest view of the two. Remove the label's bottom constraints by selecting the label in the Document Outline and navigating to the Size Inspector. Click the Bottom Space to: constraint and press Backspace to remove this constraint. Now you can manually make the content view a bit taller, so you have some space to work with.

Drag two regular views from the Object Library into the content view and size them so they are roughly the same size and so they meet in the middle. The views shouldn't overlap, but they also shouldn't have any space between them. Drag the left edge of the view on the left until you see the blue helper lines. Do the same for the right view but drag the right side of the view to the right side of the window. Position both views so they are positioned roughly 40 points below the label.

Now, select the view on the left and Ctrl + drag to the name label and add a vertical spacing constraint. Then, Ctrl + drag to the left side to pin this view's left side to the content view's leading edge. Now, select the right view and do the same, except instead of dragging left, drag right to pin the right side of the view to the content view's trailing edge. Finally, Ctrl + drag from the left view to the right view and select the equal width constraint and vertical spacing constraint. This should leave you with two equally sized views that don't have a height yet. Lastly, Ctrl + drag from the left view downward into the container view to pin its bottom 10 points from the bottom of the container view.

Drag six labels into the left view. Align them as they are in the design. Use the blue lines as guides for the margins, and make the labels wide enough to cover the view. Stop at the blue lines again; they help you by providing some nice margins. Press Ctrl and drag from the first label upward to pin it to the top side of the view. Press Ctrl and drag left into the left view to pin the label to the left side of the view, and press Ctrl and drag right to pin it to the right side. Then, select the second label and Ctrl + drag upward to the first label. While holding the Shift key, select the leading, trailing, and vertical spacing constraints. Repeat this for all other labels. The final label should be pinned to the bottom of the left view.

Now, drag a label and a text field to the right side's view. Align the elements by using the blue lines again. Pin the label to the top, right, and left sides of its containing view. Drag the text field to the label and select the leading, trailing, and vertical spacing constraints. Finally, drag upward inside the text field to add a height constraint. Modify this constraint so the text field has a height of 80. Finally, press Ctrl + drag downward to pin the bottom of the text field to the bottom of the view.

The step to create the layout is to press Ctrl and drag the left view down into the content view. Select the vertical spacing constraint and modify the constant so the spacing is eight points. Now use the Attributes Inspector to make all header labels use a bold font and provide the appropriate text values for them. Refer to the design to see what the correct label values should be.

Well, that was a lot of instructions, but you should have successfully completed the layout for regular x regular devices. Try to run your app on an iPad; looks pretty good, right?

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset