上QQ阅读APP看书，第一时间看更新

Toolbar

This is the topmost part of the screen. We have the status line, which says Ready | Today at 7:28 PM, as shown in the following screenshot. This is the place where Xcode communicates with us. The app prints all errors here and we can pe into the details by clicking on the errors. There are no errors at the moment, but they may appear at times.

Successful messages such as the one on the previous screen and the following screen can't be explored:

We have the basic controls located on the right. There are two groups of buttons. The first group consists of the following options:

Show the standard editor : This option presents a single window to edit the project (usually, a view of our source code).
Show the assistant editor : This option splits the screen in two. There is a small down arrow at the bottom of this option. Once you activate this mode, the second click will present a menu with different options. You can explore all possible options. We won't use this mode of the Xcode now. It will be explained in detail later, when we are about to use it (this will happen when we start developing the UI using storyboards).
Show the version editor : This one is used when the project supports versions and Git. (We will get briefly to this option once we discuss Git and version control integration.)

The second group also has the following three buttons which activate advanced panels of the Xcode. These are toggle buttons, which activate (show) or deactivate (hide) different parts:

Hide or show the Navigator button : This button activates the Navigator panel, which is located to the left. Once activated, the editor (main part) is squeezed. If it's deactivated, then the editor is expanded to take the whole window estate as shown in the following screenshot:

For more information, check the sub-section which explains the Navigator panel.

Hide or show the Debug Area button : This activates the Debug panel, which is located at the bottom:

For more information, check the sub-section which explains the Debug panel.

Hide or show the Utilities button : This activates the Utilities panel, which is located on the right as shown in the following screenshot:

For more information, check the subsection which explains the Utilities panel.

Each one of these three panels gives the user extra control of the project and an easy way to change its configuration. We can add and explore all files and assets from the Navigation panel. We see the output from the app in the Debug panel. There are too many buttons to be clicked, which could lead to confusion. Don't try to remember everything now, just start exploring the IDE and you will get used to it. Then you will learn the shortcut keys, and step-by-step you will become an Xcode master.

The panels are contextual, which means they look different based on the active (selected) file.

We can see the active file at the very top of the editor. In our case, Swift 4 by examples, as shown in the following screenshot:

The playground can contain many files and assets, but the main file is displayed, once the playground is opened.

The Related Items button provides a menu to explore all files, which have been opened as shown in the following screenshot:

Contents.swift is the main file of every playground; it contains the code which is executed when the playground is run.

The back arrow button helps us to go to the previous file that was explored in the editor. In our case, when we have a playground with a single file, it's not very usable; but when we start to build real mobile apps, then it will become handy.

The forward arrow button does the opposite of the back arrow button. You can use it to go to the next file.

The filename, Swift 4 by examples, is a visual tree that shows the playground project structure. It's pretty close to what you will see in the Navigator panel. You can use it to switch between different source files in the editor area as shown in the following screenshot:

The rest of the editor area is used to render the selected file at the top. In our case, we see the code of the playground project. To be more precise, the Contents.swift file. At the very bottom, we see the Debug panel action bar. It looks like this: There are two buttons: the first one is to open the console, which triggers the Debug panel button in the top-right part of the Xcode window (the middle button). The second is the Play button which evaluates the whole playground. We can use it to run the code that we have written. If we press it, the status bar (part of the toolbar) will start and will say Ready | Today at 12:00 PM (where the time will be your current time of execution).