The Xcode Auto Layout feature allows you to relatively size and position views based on certain criteria known as constraints.
1. To demonstrate this feature within the existing CrystalBall app I had to first change the simulator from a 4.0-inch retina display to 3.5 inch retina display simulator as shown below.
2. Next I ran the simulator with the updated settings and the Predict Future button is missing.
3. Next, I had gone to the “LKViewController.m” file and deleted the code within the “viewDidLoad” method. The deleted code within that method was legitimate and fully functional, however it was for the purposes of this exercise that the code was deleted. All code relating to the interface will be in the “main.storyboard” file. The following code was deleted from “LKViewController.m”:
UIImage *backgroundImage = [UIImage imageNamed:@"background"];
UIImageView *imageView = [[UIImageView alloc] initWithImage:backgroundImage];
[self.view insertSubview:imageView atIndex:0];
4. Switched to “main.storyboard” file and added back the Image View Background. Refer to the “CrystalBall Background Image” article for detailed instructions concerning that process.
5. The following steps relate to adding a Constraint, or mathematical formula for the layout of the Predict Future button across devices of both 3.5-inch and 4.0-inch displays. Click the Pin button in the Xcode interface. Ensure the bottom constraint is set to “20”. Maintain the Width and Height of the button by checking both of those boxes. To ensure the Constraints match the Frame select “Items of New Constraints” from the Frame dropdown menu. Next click “Add 3 Constraints”.
6. At this point this is what the button looks like. The Document Outline also has an error stating “Needs constraints for: X position” as indicated by a red circle with a white arrow.
7. Click the “Align” button within the Xcode interface.
8. Check the “Horizontal Center in Container” Constraint.
9. Within the Frame drop down menu select the “Items of New Constraints” option.
10. Select “Add Constraint”.
11. Verified the button is aligned correctly across both display sizes by using the “Toggle Form Factor” button on the Xcode interface.
12. Now there is a problem with the button overlapping the Crystal Ball image within our Background Image View. The Image View is not being resized for the smaller form factor. Select “Image View – Background”.
13. Click on the “Pin” icon.
14. Set all four Constraints to Active by highlighting each of the Constraint lines.
15. Within the Update Frame dropdown select “Items of New Constraints”.
16. Select “Add 4 Constraints”.
17. As a result of the preceding Image View change whenever the form factor is toggled the Image View changes size as shown in the squished crystal ball image from the 3.5-inch form factor setting.
18. The squished image was corrected with the following steps. First the Utility Area was opened while ensuring Image View-Background was still selected.
19. Within the Attributes Inspector the second section is View and selected “Center” in the Mode dropdown. The Center Mode maintains the Center of the image and clips whatever needs clipping.
20. Within the View the Label was selected.
21. Selected Width and Height by checking the corresponding boxes.
22. Selected “Items of New Constraints” from the Update Frame dropdown menu.
23. Although the Constraints are inactive, I changed the values to match the tutorial – Top: 165, Bottom: 174, Left: 36, Right: 36. I also changed the values associated with width and height to match the tutorial; Width: 248, Height: 140.
24. Clicked “Add 2 Constraints”
25. After adding the Width and Height Constraints it moved the Label as the horizontal and vertical placement has not been specified.
26. I dragged and dropped the Label back to its original location.
27. Hold down the Control key and then click and drag the Label to the Image View and let go.
28. A menu will appear, select “Center X” and “Center Y”. This corresponds to centering the Label both horizontally and vertically.
29. While toggling between the two form factors using the Toggle Form Factor icon, the Label now moves with the background image as does the Predict button.
30. Ran the application in the simulator. The app compiled correctly but I received an error from the simulator on two concurrent occasions. I restarted the simulator and it cleared the error. The app now runs as expected while maintaining the integrity of the design elements while running the app with the 3.5-inch simulator.
1. J.R. Sedivy. CrystalBall Background Image: http://jrsedivy.com/crystalball-background-image/
2. Treehouse. iOS Development. Build A Simple iPhone App. Designing Your App. Using Auto Layout: http://teamtreehouse.com