O'Reilly Books Example updated: Show a different image for each book

By Elisabeth Robson
July 12, 2009 | Comments: 27


I got some great feedback on my first screencast - thank you! A few of you asked: how can you show a different view for each of the rows in the table view, instead of just showing the same view for each row?

I can think of a couple of ways to do this. One is to create different view for each row by creating a separate class for each type of view you want to display, and then select the specific view to display in tableview:didSelectRowAtIndexPath: in the BooksTableViewController depending on which row is selected.

As another option, I decided to use the same view, the BookDetailView, but customize the view with a different image for each book. To do this, I created a new model class, BooksModel, and stored the titles of the books, and images for each book in this class. Then, based on the row selected, I set the appropriate image in the view (from tableview:didSelectRowAtIndexPath: when the view controller for the detail view is created) before displaying the view.

Here's a new screencast that expands on the previous O'Reilly Books example. I have also attached the updated code below. I hope this answers your questions, and if you have any feedback, please do leave a comment.

Or, to follow along more closely with the code, Click here to view or download the original high resolution .mov file. [155 Mb]

Update: Here's the downloadable code sample


You might also be interested in:

27 Comments

hi
thanks for this helpful example .

i am asking if i want to view 2 or more images each view that you made gust one image in each view. and to move from one to another by touching and moving ?

thanks agin

This has been a nice pair of tutorials-- thanks much!

A question related to the change from "cell.text" to "cell.textLabel":
Your example has this code:
UILabel *cellLabel = cell.textLabel;
cellLabel.text = [self.booksModel getBookTitleAtIndex:row];

Can one not set the text directly:
cell.textLabel = [self.booksModel getBookTitleAtIndex:row];

Why do you create the intermediate object?

Thanks for any info!
Peter

Peter -
That's a good question - I don't think I needed to create the intermediate object at all. At the time, I probably did it because the cell label was new to me, so I was being really explicit in my thinking about it.

Thanks for the comment!

Elisabeth

Hi Elisabeth!

Loved both tutorials. Really helpful for me in getting past a stubborn sticking point. :) And, you've got a GREAT voice and pace for screencasts. Please do more! Regarding the deprecated text property for cell, I believe the correct syntax (without the need of an intermediate syntax) is:

cell.textLabel.text = [self.booksModel getBookTitleAtIndex:row];

Just using cell.textLabel throws an error for me.

Best ~ Scott

Hi Elizabeth, As a complete novice I've worked though both your screencasts, and found them extremely helpful. One question on the above, though concerns the alternative way of showing a different view depending on which row is selected. You mention:

"One is to create different view for each row by creating a separate class for each type of view you want to display, and then select the specific view to display in tableview:didSelectRowAtIndexPath: in the BooksTableViewController depending on which row is selected."

Can you show me how this might be implemented. I'd list to add different text views rather than picture views.

Thanks for the great tutorials,

kev.

Hi Elizabeth,

I worked out how to do it myself. Here's my code, for those that are interested:

NSInteger row = [indexPath row];
//if (self.introductionViewController == nil)

if([[booksArray objectAtIndex:row] isEqual:@"Introduction"])

{
IntroductionViewController *aBookDetail = [[IntroductionViewController alloc] initWithNibName:@"IntroductionViewController" bundle:nil];
self.introductionViewController = aBookDetail;
[aBookDetail release];
introductionViewController.title = [NSString stringWithFormat:@"%@", [booksArray objectAtIndex:row]];
[self.navigationController pushViewController:introductionViewController animated:YES];
}
else
if([[booksArray objectAtIndex:row] isEqual:@"Is it the vehicle for you"])
{
IsItForYouController *bBookDetail = [[IsItForYouController alloc] initWithNibName:@"IsItForYouController" bundle:nil];
self.isItForYouController = bBookDetail;
[bBookDetail release];
isItForYouController.title = [NSString stringWithFormat:@"%@", [booksArray objectAtIndex:row]];
[self.navigationController pushViewController:isItForYouController animated:YES];
}

etc.
etc.
etc.
etc.
etc.


Kev.

Hi Kevin,

I've tried to put your code in and something is just not adding up in my program (NS Integer part). XCode tells me the second option i'm putting in is 'something not a structure or union and undeclared. What am I missing?

Hi Steve,

Sorry for the delay, I've only just seen your query. Not sure I can be of much help, I'm afraid. However, I would check that you've imported your second item's view .h file and then synthesized its view controller in your table view controller .m file?

#import "SecondItem.h"

@implementation TableViewController
@synthesize seconditemviewcontroller;

and then release it later:

- (void)dealloc {
[SecondItemViewController release];
}

Hope that helps.

Kev.

hi Kevin

just wanted to ask you if you could share your code on how did u manage to do it, as i m trying to play different music on click on every row.

If you could give the source code of the example above it would be really great.
my email id is viveksagarwal@gmail.com

thanks mate

cheers
Vivek

Hi,

Great tutorials you have here. I was wondering if you could show how you would do this with html files instead if images, i.e. loading html files into a UIWebview. I've been struggling with it for some time now.

Thanks, Philip

Hi Elizabeth,

I've almost got to the stage of submitting my app to Apple – and I want to thank you again for the tutorial, it really helped. One more question, though. Is it possible to modify the existing table to contain a different image in each row? I've seen other tutorials which deal with custom table items, but they all start from scratch. Is it possible to add custom images to the cells in the table as you've done it here?

Thanks again,

kevin.

Hi Kevin,
Glad to hear your app is getting so far along! Customizing each table row with an image isn't something I've done yet, but I believe that you could do this in the tableView:cellForRowAtIndexPath method. If you had an array of the images you wanted to use in the table row, you could use the index of the table row being displayed to get the image and add it to the table row, just like I'm doing with the text now. As to how to get an image into a table row, I'd recommend checking out the documentation on table cells: http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/TableView_iPhone/TableViewCells/TableViewCells.html.They have an example on that page that shows how to add images to table rows. I hope that helps!

Hi Elisabeth,

Thank you very much (and I'm very sorry for misspelling your name). I'll take a look at the documentation, and see how I get on.

Thanks again for all your help and ace tutorials.

Kevin.

Hello Elisabeth!
many thanks for the great video tut!
It helped me very much in developing a new iphone app :)
But iam still struggeling with understanding how
i could create and push another view controller. I want to have
a totally different info for each book: like one with a picture, one
with text and so on.. could you please explain, or post a little code snipped
for all who are interested in that issue?
Thank you from Paris,
Ralf

the video describes a very nice way to build you own iphone application, thanks for this great article.licitatii

I must say, firstly thankyou, these tutorials are. buy far the best on the web ive fond so far, so thanks!
but i was wondering if you might be able to give me some pointers on... making this into more of an ebook reader,

EG: list of 'books' click one, then click download, to download it to device, then a downloads section, for reading the books (with UIweb view or something to that effect) Any help would be apreciated!

Hi Elisabeth

These two articles have been a great, clear and informative set of tutorials.

I am now trying to extend this further, but I cant get past a sticking point.

When running the app and navigating down to the picture, everything works well. Then when I change to the second tab and then back to the first,the app takes me back to the picture view rather than the table view. How do I get the detail view to unload and the table view to reset when I change tabs? When I come back to the books tab I have to navigate through the table again.

Thanks

Bob

Elisabeth,

You've done a great job once again on another amazing screencast. This has helped me tremendously and has allowed me to complete a large chunk of my first iPhone application. I owe so much thanks to you.

Cheers,
Alan

you are the best. thank you.
i beg you , please do more videos.

Hi
This tutorial is really awesome, thanks!

Just started learning about developing apps,

I had this question, suppose we want to play a music file depending on the row clicked, can it be done?

*when the person clicks on a particular row, it should go to another view and then it should have a option to play and stop the music, also the view should have a small picture place.

can this be done?

let me know if any tutorial are there for this or similar to this!
awaiting your suggestions
thanks!

Elisabeth - I'm in love!! I could listen to you forever....

Thanks so much for the help!

Elisabeth,

Kudos on a great demo. I am also basing my pap off the combination Navigation and TableView style controller.

You gave me a great start to get the ball rolling.

I will chime in when I get closer to completion.

Thanks!

Thanks for such a clear tutorial! It really helped make sense of xcode and better understand Objective C, which is my reason for engaging with iphone projects. I'm currently trying to figure out how to make the detail view display names from the 2nd array rather than images. I thought it might be as easy as changing the UIView to UITextView's, but not so. If you could tell me how to do this it would be much appreciated. I know in theory I should be using a .plist but I'd like to get my head round the basics before delving into that.
Thanks again for the effort in making these tutorials.

Firstly I'd like to say thanks for such a great tutorial.

Secondly, I do have a couple of questions. Forgive me because I am EXTREMELY new to this and I have never coded in any other language before. Essentially I am a designer, and thought I'd get into iPhone App development for something new. So not only am I learning from the ground up, I am still grasping learning the language of code as a whole.

Anywho, everything in this is fantastic so well done.

My question is this, and once again, sorry if it is a silly question and hopefully it hasn't been asked before...

I have successfully created your table view and it goes to the image which is perfect for what I am doing. The problem is, I want to split the table up into multiple categories.

For instance, you have Books... let's say on the same page I want to add DVDs. I still want it to do the same thing (click title, go to image of DVD) and I still want it on the same listing page, just that I want it split up.

I've tried everything from playing with the numberOfSectionsInTableView to trying to duplicate the NSMutableArray and rename it so that it is called something different. I think, just playing around with this I have spent at least 10 hours just trying to do something, reading stuff... it all is very complicated haha.

And it's probably extremely easy and I am just not doing the right thing at all, or maybe not grasping it properly... but I would LOVE it if you could help me out here.

I don't know what else to do. Maybe I should stick to design? haha

Thanks again for a great tutorial.

Chris

Hi, Elisabeth,

I would like to know how to add a detail and description for each picture? using multi line. any sample of code that you can be share with us to see how can be write?

regards

mike

what a great tutorial!

linking things correctly in IB is still confusing to me and this was great.

i think you should implement a search with tab buttons below search for product types or categories. would be a great addition to the program.

keep the videos coming!

Hi, I am really trying to figure out a few things.
1) if I load files into the resources, (PDF Files) how can I have my table row selections open those files. I want to open a different file for each row selected.

2) the code above for opening a new view for each row selected doesnt work. Is there a new way to do it?

thanks and hope someone can help

News Topics

Recommended for You

Got a Question?