You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Search for a `UIStackView`. When it comes up, drag it into the Detail View Controller in the storyboard. Select the stack view, go to the **Add New Constraints** button, and use the panel that pops up when you click it to pin the stack view 20pt from the superview's two sides and 40pt from the top:
19
19
20
-
20
+
<imgalt="constraints builder with those constraints"class="screenshot"src="../images/outer_stack_constraints.png"/>
21
21
22
22
In the right sidebar, update the settings of the Stack View in the Attributes Inspector to these:
23
23
24
-
24
+
<imgalt="horizontal axis center alignment fill distribution spacing 20 uncheck baseline relative"class="screenshot"src="../images/outer_stack_view_setup.png"/>
25
25
26
26
</ExpansionPanelListItem>
27
27
<ExpansionPanelListItemnumber="2">
@@ -32,33 +32,33 @@ Next, show the library again, and search for a **UIImageView**. Drag it into the
32
32
33
33
In Interface Builder's left sidebar, command-click on both the Image View and the view controller's main view to select both:
34
34
35
-
35
+
<imgalt="selecting both views at once"class="screenshot"src="../images/select_view_and_imageview.png"/>
36
36
37
37
Next, tap the Add New Constraints button again, and select **Equal Widths**:
38
38
39
-
39
+
<imgalt="adding the equal widths constraint"class="screenshot"src="../images/equal_widths_constraint.png"/>
40
40
41
41
Select the constraint you just added using Interface Builder's left sidebar:
42
42
43
-
43
+
<imgalt="select the widths constraint"class="screenshot"src="../images/select_widths_constraint.png"/>
This constraint means that the width of the image will always be 40% of the screen, no matter the size of the screen.
50
50
51
51
To add a constraint that keeps the height always equal to the width, select the Image View in Interface Builder's left sidebar, and click on the Add New Constraints button one last time. Select the **Aspect Ratio** constraint:
52
52
53
-
53
+
<imgalt="adding the aspect ratio constraint"class="screenshot"src="../images/aspect_ratio_constraint.png"/>
54
54
55
55
Select the constraint you just added using Interface Builder's left sidebar (note: The ratio may not be 1:1 yet, just look for the constraint that says "Aspect"):
56
56
57
-
57
+
<imgalt="select the aspect ratio constraint"class="screenshot"src="../images/select_aspect_constraint.png"/>
> **Note**: You might still see some sizing errors at this point, but those will go away in the next step.
64
64
@@ -71,7 +71,7 @@ Finally, hook this image up to the `missionPatchImageView` outlet.
71
71
72
72
Next, add a second stack view to your horizontal stack view. Update the settings in the attributes inspector to these:
73
73
74
-
74
+
<imgalt="vertical axis fill alignment equal spacing distribution spacing 8 uncheck baseline relative"class="screenshot"src="../images/label_stack_view_setup.png"/>
75
75
76
76
</ExpansionPanelListItem>
77
77
<ExpansionPanelListItemnumber="4">
@@ -80,19 +80,19 @@ Next, add a second stack view to your horizontal stack view. Update the settings
80
80
81
81
Add a `UILabel` to the inner stack view. Select the label, go to the Attributes Inspector panel, and update the text, font size, and lines:
82
82
83
-
83
+
<imgalt="Mission Name text, system bold 24.0 font, 0 lines"class="screenshot"src="../images/mission_name_label.png"/>
84
84
85
85
Hook this label up to the `missionNameLabel` outlet.
86
86
87
87
Next, add a second `UILabel` to the inner stack view. Again, select label, go to the Attributes Inspector panel, and update the text, font size, and lines:
88
88
89
-
89
+
<imgalt="Rocket Name text, system 20.0 font, 0 lines"class="screenshot"src="../images/rocket_name_label.png"/>
90
90
91
91
Hook this label up to the `rocketNameLabel` outlet.
92
92
93
93
Next, add a third label to the inner stack view, and update its details to match the following:
94
94
95
-
95
+
<imgalt="Launch Site text, system 14.0 font, 0 lines"class="screenshot"src="../images/launch_site_label.png"/>
96
96
97
97
Hook this last label up to the `launchSiteLabel` outlet.
98
98
@@ -103,7 +103,7 @@ Hook this last label up to the `launchSiteLabel` outlet.
103
103
104
104
Drag in a `UIBarButtonItem` to the top right of the navigation bar. Rename it `Book Now!`:
105
105
106
-
106
+
<imgalt="Book Now title"class="screenshot"src="../images/bar_item_title.png"/>
107
107
108
108
Hook the item up to the `bookCancelButton` outlet.
Search for a `UIStackView`, and when it comes up, drag it into the Detail View Controller in the storyboard. Select the stack view, go to the **Add New Constraints** button, and use the panel that pops up when you click it to pin the stack view 20pt from the superview's two sides and 40pt from the top:
19
+
20
+
<imgalt="constraints builder with those constraints"class="screenshot"src="../images/login_stackview_constraints.png"/>
21
+
22
+
In the right sidebar, update the settings of the Stack View in the Attributes Inspector to these:
23
+
24
+
<imgalt="vertical axis fill alignment fill distribution spacing 8 uncheck baseline relative"class="screenshot"src="../images/login_stackview_details.png"/>
25
+
26
+
</ExpansionPanelListItem>
27
+
<ExpansionPanelListItemnumber="2">
28
+
29
+
<h4>Add elements to the Stack View</h4>
30
+
31
+
Add a `UILabel` to the stack view. Select the label, go to the Attributes Inspector panel, and update the text and font:
32
+
33
+
<imgalt="text Log In font Large Title"class="screenshot"src="../images/login_title_label_details.png"/>
34
+
35
+
Add a `UITextField` to the stack view. Select it, go to the Attributes Inspector panel, and update the placeholder text:
Hook this text field up to the `emailTextField` outlet.
40
+
41
+
Add another `UILabel` to the stack view. Select it, go to the Attributes Inspector panel, and update the color, font, number of lines, and text:
42
+
43
+
<imgalt="Text Errors color System Red font Body lines 0"class="screenshot"src="../images/login_error_label_details.png"/>
44
+
45
+
Hook this label up to the `errorLabel` outlet.
46
+
47
+
Add a `UIButton` to the stack view. Select it, go to the Attributes Inspector panel, and update the title text:
48
+
49
+
<imgalt="Title text Submit"class="screenshot"src="../images/login_button_details.png"/>
50
+
51
+
Hook this button up to the `submitButton` outlet and the `touchUpInside` method for the `submitTapped` action.
52
+
53
+
</ExpansionPanelListItem>
54
+
<ExpansionPanelListItemnumber="2">
55
+
56
+
<h4>Add a cancel button</h4>
57
+
58
+
Search in the library for a `UIBarButtonItem`:
59
+
60
+
<imgalt="The output of the search"class="screenshot"src="../images/interface_builder_bar_button_item.png"/>
61
+
62
+
Drag it in to the top left hand side of the navigation bar. Then, select it and go to the Attributes Inspector panel, and make it a system cancel item:
0 commit comments