ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

 iOS - About Xcode and its UI interface - Part 1

Updated on October 12, 2017
FV Imagination profile image

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

Xcode to build native apps

In this tutorial I'll cover the basic aspects of Xcode and its User interface.

Right now the latest Xcode version is 8.3.3 and the Swift version is 3.

Xcode is the only software you can use to build native iOS, macOS, tvOS and WatchOS applications, it handles both Objective C and Swift languages, supports Storyboards and code completion feature. You can download it for free on the Mac App Store, and of course you must own a Mac PC in order to work with Xcode, there's no Windows or Linux version available.

So let's start by opening Xcode and click on Create a new project. For the sake of this tutorial I'll choose Single View Application in the iOS tab.

Create a new Single View Application
Create a new Single View Application

Click Next and get to the app info window.

Here you have to do set the following options:

  • A name of your project - usually it's better to insert a name with no spaces, like "MyGreatApp" or just a single name.
  • Select your Team which should be the one you've registered in the Apple developer Portal when you enrolled for an iOS Development Program, so Xcode will automatically download your certificates and you'll be able to test your app on a real device
  • Organization Name: type your full name or the name of your company
  • Organization Identifier: This is basically the bundle ID of your app, you can register it later in your Apple developer account but just choose it wisely and type it in a reverse-syntax mode, like "com.domain.mygreatapp", all lowercase letters and no spaces
  • Bundle Identifier: this is not editable so it just shows your Bundle ID which starts with the Organization identifier you've set above and it has your project name as suffix
  • Language: Choose either Swift or Objective-C. Please note that for the sake of this tutorial I'll choose Swift language.
  • Devices: Select is you want your app to run on all devices (Universal) or just on iPhones or iPads
  • Use Core Data: You can check this option in case you planned to integrate CodeData framework in your project. Xcode will generate the necessary files to handle CodeData code.
  • Include Unit Tests: Check this option in case you need Xcode to generate the Tests folder - please note that this is not needed at all
  • Include UI Tests: same as above, although this is about User interface tests, and again, this option is not needed to build apps since you'll be able to test your app directly on your device with no issues

Hit Next and save your project into a desired folder or on your Desktop by clicking on Create.

New Project options
New Project options

Your very first Xcode window

Your new project has just been created, there's a brand new world on the screen of your Mac now and the first screen you get is the General tab where you can adjust the Bundle Identifier, the display name of your app, it's deployment target and a lot more. Let's start by seeing how it looks.

The Xcode's General tab
The Xcode's General tab

Run, stop and choose a device for debugging

Before getting into the General tab details I want to highlight the buttons on the top-left corner of the Xcode window and explain you what they are about.

The screenshot below shows the basic commands tool.

As the comments on the picture above say, this toolbar allows you to either run or stop debugging your application and the combo box is where you can choose the device you want your app to run on.

As per Apple guidelines it's always good to test an app on a real iPhone or iPad with WiFi or 3/4G internet connection, because the Simulator may fail sometimes and it doesn't support camera and current location, so if your project needs those features you really can't test it on the Simulator.


The Project toolbar

Right below the Debug toolbar you can find the Project toolbar where you can see the list of your files, search for them, see code issues and more.

The Project toolbar
The Project toolbar
  • Project navigator: this is where you can see the list of your files, which includes the Swift files, the Main Storyboard, the Assets folder, the LaunchScreen storyboard, the Info.plist file and the Products folder
  • Symbol navigator: here you can browse and select all the methods of your code based on the .swift or .h and .m files present in your Xcode project
  • Find navigator: Use this tool to find and replace parts of code, this feature will allow you to search for specific text in the whole project
  • Issue navigator: if your code has bugs, this section will show them as a list and you'll be able to select each row and get to the line(s) that are not well written. You may also check the Xcode console on the bottom of the screen to better address your issues.
  • Test navigator: If your project as UI or Unit Tests folders, here's where you can check their logs
  • Debug navigator: you can check all debug sessions about your app
  • Breakpoint navigation: If you placed breakpoints in your code, yu'll be able to see logs about them in this section
  • Report navigator: Here's where you can create and manage a Bot for yur code (for experts only, and pretty useless options btw :)

The Layout toolbar

On the top-right corner of the Xcode window you can find a set of buttons to control the layout of your environment and hide/show certain sections of Xcode.

The Layout toolbar
The Layout toolbar

The picture above shows the names of the buttons, you can check them out on your own by simply positioning the mouse pointer over them and wait for a second for the alt box to show up.

  • Show the Standard editor: This layout option is selected by default when you first create a new project. If you click on it, the central panel in Xcode will show the entire file that is selected in the Project navigator panel.
  • Show the Assistant editor: This button is to split the center of the Xcode window in two parts. The left side will still show the file you've selected from the Project navigator panel, the right side will show another file. This option is used mostly when you need to connect a View from the Storyboard to a .swift file and declare either its IBOutlet or IBAction, you can check the screenshot below as an example:

The Assistant editor
The Assistant editor
  • Show Version editor: This option is useful in case you've changed some code in your swift files and want to revision them by seeing the differences between them. The center of the Xcode window will again by split in two parts and you'll see the left side with your new code and the right side with the old code.
  • Hide or show the Navigator: Use this button to show/hide the left navigator panel. By default, this is always visible when you first create a new project.
  • Hide or show the Debug area: By default, this button is disabled but when you run the app it will get enabled and show an extra window on the bottom of the screen: that's the console where you can log anything about your application, as well as see crash errors and debug messages. This tool is very important for developers, I would say that it's indispensable.
  • Hide or show the Utilities: This button shows or hides the right side Utilities panel. I'll explain about this panel later because it's essential for your development.

The General tab

Finally, let's get into the General tab of the Editor section, which is the central side of the Xcode window. Here's where you'll do all the magic about building and setting up your apps.

The Xcode General tab
The Xcode General tab

As you can see above, I've placed numbers next to each option of this tab, in this way I'll be able to explain you what they are for step by step.

Please note that in order for you to see this section you must select your project name under TARGET, not under PROJECT (this selection is anyway active by default when you start a project)

  1. Display Name: You can edit this field to set the name that will appear underneath your app's icon on the device (or even the Simulator)
  2. Bundle Identifier: Based on your settings in the first popup window you've got when you created your project (as previously mentioned), this option will show the bundle ID relative to your app. You can still edit it as you wish, for instance in case you changed your mind and renamed your app's Display Name.
  3. Version: By default this value is 1.0, obviously, and you should leave it as it is. You can change it in case you've updated your app and need to submit it to the App Store as an update.
  4. Build: Similarly to the Version, by default this value is 1, you must increase it every time you make an update and are about to Archive your project, because iTunes Connect will not process older builds.
  5. Automatically manage singing: Since Xcode 8 this options is always enabled and it's pretty useful. It gets info about your Developer certificates and creates and updates profiles, app ID's and certificates automatically. To be honest it doesn't always work properly because most of the times you still need to manually create an app ID on your Apple Developer Portal. We all hope that Apple will fix this little bug on a next Xcode release.
  6. Team: This combo box shows the Team member you've previously selected when creating the project
  7. Deployment Target: Here you can select the minimum iOS version of your app, I usually select 8.0 so I'll be able to run my apps on older devices too (like iPhone 4S and iPhone 5 SE).
  8. Devices: Choose if you want your app to run on all iOS devices, on iPhones or on iPads only.
  9. Main Interface: By default this field has the name of the main Storyboard of your project. Unless you'll add additional Storyboards (unusual), you should leave this value as it is.
  10. Device Orientation: Here you can set the allowed orientations by selecting the desired options.
  11. Status Bar Style: Choose either a default status bar (black) or a light one (white).
  12. Hide Status Bar: Check this option to hide the Status Bar. Please note that this is not enough though, you must also place the following line of code right above the viewDidLoad() method of your swift files in order to hide the Status Bar from your controllers:

    override var prefersStatusBarHidden : Bool {
        return true
    }
    
    func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
        UIApplication.shared.setStatusBarHidden(true, with: .none)
    }
    

13. Requires full screen: This option is not checked by default, but it should, otherwise you'll see black areas on the top and bottom edges of the screen of your device when you'll run your app, so just make it true (check it).

14. App Icons Source: here is where you choose the Image Set for your app icons, by default Xcode already created an Image Set called AppIcon and you can find it in the Assets.xcassets folder.

15. Launch Images Source: When you create a new project, Xcode generates a LaunchScreen.storyboard file where you can place your splash screen image and views inside it, so if you want to use that just leave this option as it is and don't create any Image Set in the Assets.xcassets folder. Instead, if you'd rather adding your own splash screen images for all devices, click Use Asset Catalog... to migrate launch images to an asset catalog. Xcode will create a LaunchImage image set where you'll be able to drag all the splash screen png's into.

Migrate Launch images into the Assets catalog
Migrate Launch images into the Assets catalog

16. Launch Screen file: This field hosts the LaunchScreen.storyboard's name as a reference to load it at app startup as a splash screen. If you want to use such storyboard file just leave this option as it is.

17. Embedded Binaries: This section is for you to attach third-party libraries to your project, for instance if you have included frameworks downloaded from GitHub, they may have libraries that need to be imported in your project. Click the + sign to do so.

18. Linked Frameworks and Libraries: Here's where you can add the .frameworks files from a list of iOS Frameworks or third-party ones, like GoogleMobileAds.framework, for example, FacebookSDK, or many other. You can hit the + button and choose the desired Frameworks, once you select one Xcode will generate a Frameworks folder in the Project navigator panel on the left side.

The Capabilities tab

This is another important tab in Xcode where your can enable/disable iOS features such as iCloud, Push Notifications, etc.

Click on the small arrows next to the Capabilities names to see what they are for.

The Capabilities tab in XCode
The Capabilities tab in XCode

Here's the list of Capabilities you can switch on in your project:

  • iCloud: iCloud Storage enable your apps to store data and documents in iCloud, keeping your apps up to date automatically. Use iCloud to give your users a consistent and seamless experience across iCloud-enabled devices
  • Push Notifications: this service is a robust and highly efficient service for propagating information to devices
  • Game Center: This option allows player to connect to the Game Center service, enabling them to interact with friends, view leader boards, or play head to head in your game.
  • Wallet: Wallet gives users a way to organize passes, tickets, gift cards, creadit cards and loyalty cards. Use the PassKit framework APIs to display, add or update items in your users' Wallets.
  • Siri: Allows your application to handle Siri requests.
  • Apple Pay: allows users to easily and securely pay for physical goods and services such as groceries, clothing, tickets and reservations in apps using payment information stored in their iOS device using Touch ID.
  • In-App Purchase: this option lets you sell a variety of items directly within your free or paid apps, including premium content, virtual goods and subscriptions.
  • Maps: With MapKit you can create routing apps that users can access form Maps. Your apps can provide specific directions beyond what the Maps app supports, including subway routes, hiking trails or nike paths.
  • Personal VPN: allows your app to create and control a custom system VPN configuration.
  • Network Extensions: lets your app create app-extension based clients for your custom tunneling protocol.
  • Background Modes: UIBackgroundModes specifies that the app provides specific background services and must be allowed to continue running while in background.
  • Inter-App Audio: allows your app to send audio to and receive audio from other Inter-App Audio-enabled apps.
  • Keychain Sharing: allows your app to share passwords from its keychain with other applications made by your Team.
  • Associated Domains: allows your app to associated with a specific domain for specific services such accessing Safari saved passwords and activity continuation.
  • App Groups: allows access to group containers that are shared among multiple related apps, and allow certain additional interprocess communication between the apps.
  • Data Protection: allows applications that work with sensitive user data to take advantage of the built-in encryption available on some devices. When your app designates a specific file as protected, the system stores that file on-disk in an encrypted format.
  • HomeKit: allows your app to interact with HomeKit accessories and create home configurations.
  • HealthKit: allows your application, with user permission, to store and retrieve personal health information.
  • Wireless Accessory Configuration: allows your app to configure MFI Wi-Fi accessories.

The Resource Tags tab

Xcode provides tools for creating and editing tags, adding and deleting the resources that are part of a tag, and specifying when the resources associated with a tag are downloaded by the operating system. Click to resource Tags tab and hit the + button to add on demand tags for your images.


Conclusion

Thanks for reading, the first part of this guide ends here, there's a lot more to say about the tabs of the main Xcode section, so don't miss the second part of this article here!

Don't forget to check out my other tutorials and my portfolio on CodeCanyon as well!

© 2017 cubycode

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)