Tuesday, October 25, 2011

iOS 5 Storyboard + UITableView Tutorial II (Improved)

Since I'm learning as well and have been reading other people's tutorials that I thought were not very good (because they either had too much clutter or did not stress the important points) I thought I would make another tutorial on the key ideas of UITableViews that I missed out on before.

Download Project: here.
1. Create a new Tabbed Application called StoryboardUITableView.

2. In the MainStoryboard file look at the attribute inspector and you will see the checkbox for Is Initial View Controller.

Common Error: Not having set an initial view controller. The simulator will popup and then just be in a deadlock and in the output log, it will say something about how your application doesn't not have a root view controller.

3. Embed a navigation controller in the first view by going to Editor > Embed In > Navigation Controller.

Note: If you delete the connection, and then control+drag from the Tab Bar Controller you will see the following in the image below. You can set the initial scene to be the first view controller by control + dragging as described before and then selecting Relationship - viewControllers. This creates a connection between the Tab Bar Controller and and Navigation Controller.

4. Suppose I create a tableview by drag and dropping it a UITableViewController, I can customize the cells in the right panel.

Key Points:

Style: Change Style of UITableViewCell
Identifier: Cell Identifier to Distinguish Prototype Cells
Accessory: The Creates The Right Facing Arrow
Size: Resize the cell by dragging it up or down.

Note: Ignore the left half of the screenshot since I made an error the first time.

5. Create a new UITableViewController called AlbumViewController and select the table view controller and change its class to AlbumViewController .

6. Suppose I created a datasource in the AppDelegate.m file and I follow the usual steps to populate the tableview. The one interesting change is here: tableview cells are now automatically allocated so the code is much simpler than before. In the AlbumViewController.m file implement the usual methods.

 (Note: Copy and paste them from the source file in the download.)

7. Change this method and you can then slide to delete a tableview cell.

8. Run and project and it will turn out like this.

Download Project: here.



Catacomber said...

Thank you for this very clear tutorial. It helped me get up and running with storyboards. Do you plan to do a tutorial on the next step? Filling the detail pane if you click on one of the rows?

I don't know where to put the information to fill the label on my detail view. I can connect the detail view but not fill it yet.

Used to do this before ios5 when I pushed the detail view in this section--
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

Thanks again for your wonderful tutorials.

Dario Gutierrez said...

Dude all your tuts are amazing!! I have a same problem with the DetailViewController, I'm trying to use this code but I can't load the information:

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{

DetailViewController *detail = [self.storyboard instantiateViewControllerWithIdentifier:@"detail"];
//datasource miss :(
[self.navigationController pushViewController:detail animated:YES];


I already declare a new variable to show some info at the DetailViewController:
album1.bio = @"bio info";
album2.bio = @"bio info";
album3.bio = @"bio info";
album4.bio = @"bio info";
album5.bio = @"bio info";

Thanks for your help and time!!

jrwatter said...

Your tutorial helped me a lot but now I don't know how to link the rows to new views.
Can you show it on next tutorial or just update it at least to one new view?


Mayank Mahajan said...

Really helpful tutorial... Just starting with iOS development and this was just the sort of thing I needed.

sev said...

Thank you so much for this very structured and easy-to-understand tutorial!

Shayne O said...

I'm still confused as hell as to where the Outlets etc for the table cell are. even grepping the code doesnt tell me where the cell's members are defined :(

jimi said...

Job fit done guys, wellborn content. the ipad

Anonymous said...

Hi Kurry, thank you for this! I found is very helpful. I compiled a list of some top resources I found around this topic, and included your post. http://www.verious.com/board/Giancarlo-Leonio/creating-custom-table-view-cells-with-xcode-storyboard/

Thank you

Reachsey said...

Nice article! I read your blog occasionally and i own a similar one and i have some good articles to read:
Feel fгee to visit my Page: Top Portal Review
Top 10 Best Swingline Staplers in 2015 Reviews
Top 10 Best Himalayan Salt Lamps In 2015 Reviews
Top 10 Best Drone Quadcopter With HD Camera To Buy In 2015 Reviews
Top 10 Best Drum Sets For Beginners And Professionals In 2015 Reviews
Top 10 Best Jump Starters in 2015 Reviews
Top 10 Best Decorative Pillows Cover In 2015 Reviews
Top 10 Best Fire Extinguishers In 2015 Reviews
Top 10 Best Hair Clippers For Men In 2015 Reviews
Top 10 Best Adjustable Benches Weight Training In 2015 Reviews
Top 10 Best Pillow Toy Dolls For Kids And Adults In 2015 Reviews
Top 10 Best GoPro Smart Remote In 2015 Reviews
Top 10 Best Resistance Bands In 2015 Reviews

Antonio Vron said...

Thank you for so much useful content. Visit also this link where you can find many interesting information.

Hank Steve said...

HP printer is a leading product of HP brand used globally with several features. You might face some technical errors while using it, and to resolve the errors, you can get the help from HP printer Technical Support Number +1-870-345-4464 where certified technicians will assist you in determining the query within no time.
HP Printer Technical support number
hp printer tech support number
HP Printer technical support phone number USA