Sponsored Links

Archives

Add Pictures into your table using Interface builder

From admeem

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.

iPhone TutorialiPhone TutorialiPhone TutorialsiPhone SDK tutorialiPhone sdk tutorialiphone sdk tutorials

iphone table view tutorial
add images to iPhone resource folder
iphone tableview
Please make sure, copy check box is selected

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

1.IBOutlet UIImageView *productImg;
2.IBOutlet UILabel *descriptionText;

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

1.- (void)setDescpText:(NSString *)_text;
2.- (void)setProductImage:(NSString *)_text;

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

1.- (void)setDescpText:(NSString *)_text;{
2.descriptionText.text = _text;
3.}
4. 
5.- (void)setProductImage:(NSString *)_text;{
6.productImg.image = [UIImage imageNamed:_text];
7.}

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

1.NSArray *imagesList;
2.NSArray *descpList;

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

1.arryData = [[NSArray alloc] initWithObjects:@"iPhone",@"iPod",@"MacBook",@"MacBook Pro",@"Mac Mini"@"iPhone 3G S",nil];
2.imagesList = [[NSArray alloc] initWithObjects:@"1.jpg",@"2.jpg",@"3.jpg",@"4.jpg",@"5.jpg",@"6.jpg",nil];
3.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

1.[cell setProductImage:[imagesList objectAtIndex:indexPath.row]];
2.[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.

iphone table view
change table cell height from interface builder

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

iphone table tutorial
add labels and image to cell

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

iphone uitableview
map label from interface builder to your class
iphone uitableview tutorial
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.

iphone table cell tutorial
change table row height from interface builder

Run the application and you will see the final output.

iphone tutorial
final result of customizing table cell from interface builder

Code for iPhone application:

Click here for the code Project code.

Post to Twitter

1 comment to Add Pictures into your table using Interface builder

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Powered by WP Hashcash