ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

 iOS - About Xcode and its UI Interface - Part 2

Updated on October 12, 2017
FV Imagination profile image

Web Designer, iOS, Android mobile apps developer. From Italy with Love.

The Info tab

In my previous article, I had explored some of the tabs and menus of Xcode starting from the top-left corner of its window. I will continue from where I left off so from the Info tab in the central panel.

This tab shows the Info.plist file data stored in the Project navigation panel on the left side, with some additional options like Document Types, Exported UTIs, Imported UTIs and URL Types.

The Info tab
The Info tab
  • Document Types: If your app is capable of opening specific types of files, you should register that support with the system, and you can do that in this section by expanding it clicking on the + sign.
  • Exported and Imported UTIs: These 2 sections are for Mac apps, you can add new Uniform Type Identifiers for proprietary data formats by expanding this section and clicking on the + sign.
  • URL Types: Here's where you can declare the types of URL needed for your app in case you're using some third-party framework like Facebook SDK, GPUImage framework, etc.

For all other data, you can either edit the Custom iOS Target Properties section or click on the Info.plist file in the left panel. I actually recommend you to do so since It will offer you a wider area and you'll also be able to adjust the cells' width.


The Build Setting tab

The Build Settings tab
The Build Settings tab

This tab is mostly for experienced developers and it hosts all the necessary keys and paths about your project, such as the framework path, the signing team, the Swift compiler version, etc.

You usually edit some sections of this tab when you embed some third-party frameworks in your project, such as adding some flags and keys needed to make those frameworks work with your application.


The Build Phases tab

The Build Phases tab
The Build Phases tab

This tab is to manage the compile source files and bundles relative to your project, Xcode usually handles this automatically when you add files to your project, and again, in case you're using third-party frameworks, you may need to manually add some of their dependencies in this tab.

  • Target Dependencies: click on the + sign to add dependencies from your third-party framework (if any).
  • Compile Source: here's where your project's swift files get shown as a list, Xcode adds them automatically.
  • Link Binary With Libraries: In this section, you can manually add iOS .framework files by hitting the + button and selecting the ones you need. Please note that you can do the same thing in the General tab as well.
  • Copy Bundle Resources: This section hosts the Image Sets and .bundle files relative to your app, in fact, you can see the Assets.xcassets folder and the Main and LaunchScreen storyboard files.


The Build Rules tab

The Build Rules tab
The Build Rules tab

Most Xcode project types support Build Rules, which allow developers to modify how existing file types are built, and to define how new file types are built. This tab is for very experienced developers and may be edited just in case you use plugins like J2ObjC and need to add its proper code to be decoded by Xcode and translated into Objective-C.


The Inspector toolbar

Now let's get into the toolbar that is located on the top-right corner of the Xcode window, right below the Layout toolbar.

Select Main.storyboard from the Project navigator panel to get the full set of options in the Inspector toolbar.

The Inspector toolbar
The Inspector toolbar
  • File inspector: this tool shows the identity and type info of your Storyboard file, along with the Interface Builder number, Deployment target, Localization files list for translations and Target Membership (the target name of your project).
  • Quick Help: here's where you can find quick help for Views and instances by searching in the official iOS documentation, most of the times you just have to select a View or a line of code and Xcode will automatically display their descriptions and declarations in the left side panel, while sometimes you have to click the Search Documentation button to open it and manually search for your desired topic.
  • Identity inspector: this section is where you set a Custom Class name, its Module and its Storyboard ID. This is important in case you perform a Segue or just need to switch from a ViewController to another by code, where you have to instantiate a second screen and type its Storyboard identifier in order to Xcode to open such controller.
  • Attributes inspector: One of the most used options of this toolbar is this one because here you can edit several attributes of your Views such as text and colors for Labels, TextViews, Buttons etc, layout types for Controllers and much more. When Xcode was first released you had to mostly edit Views' attributes by code, no you can skip this painful job and speed up your app development.
  • Size inspector: This is another tool you frequently use in order to set auto resizing, size, position and margins of your Views in the Storyboard.
  • Connections inspector: here's where you can check all the connections you've made between your Views and the swift files relative to your ViewControllers, such as IBOutlets and IBActions.


The Objects panel

On the bottom-right corner of the Xcode window, you can find the Objects panel which let you select and use files, snippet codes, Views and Media objects for your project.

The Objects panel
The Objects panel
  • File template: this library contains all the files you can drag in the Project navigator panel and add to your project in order to build your app.
  • Code Snippet: this is a very useful tool where you can save and use code snippets, just select the piece of code you want to save in a swift file and drag it onto this panel, give it a name and shortcut key so you'll be able to recall it while coding by simply typing the shortcut key and hit Enter. This will help you save time on development.
  • Object library: here's where you can select and drag UIViews, Controllers, UILabels etc. onto your Storyboard and build the design of your application.
  • Media library: if you've added some media file into the Project navigator panel you'll find them in this panel.


The Views panel

This panel is where you can set the size of your ViewControllers in the Storyboard based on a chosen device, zoom the storyboard window and adjust constraints for Views. You can hide and show it by clicking on the button that starts with "View as: ".


The Document Outline panel

By clicking on the small square icon highlighted in the picture above you can hide and show the Document Outline panel which is the list of Views and Constraints included in your View Controllers.

This panel is useful to manage Views z position - move them in front or back, select objects quickly and make connections to the swift files.


Conclusion

Thanks for reading, hope you've enjoyed this article. In case you missed the Part 1 of it just click here to read it.

Don't forget to check out my other articles and my portfolio of app templates on CodeCanyon!


Comments

Submit a Comment

No comments yet.

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)