[ad_1]
By now, should you’ve adopted our tutorials, you need to have a fundamental understanding about UITableView and how one can construct a easy app. This week, we’ll speak about 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 consumer interface of your iOS app.
On this tutorial, we’ll present you how one can use Storyboards to construct a Navigation interface and combine it with UITableView. We attempt to hold factor easy and deal with explaining the idea. So no fancy interface or fairly graphic. We’ll go away the art work to future tutorials.
Okay, let’s get began.
What’s Navigation Controller?
Earlier than we transfer onto the coding half, as regular, let’s have a short 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 Pictures 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 many of the apps. This doesn’t imply it’s important to use each collectively, nonetheless.
An instance of Navigation Controller – Pictures App
Storyboards Overview
Storyboard, as talked about earlier, is a brand new characteristic out there because the launch of Xcode 4.2. It provides a whole new method for iOS developer to create and design consumer interface. Earlier than the introduction of Storyboard, it’s particularly onerous for newbie to create navigation (and tab) interface. Each interface is saved in a separate nib file. On prime of it, it’s important 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 offers 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’ll be able to outline the transition (generally known as segues) between varied screens merely utilizing level and click on. This doesn’t imply you do not want to jot down code for the consumer interface. However Storyboards considerably cut back the quantity of code it is advisable write. Here’s a pattern screenshot to point out you the way Storyboards appear like in Xcode.
Storyboards – Scene and Segue
Scene and Segues
When working with Storyboards, Scene and Segues are two phrases you all the time 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 varieties 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 a listing of recipes. When customers choose any of the recipe, the app navigates to the following display screen displaying the small print. It’ll be straightforward.
First, hearth up Xcode (ensure you’re utilizing 4.2 or up) and create a brand new mission utilizing “Single View utility” 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 permits the “Use Storyboards” choice.
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 could 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
By default, Xcode creates a regular view controller. As we’ll use navigation controller to manage the display screen 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”.
Embed View Controller in Navigation Controller
Xcode robotically embeds the RecipeBook View Controller with Navigation Controller. Your display screen ought to appear like this:
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 reveals you’ve efficiently embed your RecipeBook View Controller in a Navigation Controller.
Recipe E book App with Empty View Controller
Including Desk View for Your Information
Subsequent, we’ll add a desk view for displaying our recipes. Choose “Desk View” in Object Library and drag it into “Recipe E book View Controller”.
Please observe you may’t drag stuff when the editor is zoomed out. In case you can’t drag the desk view into the view controller, zoom in and take a look at once more.
Add Desk View to Recipe E book View Controller
The subsequent factor we now have to do is to jot down code to populate the desk knowledge (i.e. recipes). In Mission Navigator, choose “RecipeBookViewController.h”. Append “
|
#import <UIKit/UIKit.h>
@interface RecipeBookViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
@finish |
Subsequent, choose “RecipeBookViewController.m” and outline an occasion variable (i.e. recipes array) for holding the desk knowledge.
|
@implementation RecipeBookViewController { NSArray *recipes; } |
Within the “viewDidLoad” technique, add the next code to initialize the “recipes” array:
|
– (void)viewDidLoad { [super viewDidLoad]; // Initialize desk knowledge recipes = [NSArray arrayWithObjects:@”Egg Benedict”, @”Mushroom Risotto”, @”Full Breakfast”, @”Hamburger”, @”Ham and Egg Sandwich”, @”Creme Brelee”, @”White Chocolate Donut”, @”Starbucks Coffee”, @”Vegetable Curry”, @”Instant Noodle with Egg”, @”Noodle with BBQ Pork”, @”Japanese Noodle with Pork”, @”Green Tea”, @”Thai Shrimp Cake”, @”Angry Birds Cake”, @”Ham and Cheese Panini”, nil]; } |
Lastly, we now have 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 necessary 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)part { return [recipes count]; }
– (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *simpleTableIdentifier = @”RecipeCell”;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier]; }
cell.textLabel.textual content = [recipes objectAtIndex:indexPath.row]; return cell; } |
On your reference, that is the entire supply code of “RecipeBookViewController.m”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
// // RecipeBookViewController.m // RecipeBook // // Created by Simon Ng on 14/6/12. // Copyright (c) 2012 Appcoda. All rights reserved. //
#import “RecipeBookViewController.h”
@interface RecipeBookViewController ()
@finish
@implementation RecipeBookViewController { NSArray *recipes; }
– (void)viewDidLoad { [super viewDidLoad]; // Initialize desk knowledge recipes = [NSArray arrayWithObjects:@”Egg Benedict”, @”Mushroom Risotto”, @”Full Breakfast”, @”Hamburger”, @”Ham and Egg Sandwich”, @”Creme Brelee”, @”White Chocolate Donut”, @”Starbucks Coffee”, @”Vegetable Curry”, @”Instant Noodle with Egg”, @”Noodle with BBQ Pork”, @”Japanese Noodle with Pork”, @”Green Tea”, @”Thai Shrimp Cake”, @”Angry Birds Cake”, @”Ham and Cheese Panini”, nil]; }
– (void)viewDidUnload { [super viewDidUnload]; // Launch any retained subviews of the primary view. }
– (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown); }
– (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)part { return [recipes count]; }
– (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *simpleTableIdentifier = @”RecipeCell”;
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier]; }
cell.textLabel.textual content = [recipes objectAtIndex:indexPath.row]; return cell; }
@finish |
Lastly, we now have 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 screen ought to appear like this:
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 knowledge supply. Repeat the above steps and make a reference to the delegate.
Datasource and Delegate Retailers
Earlier than we check out the app, one last item to do is add a title for the navigation bar. Merely choose the navigation bar of “Recipe E book 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.
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 a listing of recipes. The app ought to be similar to the Easy Desk app you’ve constructed earlier than. Right here, the most important distinction is it’s embedded in a Navigation Controller.
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 how one can design your personal customized desk cell utilizing Interface Builder. Briefly, it is advisable 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 lets you simply design the structure of a desk cell proper within the Storyboard editor.
We is not going to go into the small print 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 robotically reveals you a prototype cell. As a way to present you one other desk type, let’s additionally change the “Model” choice from “Plain” to “Group”.
Including Prototype Cell for Desk View
Subsequent, choose the “Prototype Cell”. You need to 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 necessary to outline the Reuse identifier. You’ll be able to consider this identifier because the cell’s ID. We are able to use it to confer with a selected prototype cell. Right here, we outline the identifier as “RecipeCell” that matches with our code.
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.
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 small print of recipe. The element view controller ought to be displayed when consumer faucets on any of the recipes.
Okay, let’s add a brand new View Controller because the element view controller.
Add a New View Controller
The first objective of this tutorial is to point out you how one can implement navigation controller. We’ll hold the element view so simple as potential. Let’s only a label displaying the recipe title. Drag the label from Object library and place it on the middle of the view. You could change the font measurement 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.
Join Each Scenes with Segue
Launch each buttons and a pop-up reveals three varieties of Segues (push, modal and customized).
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 robotically connects each scenes with Push segue. Your display screen ought to appear like this:
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 Element Controller
What’s Coming Subsequent?
It is a prolonged tutorial and eventually it involves an finish. I hope you may have a greater understanding about Storyboards and know how one can design your personal navigation controller. Nevertheless, there’s nonetheless one factor left: how will you go the recipe title from the “Recipe E book View Controller” to the “Element View Controller”? I’ll go away this to the following tutorial which ought to be revealed 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 ensure you have a radical understanding of the fabric. As all the time, when you have any questions, go away 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 total supply code in your reference.
[ad_2]
