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.

http://kurrytran.blogspot.com/2013/06/fast-scrolling-customized-uitableviews.html

8 comments:

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!!
Regards!

jrwatter said...

Hi.
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?

Regards

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

GLeonio 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