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

By Elisabeth Robson
July 12, 2009 | Comments: 13

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


13 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,

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

Leave a comment



Popular Topics

Browse Books

News Topics

Recommended for You


Got a Question?