This article will tell you what is Xcode Library, Assistant Editor and Inspector. It will also tell you how to display Xcode Library, Assistant Editor and Inspector window when you need them. Because for Xcode beginner, you may find you can not find them at sometime.
1. Xcode Library.
Xcode is apple provided development tools for user to develop iOS app, macOS application etc. It provide a lot of useful functions. Xcode Library is a collection of UI components which you can use in your iOS or macOS application to design the app’s GUI like below, you always need to find UI components in it.
But Xcode Library can also be a collection of source code templates, this is decided by which source file you select in your Xcode project. When you select Xcode project’s Main.dashboard file, the Library window shows above UI components, when you select ViewController.swift file, the Library window contains source code template like below.
2. Xcode Assistant Editor.
Xcode Assistant Editor is a window where you can edit app’s source code, you can connect UI component with the source code in this window by drag & drop operation. You can define outlet variable to refer to the UI component, you can define event process method to response UI component action in the assistant editor window also. The source code area in below picture’s right side is the code assistant editor window.
3. Xcode Inspectors.
Xcode Inspectors is a window where you can edit the selected UI component’s properties such as title, background color, alignment etc. You will use it after you select a UI component from Xcode Library. There are six inspectors, they are File Inspector, Quick Help Inspector, Identity Inspector, Attributes Inspector, Size Inspector and Connections Inspector. You can click the six shortcut icon at top of inspector window to show different inspector.
4. How To Display Xcode Library Popup Window.
- Start Xcode and create a swift project ( you can read article How To Create A Swift Project In Xcode ).
- Then click the Main.storyboard file in left project files list, this will open iOS app UI designer window in the center panel of Xcode. Please note, if you do not select the Main.storyboard file ( for example you click ViewController.swift to select the swift source code file ), then the popup Library window will not contain UI components collections, it will contain source code template collections.
- Click View —> Libraries —> Show Library menu item at Xcode top menu bar to display the Xcode UI components library popup window.
- You can also click Library button at Xcode top right corner to popup Xcode libraries window. Then you can input the UI component keyword in the search box to select the UI component. We search Button in below example.
5. How To Display Xcode Assistant Editor For Selected UI Component.
After you design app GUI with UI components, you may need to bind the UI component with the source code class’s property, you may also want to add event process method to response UI component action such as click, tap etc. Then Xcode Assistant Editor come to stage.
- Click Main.storyboard file.
- Then click View —> Assistant Editor —> Show Assistant Editor menu item at Xcode top menu bar.
- Then you can see the component Assistant Editor window like below. You can connect UI component to the source code property or method, you can read article iOS Add Click Event To UIButton Swift Example to learn more. If you want to close the assistant editor window, just click the close button at assistant editor window’s top right corner.
6. How To Display Xcode Inspector Window For Selected UI Component.
When you want to set selected UI component’s properties. You will need to display the Inspectors window.
- Click a UI component in the app main storyboard to select it.
- Click View —> Inspectors menu item at Xcode top menu bar. Then it will list all inspector sub menu item, click one sub menu item will display related inspector window.
- For example, if we click Show Attributes Inspector sub menu item, it will display attributes inspector window for the selected UI component. Then you can set the UI component’s attributes in this window. Please look at the right most side window in below picture, that window is the attributes inspector window. You can show different inspector window by click the six shortcut icon button at the top of the window.
- If you can not see the inspector window, sometimes this is because you hide the inspector window, you can click the Hide or show the Inspectors icon button to show it again. There are three rectangle buttons, this button is the right most one. The first one is Hide or show the Navigator button, the second one is Hide or show the Debug area button. Click them will show or hide Navigator or Debug area window.