Monday, December 5, 2022
HomeiOS DevelopmentUse Storyboards to Construct Navigation Controller and UITableView

Use Storyboards to Construct Navigation Controller and UITableView

By now, in case you’ve adopted our tutorials, it’s best to have a fundamental understanding about UITableView and the way to construct a easy app. This week, we’ll speak about one thing new – Storyboards. This is among the most fun options launched in Xcode 4.2 and iOS 5 SDK. It makes your life, as an iOS developer, easier 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 preserve factor easy and concentrate on explaining the idea. So no fancy interface or fairly graphic. We’ll go away the paintings to future tutorials.

Okay, let’s get began.

What’s Navigation Controller?

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

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

Photos App Navigation Controller

An instance of Navigation Controller – Images App

Storyboards Overview

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

With Storyboards, all screens are saved in a single file. This provides you a conceptual overview of the visible illustration for the app and reveals you the way the screens are linked. Xcode offers a built-in editor to structure the Storyboards. You possibly can outline the transition (often known as segues) between varied screens merely utilizing level and click on. This doesn’t imply you don’t want to write down code for the person interface. However Storyboards considerably cut back the quantity of code that you must write. Here’s a pattern screenshot to point out you the way Storyboards appear to be 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 widespread kinds of transition.

Creating Navigation Controller in Storyboards

Now let’s get our palms 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 following display exhibiting the main points. It’ll be straightforward.

First, fireplace up Xcode (be sure you’re utilizing 4.2 or up) and create a brand new challenge utilizing “Single View software” template.

Choose Xcode Template

Xcode Undertaking Template Choice

Click on “Subsequent” to proceed. In reference to the beneath determine, fill in all of the required values for the Xcode challenge. Be sure you permits the “Use Storyboards” choice.

RecipeBook Xcode Project

RecipeBook Xcode Undertaking

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

You might discover there’s a minor distinction within the Xcode challenge, 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 a typical 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 to be this:

Storyboard Added with Navigation Controller

Embedded View Controller with Navigation Controller

Earlier than shifting on, let’s run the app and see the way it seems. Hit the “Run” button and it’s best to get an app with a clean view however added with a navigation bar. This reveals 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 be aware you possibly can’t drag stuff when the editor is zoomed out. If you happen to can’t drag the desk view into the view controller, zoom in and check out once more.

Storyboard Add Table View

Add Desk View to Recipe Guide View Controller

The subsequent factor we have now to do is to write down code to populate the desk information (i.e. recipes). In Undertaking Navigator, choose “RecipeBookViewController.h”. Append “” after “UIViewController”. Your code ought to appear to be beneath:

If you happen to’ve learn our Easy Desk tutorial, you have to be very conversant in the code. I’ll not clarify the code in particulars. If you happen to discover it tough to comply with, take a look at our earlier tutorial.

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

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

Lastly, we have now to implement two datasource strategies to populate the desk information: “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 methodology is used to tell the desk view what number of rows are within the part, whereas the second methodology is used to fill the cell information. So let’s add the beneath code.

On your reference, that is the whole supply code of “RecipeBookViewController.m”.

Lastly, we have now to determine 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 to be this:

Storyboard TableView Datasource

Join Desk View with Datasource and Delegate

Launch each buttons and a pop-up reveals each “dataSource” & “delegate”. Choose “dataSource” to make a connection between the Desk View and its information 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 very last 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” underneath “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, it’s best to find yourself with an app displaying an inventory of recipes. The app needs to be similar to the Easy Desk app you’ve constructed earlier than. Right here, the foremost distinction is it’s embedded in a Navigation Controller.

Storyboard Navigation Bar Title

Easy Desk App with Navigation Bar

Introducing Prototype Cell

Do you bear in mind how we customise the desk cell? A number of weeks in the past, we confirmed you the way to design your personal customized desk cell utilizing Interface Builder. Briefly, that you must 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 easier to create a customized cell. Prototype cell permits you to simply design the structure of a desk cell proper within the Storyboard editor.

We won’t 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. Beneath “Attributes Inspector”, change the “Prototype Cells” worth from “0” to “1”. As quickly as you alter the worth, Xcode mechanically reveals you a prototype cell. With a purpose to present you one other desk model, let’s additionally change the “Model” choice from “Plain” to “Group”.

Storyboard Prototype Cell

Including Prototype Cell for Desk View

Subsequent, choose the “Prototype Cell”. It’s best to have the ability to customise the choices of the cell. To show a disclosure indication for every cell, change the “Accent” to “Disclosure Indicator”. It’s essential to outline the Reuse identifier. You possibly can consider this identifier because the cell’s ID. We are able to use it to consult with a selected 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 seems a bit distinction and we’re making progress. We’ve modified the desk model to “Grouped” model 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 reveals the main points of recipe. The element view controller needs to 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 point out you the way to implement navigation controller. We’ll preserve the element view so simple as doable. 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 dimension or sort 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 reveals three kinds 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 to be this:

Storyboard Segue Connection

Storyboard Segue

Now, let’s run the app once more. As you choose any of the recipes, the app reveals the element view controller. Although the element view controller simply reveals 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 at last it involves an finish. I hope you may have a greater understanding about Storyboards and know the way to design your personal navigation controller. Nonetheless, there’s nonetheless one factor left: how are you going to cross the recipe identify from the “Recipe Guide View Controller” to the “Element View Controller”? I’ll go away this to the following tutorial which needs to be printed by the tip of this week.

Storyboards, UITableView and Navigation Controller are the elemental UI components and generally used when constructing iOS apps. So take a while to undergo the tutorial and be sure you have an intensive understanding of the fabric. As at all times, when you’ve got any questions, go away me remark or ask it at our discussion board.

Replace #1: The subsequent tutorial about information 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