iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder

Creating iPhone Application: Introduction:

I am going to write series of UITableView tutorials for iPhone (Video Tutorials as well) to help developers and programmers to make a new applications for Apple store. This series of tutorials help you create/build iPhone applications more easily and fast. Following are the list of iPhone tutorials, which I will be posting on this blog:

iPhone Programming Tutorial -Table View- Part 1: Create a Simple UITableView [Populate UITableView With Array]
iPhone Programming Tutorial -UITable View- Part 2: Navigatation in UITableView [Navigatation on UITableView using didSelectRowAtIndexPath]
iPhone Programming Tutorial – Part 3: Grouped UITableView [Using Interface builder]
iPhone Programming Tutorial – Part 4: Tips for UITableView Design [Change UITableView properties i.e background colour, accessory type, add footer and header]
iPhone Programming Tutorial – Part 5: Add, Delete & Re-order UITableView rows
iPhone Programming Tutorial – Part 6: Creating UITableView using UITableViewCell Using Interface Builder
iPhone Programming Tutorial – Part 7: Adding Pictures into your UITableView using Interface builder
iPhone Programming Tutorial Examples Part 8: UITableView & UITableViewCell examples and tips

[Note: If you want more iPhone tutorial's on UITableView or UITableViewCell, then add a comment on "Request for Beginner iPhone Tutorial" Page]

Idea of this iPhone tutorial:

In my last iPhone tutorial on table, I explain how you can easily design table using UITableViewCell. In this tutorial, I will explain how you can add images and labels to your UITableView. So in this tutorial, i will add few lines in UITableViewCell class and add images to cell xib file.

Final output of this tutorial will look like this. You can watch the video tutorial at the end.

Picture 1 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder
Table design using Interface builder

iphone programming tutorial steps to follow (10 Steps to add pictures):

Follow these steps to achieve the output like above:

Step 1:Open the last tutorial code (You can grab this code from here) and add following 6 images to your project resources folder by dragging in to xcode.

1 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder2 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder3 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder4 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder5 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder6 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder

Picture 2 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder
add images to iPhone resource folder
Picture 3 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder
Please make sure, copy check box is selected

Step 2: Now open TableCellView.h file and add one Label & UIImageView

IBOutlet UIImageView *productImg;
IBOutlet UILabel *descriptionText;

Also Add these two methods definition in TableCellView.h, for setting the values for label and Image.

- (void)setDescpText:(NSString *)_text;
- (void)setProductImage:(NSString *)_text;

Step 3: Add these methods body in TableCellView.h file

- (void)setDescpText:(NSString *)_text;{
descriptionText.text = _text;
}

- (void)setProductImage:(NSString *)_text;{
productImg.image = [UIImage imageNamed:_text];
}

Step 4: Add two NSArray’s in SimpleTableViewController.h

NSArray *imagesList;
NSArray *descpList;

Step 5: In SimpleTableViewController.m file, move to viewDidLoad method and overwrite the arryData with these lines of code:

arryData = [[NSArray alloc] initWithObjects:@"iPhone",@"iPod",@"MacBook",@"MacBook Pro",@"Mac Mini"@"iPhone 3G S",nil];
imagesList = [[NSArray alloc] initWithObjects:@"1.jpg",@"2.jpg",@"3.jpg",@"4.jpg",@"5.jpg",@"6.jpg",nil];
descpList = [[NSArray alloc] initWithObjects:@"Price 500$",@"Price 50$",@"Price 1,000$",@"Price 1,200$",@"Price 800$",@"Price 700$",nil];

Step 6: In cellForRowAtIndexPath method, add these two lines before return statement

[cell setProductImage:[imagesList objectAtIndex:indexPath.row]];
[cell setDescpText:[descpList objectAtIndex:indexPath.row]];

Step 7: Now open TableCellView.xib file in Interface Builder. Select “Table Cell View” and change its height to 65.

Picture 4 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder
change table cell height from interface builder

Step 8: Add UILabel and UIImageView to the cell design like this

Picture 5 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder
add labels and image to cell

Step 9: Map UILabel & UIImageView to TableCellView.h file

Picture 6 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder
map label from interface builder to your class
Picture 7 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder
map label from interface builder to your class

Step 10: Last step, open SimpleTableViewController.xib file and select Table. Press cmd + 3 and change the height of row to 70.

Picture 8 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder
change table row height from interface builder

Run the application and you will see the final output.

Picture 1 iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder
final result of customizing table cell from interface builder

Code for iPhone application:

Click here for the code Project code.

Follow iPhone programming tutorial video here:

Click here to watch the video tutorial to add images in your iphone application.

Popularity: 84% [?]

My name is Adeem M Basraa. I am a software engineer from Lahore, PK. I’ve been involved in software development for nearly 4 years, with the last 1 year focused on application development for mobile devices (iPhone & Android).

17 Comments on "iPhone Programming Tutorial {Part 7}: Adding Pictures into your table using Interface builder"

  1. Ijaz says:

    Its seems prety easy now with screen shorts and vedio :) thanks for sharing …..:)

  2. Brian says:

    Fantastic job! This is a great tutorial!

    My question is this: How can I make it so when the user clicks on a cell they get a detailed view that corresponds to the cell they clicked on? I see that you have the title but I’d like to add more information to the view than that.

    Thanks!

  3. Adeem Basraa says:

    @Brian,
    I am going to write last tutorial on this :) so please check it out this week again!

  4. Brian says:

    Awesome. Thanks!

  5. Brian says:

    Don’t know how deep you’re gonna go with the next tutorial. BUT…there doesn’t seem to be any tutorial out there right now that shows a detail view with custom cells. So say if a user clicked on a cell from the initial tableview they’re taken to a detail view that has phone number, address, image, etc. The only tutorials I’ve seen are really clunky and don’t show how to “stylize” the data on the detail view so it looks nice.

    Anywhoo…Cheers and thanks again!

  6. Jim says:

    Great Tutorials! You make it look easy.

    I’m having trouble applying this tutorial to a Group Table View. I’m not getting the nice rounded corners. Is there a simple fix?

    BTW. I had to adjust your code for 3.0. In TableCellView.m initWithFrame has been depreciated, it’s now initWithStyle. Oh and Step 3 above should read TableCellView.m

    Thanks again!

  7. Brian says:

    When do you think you will have the next tutorial posted? I’m definitely willing to make a donation.

  8. Good idea buddy!I learned a lot from this blog and definitely it’s going to help me.

  9. kk says:

    Hello,

    I have followed your tutorials and have found them really useful.
    However, I need some advice. Using the above tutorials as an example, I will like to modify the text in the descptext label (for all cells) whenever the user taps the return button on the keyboard.

    However, I can’t seem to call the setDescpText method from the textFieldShouldReturn method (when the user taps the return key).

    Will appreciate any help, thank you =)

  10. Gavin says:

    Your tutorials have been a great help. This one and especially your sub views with custom-cells in IB.

    I can see with your download example how you bring your arrydata across into the subviews, but how would you change that to bring the image thumbnails across also?

  11. mako says:

    hello, thanks a lot for the tutorial!, very interesting!

    just one thing, in
    Step 3: Add these methods body in TableCellView.h file

    you mean TableCellView.m

    also in sdk xcode 3.2.5,
    in TableCellView.m,
    initWithFrame:reuseIdentifier is deprecated

    thanks a lot again!

  12. sabari says:

    Show Character Count When Typing a Text Message on iPhone

  13. Ahmed says:

    great work thanks alot

    but can i request tutorial

    i make design for my program in photoshop and i want to put it in xcode how can i integrated it

    because i want to make my program interface look good

    like this program

    http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/iphone-icon-design-creating-a-logo-for-bankapp/

    if you can make tutorial how we can integrated the design with xcode

  14. Ahmed says:

    Thank you I’m a good observer and I have watched your site constantly updates it and I have learned a lot of it is over, I have to ask
    when i finish from the table I want to another view that contains information and when i click on any word from the table it open another view with pictures and description below

    Please help me

  15. edu says:

    if i want to add the image to the nextView, what can i do?

Trackbacks for this post

  1. Iphone Development Exchange » Add Pictures into your table using Interface builder
  2. Fixing up a TableView iPhone App | Mobile App School

Got something to say? Go for it!