BookShelf – Build an iOS 9 app with Swift 2 – Part 1

iOS is one of the most successful mobile operating systems in the world. Its success, along with the rise of smartphones, represented a major change on the software development market, due to the high demand of mobile apps. This forced many developers to adjust and learn, if they didn’t know already, new programming languages like Java, Objective-C and Swift.

While Java and Objective-C aren’t exactly new languages, Swift is Apple’s “newborn baby”, and it was released in 2014, after 4 years of development with the sole purpose of being an alternative to the Objective-C language that employs modern programming-language theory concepts and strives to present a simpler syntax.

In this series I’ll be guiding you through the process of developing a simple app for iOS 9 with Swift 2.2.

Before we begin

The application we’re gonna build it’s called BookShelf and its sole purpose is to help you keep an eye on your book collection, hence the very original name and the subtitle.

Although it’s not a complex app I decided to split this tutorial in multiple parts since we will have a lot of code to write and a lot of screenshots and this should make it easier to follow up. And also because I’ll be writing this app as we go, meaning at the end of every part you’ll have everything I have, not a bit less. Also, this means this app created using only the IDE (Xcode) and that there is no mock up.

The reason I decided to go directly for iOS 9+ and not iOS 8+ is because as of May 9, 2016 iOS 9 is reported to be used by almost 85% App Store users. And since everyone keeps their phone closer than they keep their iPad, making it easier to see the upgrade notifications, it’s fair to assume that more than 85% of the iPhone users use iOS 9.

However, whenever you build a real-life application, the best practice is to make sure you know exactly what your target audience is. If you are planing on pushing your app to AppStore, you can easily check the official App Store support page for more recent updates and how to set up your AppStore account.

This being said, before we start setting up the project, I’d like to establish a short guideline and the pre-requirements for this series.

Since this is an intro in iOS app development, I will try to keep things as simple as possible, assuming you’re new to this and probably new to software development. I will also try to explain general concepts as well as language-specific features. However, this is not an introduction in software development or Swift so I will also add links and references for further reading whenever I feel it’s right. A very good place to start with Swift is the official The Swift Programming Language (Swift 2.2). For any other questions, suggestions, corrections etc. you can use the comment section below and I’ll see how I can help.

To be able to start developing iOS apps, we’ll be needing:

• An OSX installation / Mac
• At least Xcode 7.3 (this comes with Swift 2.2)
• The iOS 9.3 emulator (you can install emulators for iOS 8.1 – 9.2 emulator from Xcode > Preferences > Components tab)

For this app I also used:

• MakeAppIcon – helps you generate the app icon
• FlatUIColors – the basic set of flat-style colors. The colors I decided to use for this app are:
  • #ECF0F1 – app background
  • #76C4B0 – button background
  • #505E73 – button text
• Ubuntu Font Family – iOS 9 as well as OSX El Capitan use San Francisco as the default system font which is an optimized version of Helvetica Neue. However, I decided to go for Ubuntu since it has a very distinctive look and feel and because I’ll be talking about custom app fonts.
• Modern UI Icon Set – iOS Modern UI icon set
• An image editor for resizing and changing the color of icons
• TinyPNG – if, for any reason, you feel like reducing the size of your app

For more goodies, you can visit our ultimate list of free resources.

I will also try to take the iOS design guidelines into account but you should take a look at the iOS Human Interface Guidelines since these, along side the App Store Review Guidelines, are essential if you wan’t to publish your app on App Store.

Setting up the project

Creating the project

The first thing we need to do is to create the application project. This is the main container that will keep all the assets, settings and code file together.

To do this we need to fire up Xcode and to go  File > New > Project. The same can be accomplished  by selecting the Create a new Xcode project option from the Xcode launcher, if it is availiable or by pressing Shift + Command + N.

This will open up the template selection screen. From here you can chose from a variety of standard blank templates for iOS, OSX, watchOS and tvOS.

Our application will start with a loading screen and it will display one simple view at a time so the best choice in this case is Single View Application. Select it and click Next to go to Options screen.

In the Option screen you must set up the set up a few more details for your app.

• The Product Name is the name users will see in App Store and when they install the app. This should also be the name of the app in iTunes Connect.
• The Organization Name is the name of your organization / company. It can also be your own name if you are a freelancer.
• The Organization Identifier is used to identify the organization / company in App Store so this should be unique. This is usually your reverse domain but it can be anything you want as long as you use it for all your apps and it’s complex enough to prevent duplication.
• The Bundle Identifier is a string that is generated by concatenating the Organization Identifier and the Product Name and it must be unique since this is used to identify the application in App Store enables it to connect to various Apple services.
• Language and Device allow you to select the desired language (Objective-C and Swift) and to set the target device. You can choose between iPhone, iPad and Universal. For now we’ll stick to iPhone.
• The Unit Tests and UI Tests options enable different testing option and features. While we’re not getting into details about these options, it’s best to check them out.
• Core Data is a framework that you use to manage the model layer objects in your application. We’re not gonna use it so leave it unchecked. If you’d like, you can read more about it here.

After filling in all the fields, click Next and save the project.

Customizing the project and the application settings

Now that we saved our project, Xcode should open it with the Project Navigator () opened to the left side of the screen and the project root selected. The middle section should display the Target () > General tab. If it doesn’t, click the tab to select it.

Here we have all the informations we set up in the previous screens as well as all the project and app settings.

Since BookShelf is an iOS 9 application, we should make sure the Deployment Target is set to 9.0 and that iPhone is selected under Devices. We should also make sure that we have a storyboard selected in the Main Interface dropdown box. By default, there are only 2 storyboard available when we create a project: Main.storyboard, which is the application storyboard, where we will create all our View Controllers and LaunchScreen.storyboard, which is the default launch screen.  However, just to make sure, you can check for all .storyboard files in the Project Navigator ().

As I mentioned before, our application is designed for iPhone only and we will be using it in full screen Portrait mode. So we need to make sure the Device Orientation is set to Portrait, the Status bar style is set to default and the Hide status bar and Requires full screen options are both selected. When this is all done, we can switch to Info tab.

Here we must add a new entry under Custom iOS Target Properties to disable the Status Bar for all View Controllers: View controller-based status bar appearance. This must be of type Boolean and must be set to NO.

We should also make sure that the Status bar is initially hidden of Type Boolean exists and it’s set to YES. This value is added automatically when we check the Hide status bar and Requires full screen options mentioned above. If by any change this option is not there, it should be added manually.

Then wee need to switch to the Build Settings tab. Here we must select the Basic and the Combined tabs to trim down the list. Then we need to expand Deployment and under this we need to expand the iOS Deployment Target list and to make sure it’s set to iOS 9.0. If not, we need to set it manually.

Organizing the project

At this point our project should be fully configured to run in full screen on iOS 9 so before we go any further I’d like to talk about how our project is organized. It’s OK if you’re not familiar with the concepts mentioned here, I’ll explain everything when we start the actual cool stuff.

iOS is designed to take advantage of the MVC architecture. This means for every View (the user interface) we will have at least one View Controller. Along side these files, every object oriented application will also have the Models (the custom data classes), icons, fonts etc. so it’s best to organize your projects properly.

For BookShelf, I decided to use the MVVM architectural pattern instead of MVC, so this will add an extra file representing the ViewModel.

Xcode allows us to group the files however we see fit. Unfortunately creating a group in Xcode does not create an actual folder so you’ll have to manually create the folders you want and the corresponding Xcode group.

My ideal way of organizing a MVVM application can be seen in the screenshots below.

Adding images and setting up the application icon – xcassets vs. image files

Now that we have established a folder structure for our project, we can start importing resources. The first resource everyone will most likely add is the application icon.

Xcode offers 2 ways of adding images to a project: you can either add the actual image or add a new image set to the project’s Assets.xcassets. When you add an image you need to take into consideration the resolution of the device the app will run on if you want the images to look the same on every iPhone version. This means you will have to add the same image for multiple resolutions. For example, if you want to add a image called UserDefaultAvatar of 300px X 300px to use in a universal application, you will actually have to add 3 images:

• UserDefaultAvatar~iphone@1x of 100px X 100px
• UserDefaultAvatar~iphone@2x of 200px X 200px
• UserDefaultAvatar~iphone@3x of 300px X 300px

So you’ll actually have to keep an eye on a resolution table to make sure you get them right.

A better alternative is the use of .xcassets . At its core, this is nothing more than a folder that contains folders, each of them containing a single set of images along side a JSON file that contains, for each file in that folder, the name, resolution, scale and device.

This will not automatically scale all your files so you will still have to do it yourself. However, if you open the Assets.xcassets in Xcode and select the desired image set, you will be offered the possibility to decide what devices and iOS version you will be targeting. After that, you will see a list of empty squares along side the scale of the image that needs to be placed there. Clicking on any of those will show you the resolution. From this point on, all you need to do is to drag the appropriate image into the designated square and Xcode will do the rest.

Here’s how the Contents.json file looks for our application icon.

Adding custom fonts

iOS comes with a variety of fonts (you can checked them all here) and Apple suggests that every developer should use the system fonts to keep the same look and feel as the operating system. However, there are many situations where you might want to use your own custom fonts.

To do so, we first have to add them to our project. Go to the Resources folder and create a new folder called Fonts. If you haven’t done so already, download the Ubuntu Font Family and copy all fonts to the new folder.

Then, right click on the Resources group and click Add new group to create a group called Fonts. We can also create a folder for each font family if we’re planing on using more than one but it’s OK if we put them all together. Right click on it and click Add new files. Navigate to the previously created Fonts folder and select all the fonts inside to add them to our project.

After this, select the project root and switch to the Info tab. Here we need to add a new Array key named Fonts provided by application. Then, for every font file, add a new String under the newly created Array key and add the font name, including its extension.

When we are done adding all our fonts, switch to the Build Phase tab. If all went well, we should see all our fonts under Copy Bundle Resources, along side the Assets.xcassets and the main storyboard.

To double check, we will print all the fonts available for our application.

In the Project Navigator (), click on AppDelegate.swift and search for the function below. This is usually the first function in AppDelegate.

Once we found our function we need to add the following code before return true:

Before we can run our application we need to select an Simulator to run it on. Depending on what Xcode version we have installed, we should already see a selected simulator. I want however to use the iPhone 6 simulator running iOS 9.3. Click on the button next to the application icon and name and a list of all installed simulators will show up.

After selecting the desired simulator, click on the Run(  ) button . This will build and then run the application.

Since our application has only the default launch screen and the default ViewController, it will only display a white screen. However, it should display all the installed fonts, including the Ubuntu Font Family, in the console. If it does, it’s time to create our Launch Screen.

Creating the application Launch Screen

The Launch Screen is the screen iOS displays while loading the application and all the necessary resources. It is created when we create the project, there is no way to remove it and it can be an image, a xib file or, in iOS 9, a storyboard. If we do not create our own custom screen, iOS will display an empty black or a white, something Apple doesn’t seem to like.

Apple’s iOS Human Interface Guidelines suggests that the Launch Screen should be used for branding and therefore it should be simple enough and easy to recognize if you want your app on App Store.

Now that we came to the conclusion the launch screen is mandatory, let’s get started.

First thing we need to do is to create the image set we’ll be using as a logo for our application. Click on the Assets.xcassets to open it up. Here we need to click on the + button and then select the New Image Set option. After the new empty image set is created, select it and then select the Attributes Inspector() tab in the right pane. Set the name if the image set to SplashScreenImage, under the Image Set category and then make sure you check iOS and uncheck any other selected option in the Devices category.

Now we need 3 images:

• SplashScreenImage~iphone@1x – 255px X 235px
• SplashScreenImage~iphone@2x – 510px X 469px
• SplashScreenImage~iphone@3x – 765px X 703px

Download the application logo from [here] and drag-n-drop the images into the SplashScreenImage image set based on the multiplier displayed in the image name and under the image placeholder.

You’ll notice the logo image also contains text. There are 2 main reasons for this. First, Apple does not recommend the usage of any sort of text fields in a launch screen. The second one has to do with the way iOS loads the fonts. We decided earlier that we will be using custom fonts for our application so we added them to our project, along side other resources. However, the launch screen is a screen that hides the application loading process. This means the moment the launch screen shows up, there is no resource available and this also includes our fonts. So if we want to use text in a launch screen we will have to use the default system font, something that is not very wise since we already established that the launch screen is usually used for application branding.

Head over to Project Navigator () and click on LaunchScreen.storyboard. From here, click on the default view (named View) under View Controller Scene > View Controller. The View Controller Scene is the scene that holds the default View Controller for every screen we want to add to our application. By default, each View Controller holds one view that we can use to add the desired graphical elements.

In the Attributes Inspector() click on the Background option and select Other. This will open up the Colors pop up. Set #ECF0F1 as the Hex Color and close it.

From the bottom-right pane, select the Object Library() tab and search for an Image View,  drag it to your main view then select the Size Inspector() in the upper-right pane.  We want our logo image to be centered so we need to do a little math here.

In Xcode, every storyboard scene has 600px X 600px. When we created our image set, the image with the smallest resolution was 255px X 235px. So to center the image we need to set the X and Y to  172 X 182 and the Width and Height to 255 X 235. However, since no Apple devices has 600px X 600px, we cannot work only with absolute values because there is nothing from keeping the element in that position. So we’re gonna need to use the Auto Layout and constraints to keep it in place.

Before we start setting up the constraints, we need to add an image to the Image View so that we can actually see what’s happening. Since we already set up the size and position in the Size Inspector(), switch over to theAttributes Inspector() and in the Image text field, under Image View, type the name of the image set we created earlier, SplashScreenImage.

Now we need to make sure the ImageView is centered and will keep its position at all times.

Click on the Align() button in the mid-right bottom side and in the tooltip that shows up check Horizontally in Container and Vertically in Container. This will set the ImageView to the center of the View Controller.

The next thing we need to do is make sure the ImageView will always have the same size. For this we have to set constraints for width and height.

There are 2 ways to do this.

First, we can click the Pin() button, next to Align() and check Width and Height in the tooltip that shows up. We also need to make sure the values for Width and Height are the same as the ImageView values.

The second way to do this is to select your ImageView the View Controller Scene, hold Ctrl and drag to your ImageView on your Storyboard scene and release.

After releasing, a tooltip menu will show up. Hold Shift and select Width and Height then click on Add Constraints.

When we are done, we will notice all our constraints show up in Size Inspector, under Constraints, as it can be seen in the image above.

The final step is to test the application.

Since a Launch Screen only shows up for a little time, lets alter it a bit to make stay visible for a longer time.

Go to AppDelegate and in the same function we added the function that checks up all installed fonts add the following line:

This should keep the Launch Screen on for 60 seconds.

Now if we click on the Run(  ) button we should see the Launch Screen with the ImageView centered and set to 255px X 235px.

Conclusion

Initially, I wanted to go into the actual app development in this tutorial but I was a surprised to see that an article explaining a 10 – 15 minutes task can be so long so I decided to go with the Launch Screen only for now.

I also wanted to show and explain some basic Storyboard concepts, enough to get everyone started, even though I don’t consider this series an introduction into Swift.

There is a lot to read on Storyboard, AutoLayout and Constraints and things can get a bit complex when we create complex UIs with complex interactions but I trust the info presented here, along side with the links and references, can get anyone started into iOS app development.

I also hope I managed to keep everything as clean, simple and easy to understand as I originally intended. If not, you can always use the comment section for clarifications, suggestions and corrections.

What’s next?

In the next part we will create a local signup and login system, a loading screen and we will talk about storing data using NSUserDefaults and about segues and moving from one View Controller to another.

 

Download source files