Adding our app assets

Let's add images into our project:

1. Select the Assets.xcassets folder in the Navigator panel:

2. Hit the Delete/Backspace button, and you will get the following message:

3. Select Move to Trash.

 

4. Open the project assets folder that you downloaded from Packt's website or GitHub. Open Chapter_07. Drag the Assets.xcassets folder into your project in the Navigator panel:

5. When you drop the folder, you will get the following message:

6. Make sure that both Copy items if needed and Create groups are selected. Then, hit Finish.

If you open the Assets.xcassets folder, you will now see all the assets for your entire project:

When you explore the assets, you will notice that we will be using both PNGs and PDFs.

Using PDFs allows us to support multiple device resolutions with only one image. Therefore, Xcode can handle supplying assets for all resolutions.

7. Select Main.storyboard again, and, in the Outline view, you will select both disclosure arrows for Item 1 Scene and Item 2 Scene, in order to have them face downwards:

8. Now, select both disclosure arrows for Item 1 under Item 1 Scene and Item 2 under Item 2 Scene. Both should be downward-facing:

9. Select Item 1 with the blue star to the left of it, and then select the Attributes inspector in the Utilities panel:

10. In the panel, use the following values to update your first tab icons:

• • In the Tab Bar Item, enter the following details:
    • Badge: Leave this field blank
    • System Item: Select Custom from the dropdown list
    • Selected Image: icon-explore-on
    • Title Position: Select Default Position from the dropdown list

• • In the Bar Item, enter the following details:
    • Title: Type Explore in this field
    • Image: icon-explore-off
    • Tag: Enter 0 in this field
    • Enabled: This checkbox should be checked

11. Now, select Item 2 with the blue star to the left of it in the Outline view, and the Attributes inspector should already be open:

12. Add the following into the panel:

• • In the Tab Bar Item, enter the following details:
    • Badge: Leave this field blank
    • System Item: Select Custom from the dropdown list
    • Selected Image: icon-map-on
    • Title Position: Select Default Position from the dropdown list
  • In the Bar Item, enter the following details
    • Title: Type Map in this field
    • Image: icon-map-off
    • Tag: Enter 0 in this field
    • Enabled: This checkbox should be checked

13. Now, let's run the project by hitting the play button (or use cmd + R) in order to see where we are:

As you may have noticed, this screen does not look like an app. Since we are building a Tab Bar Controller from scratch, we need to add an entry point. Close the simulator, and continue with the following steps:

14. Select Main.storyboard again in the Outline view, and make sure that the disclosure arrow is down for the Tab Bar Controller Scene:

15. Select the Tab Bar Controller under the Tab Bar Controller Scene, and, in the Utilities panel, make sure that the Attributes inspector is selected:

16. Now, under the View Controller section, you will need to check the box for Is Initial View Controller:

17. After you set the initial View Controller, there will be an arrow now pointing to the Tab Bar Controller. This arrow signifies the entry point of our app:

18. Let's run the project again by hitting the play button (or use cmd + R):

Perfect! Now, with our basic structure established, we can start adding more specific elements to our views.