A background image was added to the iOS Crystal Ball app by means of the following process.
1. There are two images which were placed within the “xcassets” folder within the main CrystalBall project folder. There is a placeholder for each file, one is for a normal display and the second is for a retina display (2x). The files were simply dragged from their location to the designated placeholder.
2. In order to display the image I needed an Image View Control which serves as a container for the image. I switched to the “main.storyboard” file and searched using the term “image” within the Utility Area search function, and “Image View” was the returned option.
3. The Image View control was added to the view by dragging it to the view.
4. The image was resized with the Size Inspector. The four perimeters were designated as X = 0, Y = 0, Width = 320, and Height = 568. A 4″ iPhone is 568 and a standard iPhone would be 480. The image view is now scaled to the width and height of our main view.
5. The Crystal Ball background image was added by first going to the Attributes Inspector and entering “background” within the image field and hitting the “Enter” key.
6. Next, the View Hierarchy had to be updated so the background image wouldn’t cover the button and label. The way Xcode orders the view hierarchy is based on when the item was entered. Since the background image was entered last, it is at the forefront covering the other items. Within the Document Outline I clicked on the Image View and dragged it above the label and button.
7. The next steps related to optimizing the placement of the design elements. First, the Predict button was moved to the bottom of the view and below the crystal ball image. Next, I lowered the label and aligned it within the crystal ball image.
8. Next, the label was resized to fit within the crystal ball image to the following dimensions; width = 238, height = 140.
9. The option of “iPhone Retina (4-inch)” must be selected as I am running an iPhone 4-inch simulator.
10. The following is the updated CrystalBall app running within the iPhone simulator. It functions as before – with each click of the Predict button a random prediction is displayed. However, this time it has been updated with the background image.
1. Treehouse. iOS Development. Build A Simple iPhone App. Designing Your App. Adding A Background Image: http://teamtreehouse.com