Xcode 6 Tutorial: Designing the iOS app layout for barcode inventory app

February 01, 2015

SimpleBarcode : An app for inventory management

In January we learned how to build a Yik Yak Clone. This month we will be learning on how to build a simple barcode inventory app, and in doing so we will be learning about AVFoundation and Core Data which are some of the most important frameworks in iOS ecosystem. I have already put out the the first part of the tutorial which will help in implementing the barcode scanning functionality AVFoundation : Implementing barcode scanning in iOS8 with Swift if you haven’t completed that section I suggest you to complete it before going further.

Lets take a look at a few of the barcode scanning applications people are looking for and willing to pay you for that. So if you are planning to make some money building apps or just want to learn about iOS you are in the right place.

I am not saying that we will be building those apps. But we will be learning concepts which are necessary to build those applications. You might even ask why I am not building them myself. Its a valid question and at this point my focus is on different stuff.

So lets get started in building the app layout using Xcode 6 and interface builder. So if you have completed the first part there is only one blank view controller and nothing else. For this app we will build a simple tab bar application with two tabs . One tab for barcode scanning and the other one is for listing the inventory.

This would be the initial state

Select the view controller and embed in a tabbar controller also select the view controller and embed in navigation bar controller

If you want to watch a video instead of following these steps you are free to do so.

Drag a UITableViewController from the object library onto the main storyboard and arrange as show below

CTRL+Drag from the tab bar controller to navigation controller and in relationship segue select view controller.

At this point this should be the state of the main storyboard.

Drag a uiview from the object library onto the bar code scanning view controller. Change the background to light gray. Align the uiview to the bottom of the viewcontroller. And set the constraints as display below.

Drag 2 uibuttons on the uiview and change the lable to Get Details and Add to inventory. Also select the uibutton and set the constraints by clicking align icon and vertical center in the container.

Select the Get Detail button and set the constraints as below.

Select the Add to inventory button and set the constraints as below.