Xcode 6 Tutorial: Designing the iOS app layout for barcode inventory app
Shrikar Archak / February 01, 2015
4 min read
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.
- IOS app for order tracking
- Create an IPhone app for IOS 8 for textbook price checking
- Inventory Tracking
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.
Get Detail button and set the constraints as below.
Add to inventory button and set the constraints as below.