Barcode Scanner iOS Swift Tutorial iOS8 Xcode App Design

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

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

images

 

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

images

 

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

images

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

images

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

images

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

images

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.
images

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.
images

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

 

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

About the author

Shrikar

Backend/Infrastructure Engineer by Day. iOS Developer for the rest of the time.

/* ]]> */