iPhone Tutorial for Beginner | Programmer | Developer

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.

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.

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.

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

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

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

Run the application and you will see the final output.

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: 81% [?]

Related posts:

1. iPhone Programming Tutorial: Part 6: Creating custom UITableViewCell Using Interface Builder [UITableView] This tutorial will help you to create custom rows in...
2. Adding Pictures to Table iPhone Add Picture in Table, Video Tutorial: Application developed to...
3. iPhone Programming Tutorial – {Part 1} UITableView using NSArray Creating iPhone Tutorial Introduction: I am going to write series...
4. iPhone Programming Tutorial: Complete List of UITableView Tutorials + Videos Complete List of UITableView tutorials plus few video tutorials as...
5. iPhone Programming Tutorial: {Part 3} Grouped UITableView I am going to write series of UITableView tutorials (Video...