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

Shrikar Archak / February 01, 2015

4 min read

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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.

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

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

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

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

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

Shrikar Archak

@shrikar84

IndieHacker and Software Developer. Getting started to build in public.Tweet me @shrikar84 for any collaboration opportunity or brainstorming.

#developer#ml-engineer#seo

Subscribe to the newsletter

Get notified when new content or topic is released.

You won't receive any spam! ✌️