34,333
edits
Changes
no edit summary
{{#pagetitle: An iOS 10 Auto Layout Example }}
<seo title="An iOS 10 Auto Layout Example" titlemode="replace" keywords="ios 10, swift 3, xcode 8, auto layout, tutorial" description="An tutorial demonstrating the use of Auto Layout constraints in Xcode when designing a user interface for an iOS app"></seo>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Working with iOS 8 Auto Layout Constraints in Interface Builder|Previous]]<td align="center">[[iOS 8 App Development Essentials|Table of Contents]]<td width="20%" align="right">[[Using Trait Variations to Design Adaptive iOS User Interfaces|Next]]</td>
<tr>
<td width="20%">Working with iOS 10 Auto Layout Constraints in Interface Builder<td align="center"><td width="20%" align="right">24. Using Trait Variations to Design Adaptive iOS User Interfaces</td>
</table>
<hr>
[[Image:ios_8_auto_layout_Example_label.png|Auto Layout example UI layout]]
Figure 20-1
[[Image:xcode_6_select_view_from_library.png|The view controller in the Xcode 7 object library]]
Figure 20-2
[[Image:ios_8_auto_layout_example_ui_1.png|The completed Auto Layout example UI]]
Figure 20-3
[[Image:ios_8_auto_layout_example_view_constraints.png|Adding an Auto Layout constraint in Interface Builder]]
Figure 20-4
[[Image:ios_8_auto_layout_example_label_constraints.png|Adding a standard value constraint to nearest neighbor]]
Figure 20-5
[[Image:ios_8_auto_layout_example_landscape.png|the auto layout example in landscape orientation]]
Figure 20-6
[[Image:ios_8_auto_layout_example_label_clipped.png|An example of layout clipping]]
Figure 20-7
[[Image:ios_8_auto_layout_example_label_compressed.png|An example of layout compression]]
Figure 20-8
[[Image:ios_8_auto_layout_example_prevent_clipping.png|Using the Auto Layout menu to prevent layout clipping]]
Figure 20-9
[[Image:ios_8_auto_layout_example_label_fixed.png|The completed Auto Layout example UI]]
Figure 20-10
