Storyboards in Xcode—Pt.1
Written by: Tripti Kumar, Engineer Manager, TribalScale
📫 Subscribe to receive our content here.
💬 Have any questions about our development capabilities? Click here to chat with one of our experts!
Storyboards in Xcode need no introduction at all!! If you’re more of a visual person and less of a creating UI through coding type of person, then this is the right place for you folks!! :)
Something I have learnt along the way is that there is no right way of creating a UI. You will find there are many pros and cons of using storyboards.
Pros:
- Visualization: Ooh.. let’s think about the idea of having all UI in one file. Just drag and drop and Voila!! WYSIWYG
Cons:
- For multiple developer team, there can be merge conflicts and problem with code reviews.
Continue reading if this has still kept you interested till now…
Final Output
Our final output would be as below:
Let’s start without further adieu…
1. Preparing the base layout of Storyboard
Here’s the complete storyboard layout:
The first and foremost step is to define an Initial View Controller. This would be the entry point of the application at run time. In this tutorial, it would be a Tab Bar Controller. Select the option on left hand: is Initial View Controller. There’ll be an arrow pointing to the Tab Bar Controller as you can see below:
Next step would be to add 3 Navigation View Controllers as child view controllers. The Navigation View Controllers will each have a View Controller as their child view controller. We’ll name the child view controller as ‘Feed’ , ‘Profile’ and ‘Albums’.
2. Designing the child views
Let’s start with designing our first view which is the Feed view (UIViewController). Furthermore, we’ll add an UIImageView at the top and add a container view at the bottom. You’ll shortly see why. I have set a specific Height, Width, Top and Aligned Center X to Superview. You can set it to whatever you like. I have also added a pretty anime image to the UIImageView.
Now adding a container view will automatically add a new view controller and a segue pointing towards it. Set the underlying class of this new VC to TableViewController. For the purpose of this tutorial, I have set the Content to Static Cells with 1 Section. Also I have added 3 rows with few lovely comments. Feel free to experiment with a dynamic table or with some other types of views.
When running the app, now you’ll see following output:
Congratulations on designing your first purely UI based screen with relevant data. See you in next tutorial for the next two screens. To be continued…
Tripti is a curious techie and a philomath, working at TribalScale as an Agile Software Engineer. A big fan of “How I can” rather than an “If I can” mindset. She spends her time caring for plants and pets, doing yoga and meditation, and volunteering for Isha Foundation.
TribalScale is a global innovation firm that helps enterprises adapt and thrive in the digital era. We transform teams and processes, build best-in-class digital products, and create disruptive startups. Learn more about us on our website. Connect with us on Twitter, LinkedIn & Facebook!
