Friday, December 2, 2022
HomeiOS DevelopmentUse Storyboards to Construct Navigation Controller and UITableView

Use Storyboards to Construct Navigation Controller and UITableView

By now, if you happen to’ve adopted our tutorials, you need to have a fundamental understanding about UITableView and the way to construct a easy app. This week, we’ll discuss one thing new – Storyboards. This is likely one of the most fun options launched in Xcode 4.2 and iOS 5 SDK. It makes your life, as an iOS developer, less complicated and allows you to simply design the person interface of your iOS app.

On this tutorial, we’ll present you the way to use Storyboards to construct a Navigation interface and combine it with UITableView. We attempt to maintain factor easy and give attention to explaining the idea. So no fancy interface or fairly graphic. We’ll depart the art work to future tutorials.

Okay, let’s get began.

What’s Navigation Controller?

Earlier than we transfer onto the coding half, as common, let’s have a quick introduction about Navigation Controller and Storyboards.

Like desk view, navigation controller is one other UI ingredient you generally discover in iOS app. It offers a drill-down interface for hierarchical content material. Check out the built-in Photographs app, YouTube, and Contacts. They’re all constructed utilizing Navigation Controller to show hierarchical content material. Often desk view and navigation controller work hand in hand for many of the apps. This doesn’t imply you must use each collectively, nonetheless.

Photos App Navigation Controller

An instance of Navigation Controller – Photographs App

Storyboards Overview

Storyboard, as talked about earlier, is a brand new characteristic out there because the launch of Xcode 4.2. It presents an entire new means for iOS developer to create and design person interface. Earlier than the introduction of Storyboard, it’s particularly laborious for newbie to create navigation (and tab) interface. Each interface is saved in a separate nib file. On prime of it, you must write code to hyperlink all interfaces collectively and describe how the navigation works.

With Storyboards, all screens are saved in a single file. This offers you a conceptual overview of the visible illustration for the app and exhibits you the way the screens are related. Xcode offers a built-in editor to structure the Storyboards. You possibly can outline the transition (referred to as segues) between varied screens merely utilizing level and click on. This doesn’t imply you do not want to put in writing code for the person interface. However Storyboards considerably cut back the quantity of code you could write. Here’s a pattern screenshot to indicate you the way Storyboards appear like in Xcode.

Storyboards Explained

Storyboards – Scene and Segue

Scene and Segues

When working with Storyboards, Scene and Segues are two phrases you at all times come throughout. Inside a Storyboard, a scene refers to a single view controller and its view. Every scene has a dock, which is used primarily to make motion and outlet connections between the view controller and its views.

Segue sits between two scenes and manages the transition between two scenes. Push and Modal are two frequent sorts of transition.

Creating Navigation Controller in Storyboards

Now let’s get our arms soiled and create our personal Storyboards. On this tutorial, we’ll construct a easy app that makes use of each UITableView and UINavigationController. We use the desk view to show an inventory of recipes. When customers choose any of the recipe, the app navigates to the subsequent display exhibiting the main points. It’ll be straightforward.

First, fireplace up Xcode (ensure you’re utilizing 4.2 or up) and create a brand new mission utilizing “Single View utility” template.

Choose Xcode Template

Xcode Mission Template Choice

Click on “Subsequent” to proceed. In reference to the beneath determine, fill in all of the required values for the Xcode mission. Ensure you allows the “Use Storyboards” choice.

RecipeBook Xcode Project

RecipeBook Xcode Mission

Click on “Subsequent” to proceed. Xcode then asks you the place you saves the “SimpleTable” mission. Choose any folder (e.g. Desktop) to avoid wasting your mission.

You might discover there’s a minor distinction within the Xcode mission, as in contrast with these you got here throughout in earlier tutorials. The .xib file (interface builder) is changed with the MainStoryboard.storyboard file.

Default Storyboard in Xcode

Default Storyboard in Xcode

By default, Xcode creates an ordinary view controller. As we’ll use navigation controller to regulate the display navigation, we first change the view controller to navigation controller. Choose the Merely choose “Editor” within the menu and choose “Embed in”, adopted by “Navigation Controller”.

Storyboard Embed in Navigation Controller

Embed View Controller in Navigation Controller

Xcode mechanically embeds the RecipeBook View Controller with Navigation Controller. Your display ought to appear like this:

Storyboard Added with Navigation Controller

Embedded View Controller with Navigation Controller

Earlier than transferring on, let’s run the app and see the way it appears. Hit the “Run” button and you need to get an app with a clean view however added with a navigation bar. This exhibits you’ve efficiently embed your RecipeBook View Controller in a Navigation Controller.

RecipeBookApp Empty

Recipe Guide App with Empty View Controller

Including Desk View for Your Knowledge

Subsequent, we’ll add a desk view for displaying our recipes. Choose “Desk View” in Object Library and drag it into “Recipe Guide View Controller”.

Please word you may’t drag stuff when the editor is zoomed out. In the event you can’t drag the desk view into the view controller, zoom in and take a look at once more.

Storyboard Add Table View

Add Desk View to Recipe Guide View Controller

The following factor we’ve to do is to put in writing code to populate the desk knowledge (i.e. recipes). In Mission Navigator, choose “RecipeBookViewController.h”. Append “” after “UIViewController”. Your code ought to appear like beneath:

In the event you’ve learn our Easy Desk tutorial, you need to be very aware of the code. I’ll not clarify the code in particulars. In the event you discover it troublesome to comply with, try our earlier tutorial.

Subsequent, choose “RecipeBookViewController.m” and outline an occasion variable (i.e. recipes array) for holding the desk knowledge.

Within the “viewDidLoad” technique, add the next code to initialize the “recipes” array:

Lastly, we’ve to implement two datasource strategies to populate the desk knowledge: “tableView:numberOfRowsInSection” and “tableView:cellForRowAtIndexPath”. Recalled that these two strategies are a part of the UITableViewDataSource protocol, it’s obligatory to implement the strategies when configuring a UITableView. The primary technique is used to tell the desk view what number of rows are within the part, whereas the second technique is used to fill the cell knowledge. So let’s add the beneath code.

In your reference, that is the entire supply code of “RecipeBookViewController.m”.

Lastly, we’ve to ascertain the connection between the Desk View and the 2 strategies we simply created. Return to the Storyboard. Press and maintain the Management key in your keyboard, choose the “Desk View” and drag to the View Controller icon. Your display ought to appear like this:

Storyboard TableView Datasource

Join Desk View with Datasource and Delegate

Launch each buttons and a pop-up exhibits each “dataSource” & “delegate”. Choose “dataSource” to make a connection between the Desk View and its knowledge supply. Repeat the above steps and make a reference to the delegate.

Storyboard TableView Connect Datasource

Datasource and Delegate Shops

Earlier than we check out the app, one final thing to do is add a title for the navigation bar. Merely choose the navigation bar of “Recipe Guide View Controller” and fill within the “Title” beneath “Attributes Inspector”. Keep in mind to hit ENTER after keying within the title to effectuate the change.

Storyboard Add Navigation Bar Title

Assign a Title for the Navigation Bar

Now, it’s time to execute your code. Hit the Run button and check out your app. In case your code is right, you need to find yourself with an app displaying an inventory of recipes. The app must be similar to the Easy Desk app you’ve constructed earlier than. Right here, the key distinction is it’s embedded in a Navigation Controller.

Storyboard Navigation Bar Title

Easy Desk App with Navigation Bar

Introducing Prototype Cell

Do you keep in mind how we customise the desk cell? A number of weeks in the past, we confirmed you the way to design your individual customized desk cell utilizing Interface Builder. In short, you could create a separate nib for the cell and programmatically load it within the desk. With the introduction of Prototype Cell in Storyboard, it’s a lot less complicated to create a customized cell. Prototype cell permits you to simply design the structure of a desk cell proper within the Storyboard editor.

We is not going to go into the main points of the customization on this tutorial however simply merely add “Disclosure Indicator” within the cell.

So as to add a prototype cell, choose the Desk View. Below “Attributes Inspector”, change the “Prototype Cells” worth from “0” to “1”. As quickly as you modify the worth, Xcode mechanically exhibits you a prototype cell. With a view to present you one other desk type, let’s additionally change the “Type” choice from “Plain” to “Group”.

Storyboard Prototype Cell

Including Prototype Cell for Desk View

Subsequent, choose the “Prototype Cell”. You must be capable to customise the choices of the cell. To show a disclosure indication for every cell, change the “Accent” to “Disclosure Indicator”. It’s vital to outline the Reuse identifier. You possibly can consider this identifier because the cell’s ID. We will use it to confer with a specific prototype cell. Right here, we outline the identifier as “RecipeCell” that matches with our code.

Storyboard Edit Prototype Cell

Outline Identifier and Accent for Prototype Cell

Now, run the app once more. It appears a bit distinction and we’re making progress. We’ve modified the desk type to “Grouped” type and added the disclosure indicator.

Storyboard Recipe App with Disclosure

Recipe App with Disclosure Indicator

Including Element View Controller

Lastly it involves the final a part of the tutorial. What’s lacking is the element view controller that exhibits the main points of recipe. The element view controller must be displayed when person faucets on any of the recipes.

Okay, let’s add a brand new View Controller because the element view controller.

Storyboard Create Detail View Controller

Add a New View Controller

The first goal of this tutorial is to indicate you the way to implement navigation controller. We’ll maintain the element view so simple as potential. Let’s only a label displaying the recipe identify. Drag the label from Object library and place it on the middle of the view. You might change the font measurement or kind to make the label look higher.

Subsequent, we’ll add a segue to attach the prototype cell and the brand new View Controller. It’s very simple so as to add a segue object. Press and maintain the management key, click on on the prototype cell and drag to the View Controller.

Storyboard Add Segue

Join Each Scenes with Segue

Launch each buttons and a pop-up exhibits three sorts of Segues (push, modal and customized).

Storyboard Segues

Storyboard Segues (Push, Modal and Customized)

As defined earlier than, segue defines the kind of transition between scenes. For normal navigation, we use “Push”. As soon as chosen, Xcode mechanically connects each scenes with Push segue. Your display ought to appear like this:

Storyboard Segue Connection

Storyboard Segue

Now, let’s run the app once more. As you choose any of the recipes, the app exhibits the element view controller. Although the element view controller simply exhibits a label, you already make the navigation work.

Receipe App With Detail Controller

Receipe App With Element Controller

What’s Coming Subsequent?

It is a prolonged tutorial and eventually it involves an finish. I hope you will have a greater understanding about Storyboards and know the way to design your individual navigation controller. Nevertheless, there’s nonetheless one factor left: how will you move the recipe identify from the “Recipe Guide View Controller” to the “Element View Controller”? I’ll depart this to the subsequent tutorial which must be printed by the tip of this week.

Storyboards, UITableView and Navigation Controller are the basic UI parts and generally used when constructing iOS apps. So take a while to undergo the tutorial and ensure you have a radical understanding of the fabric. As at all times, if in case you have any questions, depart me remark or ask it at our discussion board.

Replace #1: The subsequent tutorial about knowledge passing is now out there!

Replace #2: Now you can obtain the complete supply code on your reference.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments