Customize Table View Cells for UITableView

208 Flares 208 Flares ×

Previously, we have created a simple Table View app to display list of recipes with a pre-defined image. In this tutorial, we’ll continue to work on the app and make it even better:

  • Display different images for different rows – lastly, we display the same thumbnail for all rows. Wouldn’t be better to show individual image for each recipe?
  • Customize the table view cell – instead of using the default style of table view cell, we’ll take a look how to build our own.

Display Different Thumbnails

Before we move on to change the code, let’s revisit the code for displaying thumbnail in table row.

SimpleTable Image Code

Lastly, we’ve added a line of code to instruct UITableView to display “creme_brelee.jpg” in each row. Obviously, in order to show different images, we need to alter this line of code. As explained before, the “cellForRowAtIndexPath” method is called by iOS automatically each time before a table row is displayed.

1
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

If you look into the method parameter, it passes the “indexPath” when invoked. The indexPath parameter contains the row number (as well as the section number) of the table row. You can simply use “indexPath.row” property to find out which row it currently points to. Like an array, the count of table row starts from zero. In other words, “indexPath.row” property returns 0 for the first row of table.

So to display different thumbnails, we’ll add a new array (i.e. thumbnails) that stores the file name of thumbnails:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@implementation SimpleTableViewController
{
    NSArray *tableData;
    NSArray *thumbnails;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Initialize table data
    tableData = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
   
    // Initialize thumbnails
    thumbnails = [NSArray arrayWithObjects:@"egg_benedict.jpg", @"mushroom_risotto.jpg", @"full_breakfast.jpg", @"hamburger.jpg", @"ham_and_egg_sandwich.jpg", @"creme_brelee.jpg", @"white_chocolate_donut.jpg", @"starbucks_coffee.jpg", @"vegetable_curry.jpg", @"instant_noodle_with_egg.jpg", @"noodle_with_bbq_pork.jpg", @"japanese_noodle_with_pork.jpg", @"green_tea.jpg", @"thai_shrimp_cake.jpg", @"angry_birds_cake.jpg", @"ham_and_cheese_panini.jpg", nil];
}

As you can see from the above code, we initialize the thumbnails array with a list of image file names. The order of images are aligned with that of the “tableData”.

For your convenience, you can download this image pack and add them into your project. Make sure “Copy items into destination group’s folder” is enabled.

SimpleTable Add File

After adding the image files, you should find them in the Project Navigator like the screen shown below:

SimpleTable Project Navigator Image

Lastly, change the line of code in “cellForRowAtIndexPath” method to:

1
cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

What’s [thumbnails objectAtIndex:indexPath.row]?

The line of code retrieves the name of images for the specific row. Say, for the first row, indexPath.row property returns 0 and we picks the first image (i.e. egg_benedict.jpg) from the thumbnails array using the “objectAtIndex” method.

After saving all the changes, try to run your app again. It should now display different thumbnails for the table rows:

SimpleTable App With Different Thumbnails

Customize Table View Cell

Does the app look better? We’re going to make it even better by customizing the table cell. So far we utilize the default style of table view cell. The location and size of the thumbnail are fixed. What if you want to make the thumbnail bigger and show the preparation time for each recipe just like the below screen?

SimpleTableView Custom Cell

Custom Table View Cell with Different Style

Designing the Cell

In this case, you have to create and design your own table cell. Go back to Xcode. In Project Navigator, right click “SimpleTable” folder and select “New File…”.

As we’re going to design our own table cell, we have to create a new Interface Builder file for the cell. For this case, we just need to start with an “Empty” user interface. Click “Next” to continue.

New Empty Interface Builder File

Select an Empty Interface Builder Document

When prompt to choose the device family, select “iPhone” and click “Next” to continue. Save the file as “SimpleTableCell”.

SimpleTableCell Interface Builder Document

Once the file is created, you should find it in Project Navigator. Select “SimpleTableCell.xib” to switch to Interface Builder. We’re going to design the look and feel of the custom table cell.

In the Object Library, select “Table View Cell” and drag it to the design area of the Interface Builder.

SimpleTable Drag TableViewCell

In order to accommodate a larger thumbnail, we have to change the height of the cell. Just hold the lower/upper side of the cell and scale the height to 78.

Table View Cell Change Height

Alternatively, you can also use the “Size Inspector” to change the height.

Table View Cell Size Inspector

Size Inspector for Table View Cell

Next, select the “Attributes Inspector” in the upper part of the Utility area and set the “Identifier” of the custom cell to “SimpleTableCell”. This identifier will be used later in your code.

SimpleTable Cell Identifier

After configuring the table cell view, we’ll put other elements inside it. Select “Image View” and drag it into the Table View Cell.

SimpleTableCell Drag ImageView

This image view will be used for displaying the thumbnail. You can resize it to make it fit the cell. For your reference, I set both the height and width to 69 pixels.

Next, we’ll add three labels: Name, Prep Time and Time. The “Name” label will be used to display the name of recipe. The “Prep Time” is a static label that only displays the text of “Prep Time:”. Lastly, the “Time” label is a dynamic label that is used to show the actual preparation time for the specific recipe.

To add a label, select “Label” in Object library and drag it to cell. You can double click the label to change its name.

Table View Cell Change Label Name

You may notice your font size and style are different from the one shown above. To change the font style, simply select the Label and select the “Attribute Inspector”. From here, you can alter the setting of “Font” and minimum font size. You can also change the text color and alignment through the inspector.

Custom Table Cell Attributes

Your final design should look similar to this:

Final Design Table View Cell

Creating a Class for the Custom Cell

So far, we’ve designed the table cell. But how can we change the label values of the custom cell? We’re going to create a new class for the custom table view cell. This class represents the underlying data model of the custom cell.

Just like before, right click the “SimpleTable” folder in Project Navigator and select “New File…”.

New File Template Dialog

Pick a Template for the New File

Right after selecting the option, Xcode prompts you to select a template. As we’re going to create a new class for the custom table view cell, select “Objective-C class” under “Cocoa Touch” and click “Next”.

SimpleTable New File

Create New File for Your Project

Fill in “SimpleTableCell” for the class name and select “UITableViewCell” for the “Subclass of” option.

SimpleTable Subclass UITableViewCell

Click “Next”, save the file in the SimpleTable project folder and click “Create” to continue. Xcode should create two files named “SimpleTableCell.h” and “SimpleTableCell.m” in the Project Navigator.

As mentioned before, the SimpleTableCell class serves as the data model of custom cell. In the cell, we have three values that are changeable: the thumbnail image view, the name label and the time label. In the class, we’ll add three properties to represent these dynamic values.

Open “SimpleTableCell.h” and add the following properties before the “@end” line:

1
2
3
@property (nonatomic, weak) IBOutlet UILabel *nameLabel;
@property (nonatomic, weak) IBOutlet UILabel *prepTimeLabel;
@property (nonatomic, weak) IBOutlet UIImageView *thumbnailImageView;

Property and Outlet

The above lines of code defines three instance variables that later to be associated with the table cell view in Interface Builder. The keyword “@property” is used to declare a property within a class in the following form:

@property (attributes) type name;

Referring to the lines of code above, weak and nonatomic are the attributes of the property. UILabel and UIImageView are the types, while the “nameLabel”, “prepTimeLabel” and “thumbnailImageView” are the names.

So what’s IBOutlet? You can think of IBOutlet as an indicator. To associate the instances variables with the elements in the Table View Cell (i.e. SimpleTableCell.xib), we use the keyword “IBOutlet” to let Interface Builder know that they’re allowed to make connection. Later, you’ll see how to make a connection between these outlets and the objects in Interface Builder.

Now, open “SimpleTableCell.m” and add the following code right below “@implementation SimpleTableCell”:

1
2
3
@synthesize nameLabel = _nameLabel;
@synthesize prepTimeLabel = _prepTimeLabel;
@synthesize thumbnailImageView = _thumbnailImageView;

@synthesize Directive

The “@synthesize” keyword tells compiler to automatically generate code for accessing the properties we declared earlier. If you forget to include this directive, Xcode will complain like below:

Xcode Missing Synthesize

Making the Connections

Save the changes and select “SimpleTableCell.xib” to go back to Interface Builder. Now we’ll make connections between the properties of the class and the Label/ImageView created in the Interface.

First, select the cell and change the class to “SimpleTableCell” in “Identity Inspector”. This associates the cell view with our custom class created earlier.

Now, we’ll establish the connections with the properties. Right click the “SimpleTableCell” under “Objects” to display the “Outlets” inspector. Click and hold the circle next to “nameLabel”, and drag it to the “Label – Name” object. Xcode automatically establishes the connection.

Simple Table Cell Label Connection

Repeat the above procedures for “prepTimeLabel” and “thumbnailImageView”:

  • Connect “prepTimeLabel” with “Label – Time” object
  • Connect “thumbnailImageView” with “ImageView” object

After you made all the connections, it should look like this:

Simple Table Cell Connections

Updating SimpleTableViewController

We have completed the design and coding for the custom table cell. Finally we come to the last part of the change – to make use of the custom cell in the SimpleTableViewController.

Let’s revisit the code in “SimpleTableView.m” that currently used to create table row:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableItem";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }

    cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

    return cell;
}

We use the default table view cell (i.e. UITableViewCell) for showing the table items. In order to use our custom table cell, we have to alter this part of code in “SimpleTableView.m” to the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableCell";

    SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil)
    {
        NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@"SimpleTableCell" owner:self options:nil];
        cell = [nib objectAtIndex:0];
    }
   
    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row];
   
    return cell;
}

However, as soon as you update the code, Xcode detects there are some errors as indicated in the source code editor.

Xcode Source Editor Error

Source Code Error Indicated by Xcode

What’s the problem? The code we’ve just changed tells “SimpleTableViewController” to use “SimpleTableCell” class as the table cell. However, “SimpleTableViewController” doesn’t have any idea about it. That’s why Xcode displays errors.

As explained in the first tutorial, a header file declares the interface of a class. For “SimpleTableViewController” to get to know “SimpleTableCell”, we have to import the “SimpleTableCell.h” in the “SimpleTableViewController.m”.

SimpleTableView Controller Import

Import SimpleTableCell.h

By importing “SimpleTableCell.h”, the “SimpleTableViewController” knows what it is and can make use of it.

Lastly, as the height of table cell is changed to 78, add the below code above “@end”.

1
2
3
4
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 78;
}

Now, hit the “Run” button and your SimpleTable app should look like below:

SimpleTable App with Custom Cell

Your Homework

You may notice the app just displays “Time” for “Prep Time:”. I intentionally leave this for you. Try to make some changes of your code and update the preparation time. Your final app will look very similar to below:

SimpleTable App with Custom Cell Prep Time

What’s Coming Next

After working through this tutorial, you should have a better idea about UITableView and how you can create your own table cell. Next up, we’ll further talk about how to handle row selection.

As always, I love to hear your feedback. Does the tutorial give you a better idea of iOS programming? Drop me comment below or head over to our forum to ask question.

Update #1: Check out our new tutorial about how you can style the table view cells!

Update #2: You can now download the full source code of the Xcode project.

You May Like These:

Get Free Chapters of Our Swift Book

Beginning iOS 8 Programming with SwiftIf you want to create an app but don't know where to begin, this book covers the whole aspect of Swift programming and iOS 8 development and shows you every step from an idea to a real app on App Store. This book features a lot of hands-on exercises and projects. You will first create a simple app, then prototype an app idea, and later add some features to it in each chapter, until a real app is built. Want to learn more? Check it out here and get three free chapters.


  • Matt

    This tutorial was exactly what I needed, thank you! Is there an alternative to setting the row height in the last method in the tutorial, possibly in storyboard? I notice setting the cell height in storyboard doesn’t work.

    • Daragh

      The same here. The height code just dosnt seem to fire. I have an alert box in the code to test, and have set break points, but still dose not fire.

      • http://www.appcoda.com Simon Ng

        What’s the build error?

      • Daragh

        Fixed this. I had an error where my on the SimpleTableViewController.xib the view under “objects” needs to be set as the file owner (right click view under objects, under ref outlets drag up to File’s Owner , on the popup click view. This solved it for me.

  • Steven

    Just finished the tutorial last night, If you don’t do the array for the Times, the code does not run anyway.
    But great tut. Never would have thought it would be that much work just to add a new table cell view, But you can def see the advantages in why it is set up like this,

  • Colacino

    Simon.

    Trouble here too.

    You forgot to set the custom class for SimpleTableCell.XIB >> SimpleTableCell. It’s mandatory. The set of Identifier it’s not necessary. Without these the IBOUTLETs is not possible.

    Good tutorial! Keep going!

  • Mikey

    Hey there. Kudos on the great tutorial. I’m just having some issues. I followed this tut step by step, and I even added the prepTimes array for use. But when I run it in the iOS Simulator, all I get is a black screen. Any ideas why?

    • Colacino

      On Interface Builder

      1) Select the SimpleTableCell.xib
      2) Set on the properties, the class = SimpleTableCell.m

      work for me ;)

  • vince

    We done for this nice tuto!

    I do have one question though…
    I adapted it to my project, and everything works fine, I’m able to display generic table view cells. But a problem occurs when I want to update label texts from an NSArray, just like you do it here : cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];

    I got a thread :
    Thread : EXC_BAD_ACCES.
    What am I doing wrong? I don’t get it :-(

  • Krishna

    Thanks for the tutorial! I am extremely new to the XCode and the Objective C dev environment. I tried to create this exercise on my own, in the final run, I faced the following problem –

    In the line cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row]; I get the error message Use of UnDeclared identifier PrepTime. Any idea how to resolve this?

    Thanks for your support.

    Krishna

  • Alex Kim

    This is great content, which helped me. not sure I missed text but . Before doing “Next, select the “Attributes Inspector” in the upper part of the Utility area and set the “Identifier” ” don’t we set custom class-> class selection to “SimpleTableCell”? I can see nameLabel and other outlet after changing that. Thanks for great content.

  • Krishna

    Thanks for the tutorial! I am extremely new to the XCode and the Objective C dev environment. I tried to create this exercise on my own, in the final run, I faced the following problem –

    In the line cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row]; I get the error message
    Use of UnDeclared identifier ‘PrepTime’

    I defined PrepTime as an NSArray and simply added elements to this array like the other two arrays. When I run, now I get a different kind of ‘green’ message after the welcome screen in the code.

    Thread1: Program received signal ‘SIGABRT’

    This occurs in the line cell.prepTimeLabel.text.

    Any idea how to resolve this?

    Thanks for your support.

    Krishna

    • http://www.appcoda.com Simon Ng

      @Krishna, in Objective C (and most of the programming languages), the syntax is case sensitive. So “PrepTime” and “prepTime” are two different variables. Please check your code again and make sure you declared “prepTime” instead of “PrepTime”.

      • Krishna

        Hi Simon,

        Thanks and yes, I have defined prepTime correctly. Infact, when I run, the splash screen first shows up and then I receive a green highlight in the followling line –

        cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];

        The message says ‘Thread1: Program received signal ‘SIGABRT’’

        how to resolve this?

        • http://www.appcoda.com Simon Ng

          @Krishna, can you open a new thread in our forum and show me your code?

          • Anuj

            me too getting the same error as Krishna….

          • http://twitter.com/MacsFuture Lex McFarley

            I had the same problem. You don’t need the prepTimeLabel code. It is static so it doesn’t need to be in there.

          • shivank

            @ i have also faced this problem you but when i made the code again than the problem resolves itself so i think you should start again and made code again

  • Deepak

    Hi Simon,

    Thank you so much. These tutorials are really well made and extremely helpful. It will be great if you could introduce new topics more frequently (without so much gap in between).

    • http://www.simonblog.com Simon Ng

      I’m trying my best to publish more frequently. Stay tuned.

  • jaya

    This was aswome…Thanks a lot

    • http://www.simonblog.com Simon Ng

      Thanks. Really great to hear that!

  • Evan

    Awesome tutorial, one of the best and in-depth I’ve found thus far! Thanks so much for taking the time to do this!

    • http://www.simonblog.com Simon Ng

      Thanks, Evan!

  • Jake

    That was a great tutorial and the homework was fun as well :D

    • http://www.simonblog.com Simon Ng

      Thanks, Jake! Should I give you more homework? :-)

      • Jake Sampson

        Yes you should because it helps us to work on our own code
        instead of copy paste :)
        thanks for all the effort you put in :D

  • Felippe

    That was the best tutorial about tableview EVER!!!!!!! Thanks!!!

  • Tanmay Jadhav

    Thanks for it but some things are still not clear in this tutorial… u have not created the prepTime Array. Also In Xcode 4.3.3 we have to add Simple TableCell.h as subview then only we can proceeds. all this things is missing in ur tutorial

    • http://www.facebook.com/Der.Marc.Schneider Marc Schneider

      Because he didn’t want to mention the prepTime array. See “Homework”. ;))

      • Kevin Coleman

        I see why he didn’t mention the prepTime array, but if you follow the suggested code to the end you’ll get a failed build. I think it’s fantastic to include the exercise, but it’s frustrating to start from a broken build.

  • Lucky

    *** First throw call stack:

    (0x13c0052 0x1551d0a 0x13bff11 0x9b7032 0x928f7b 0x928eeb 0x943d60 0x23691a 0x13c1e1a 0x132b821 0x23546e 0x237010 0x35b5 0xb0e0f 0xb1589 0x9cdfd 0xab851 0x56322 0x13c1e72 0x1d6a92d 0x1d74827 0x1cfafa7 0x1cfcea6 0x1d8830c 0x164c6 0x16bd6 0x25743 0x261f8 0x19aa9 0x12aafa9 0x13941c5 0x12f9022 0x12f790a 0x12f6db4 0x12f6ccb 0x162a7 0x17a9b 0x2a38 0x2995)

    terminate called throwing an exceptionsharedlibrary apply-load-rules all

    This is the Error I got..
    Plzz help me..
    Iam new to Xcode

    • Markusn

      this happens when you connect your “levelplaying” (or “nameLabel” in the tutorial) to the “File’s owner” as it’s referencing outlet as you would usually do. Don’t do that, you need to connect it as an outlet of the Table Cell (as correctly shown in the tutorial under “Making connections”). hth

  • Lucky

    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”RankingCell” owner:self options:nil];

    Igot Program reccieve signal: SIGABRT

    *** Terminating app due to uncaught exception ‘NSUnknownKeyException’, reason: ‘[ setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key levelPlaying.’

  • Raushan

    Dear Simon,
    This tutorial is awesome! It was so easy to follow and understand the codes. Homework was fun as well :)

  • Ash

    Thanks for tutorial very much!

    BUT when i try app on device and scroll my app up and down the cells change form, become unpressable and look awful!! what to do?

    And can you please a tutorial for making a detailed view for each screen.

  • Nuno

    Just finished my homework !! The tutorials are great!!

    I´m waiting now for the next tutorial !! Maybe we could explore more on how to personalize the app…background images, colors,….

    Keep the good work…It´s a great help!! Thanks

  • http://twitter.com/Techguy36 Paul

    I can’t figure out the homework. Im stuck. Someone PLEASE HELP!!

  • http://www.facebook.com/Dannis.Annis Dan Annis

    i think using a plist is a great way to load data, but the way the plist is set up, each index row of the array needs to correspond with the index row of another array… Why not make each item an object with properties of name, image, preptime and then call those? (SOMEHOW) that is what I would like to see.. That way if Eggs Benedict goes away, you can delete the object and not each key in each array?

  • Brent Hacker

    Also getting Thread 1: signal SIGABRT highlighting:

    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”SimpleTableCell” owner:self options:nil];

    *edit: nevermind I found the solution myself. Due to the custom variances I made myself while following this tutorial I was declaring something wrong.

  • Brent Hacker

    Also getting Thread 1: signal SIGABRT highlighting:

    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”SimpleTableCell” owner:self options:nil];

    *edit: nevermind I found the solution myself. Due to the custom variances I made myself while following this tutorial I was declaring something wrong.

  • Pingback: 第四部分:定制UITableView表视图单元格(3) | EntLib.net 技术分享平台()

  • AOT

    This is the best tutorial in UITableView Cell customization. It is simple and beneficial.

    I made my now custom cell perfectly with 2 labels. The second label has a detailed text varies from one line to 30 lines. When i ran the application, the text of one cel overlay on the next cel.
    How can I autosize the cell hight to meet the current text size?Thanks

  • Joaquin

    I’m having some problems, I have the exact same code as you do, but my final result is quite different, check it out.

    • Joaquin

      I don’t know what could be the problem, but any help would be appreciated.

      • soxialit

        A bit late but, you didn’t make all the changes inside the

        -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

        “method. Check it out again! Let me know if you still have the problem.

      • Mark Joseph Bureros

        how did you do this /

  • JW

    I am lost here on photo attached. I have been trying to find the reason that I can not make the connection to the SimpleTableCell.xib.

    • gk8

      I’ve got this problem, too. Does anyone know the reason? I am using xcode4.5.

  • Marvin

    Great tutorial, the explanations are very clear.

  • haritha haridasan

    Sir please upload how to pass data from one table view to another table view

    • http://www.simonblog.com Simon Ng
      • haritha haridasan

        Sir,actually the problem is….in your tutorial after selecting an item from the table view,then it navigates to another view controller containg a label.But my doubt is……..if the seccond view controller contains another tableview in which we use the concept of customization of table cell…..then how to pass data to that customized cell inside dat seccond tableview……….

  • Hugo

    Hey !
    I just read this tut, realised the app, and it’s great !
    Hugo

  • Anya

    Hello, i did all steps in the tutorial but i had a problem with the prepTimeLabel which I solved by adding the extra line .m .h files. I got another problem the timeLabel which you didn’t even mention, it doesn’t appear on the screen on app, when I run it!! Can you please help me!!!!Thanks

    • http://www.facebook.com/Der.Marc.Schneider Marc Schneider

      Well, you’ll have that issue, because that is your homework… ^^ See at the end of that tutorial.

  • Vladimir
  • shivank

    sir thanks for your tutorial
    sir their is a problem of deselecting the code i am unable to do it so sir please help me!!! very soon

    • shivank

      simon sir please help me!!!

    • http://www.facebook.com/Der.Marc.Schneider Marc Schneider

      What is your problem? Your only have to double click the code in the tutorial and press cmd + c and then cmd + v where your would like to have the code.

  • steve winslow

    This was absolutely what i have been looking for, not just a tutorial on how to create but with lots of background info aand why things are done. I have been approached to create ios apps and have no idea! yet, but with tutorials like this im sure ill be flying soon enough, i see you have a marketplace which im sure i will end up purchasing from, but for now do you have a paypal account? i would love to donate something

    Thanks again

    Winslow

  • Mahesh Dhapa

    Hello Sir,
    Nice Tutorials and very very useful to us.
    I am new to iPhone
    I am creating an application which display the
    name of countries and Theirs flag as a thumbnail.,
    There is problem,

    the size of all images is not same so there is unpredictable output..
    So Please Help Me.
    Thanks…

    • http://www.facebook.com/Der.Marc.Schneider Marc Schneider

      Hey, you only have to klick on your UIImageView in IB and then go to “Attributes selector” on the right side and there to “View” –> “Mode” and choose “Aspect to fit” save and build ;))

  • Thomas Moore

    Got the homework figured out!!

  • http://www.facebook.com/elango.balusamy Elango Balusamy

    Thanks for doing this, very helpful

  • Kevin

    when i run the simulator i get an error:

    Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘-[UILabel nameLabel]: unrecognized selector sent to instance 0xbf2c630′
    If I’m understanding this correctly, this means either I haven’t defined the User Interface label correctly, the UILabel is not delegated to an item on the xib, or I haven’t included the header file for simpletablecell.h. I’m pretty sure I have followed all your directions.
    Here is my code:

    //
    // ViewController.m
    // SimpleTable
    //
    // Created by Kevin Terusaki on 8/28/12.
    // Copyright (c) 2012 TeamAqua. All rights reserved.
    //

    #import “ViewController.h”
    #import “SimpleTableCell.h”

    @interface ViewController ()

    @end

    @implementation ViewController
    {
    NSArray *tableData;
    NSArray *thumbnails;
    NSArray *tableTime;
    }

    – (void)viewDidLoad
    {
    [super viewDidLoad];
    //Do any additional setup after loading the view, typically from a nib.

    //Initialize table data
    tableData = [NSArray arrayWithObjects:@”Eggs Benedict”, @”Mushroom Risotto”, @”Full Breakfast”, @”Hamburger”, @”Ham and Egg Sandwich”, @”Creme Brelee”, @”White Chocolate Donut”, @”Starbucks Coffee”, @”Vegetable Curry”, @”Instant Noodle with Egg”, @”Noodle with BBQ Pork”, @”Japanese Noodle with Pork”, @”Green Tea”, @”Thai Shrimp Cake”, @”Angry Birds Cake”, @”Ham and Cheese Panini”, nil];

    //Initialize thumbnails
    thumbnails = [NSArray arrayWithObjects:@”egg_benedict.jpg”, @”mushroom_risotto.jpg”, @”full_breakfast.jpg”, @”hamburger.jpg”, @”ham_and_egg_sandwich.jpg”, @”creme_brelee.jpg”, @”white_chocolate_donut.jpg”, @”starbucks_coffee.jpg”, @”vegetable_curry.jpg”, @”instant_noodle_with_egg.jpg”, @”noodle_with_bbq_pork.jpg”, @”japanese_noodle_with_pork.jpg”, @”green_tea.jpg”, @”thai_shrimp_cake.jpg”, @”angry_birds_cake.jpg”, @”ham_and_cheese_panini.jpg”, nil];

    //Initialize prep times
    tableTime = [NSArray arrayWithObjects:@”30 min”, @”30 min”, @”20 min”, @”30 min”, @”10 min”, @”1 hour”, @”30 min”, @”30 min”, @”30 min”, @”30 min”, @”30 min”, @”30 min”, @”30 min”, @”30 min”, @”30 min”, @”30 min”, nil];

    }

    – (void)viewDidUnload
    {
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    }

    – (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
    {
    return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
    }

    -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
    return [tableData count];
    }

    -(UITableViewCell *) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    static NSString *simpleTableIdentifier = @”SimpleTableItem”;

    SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {
    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”SimpleTableCell” owner:self options:nil];
    cell = [nib objectAtIndex:0];
    }

    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
    cell.prepTimeLabel.text = [tableTime objectAtIndex:indexPath.row];

    return cell;
    }

    – (CGFloat)tableview:(UITableView *)tableview heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    return 78;
    }

    @end

    //
    // SimpleTableCell.h
    // SimpleTable
    //
    // Created by Kevin Terusaki on 8/28/12.
    // Copyright (c) 2012 TeamAqua. All rights reserved.
    //

    #import

    @interface SimpleTableCell : UITableViewCell

    @property (nonatomic, weak) IBOutlet UILabel *nameLabel;
    @property (nonatomic, weak) IBOutlet UILabel *prepTimeLabel;
    @property (nonatomic, weak) IBOutlet UIImageView *thumbnailImageView;

    @end

    //
    // SimpleTableCell.m
    // SimpleTable
    //
    // Created by Kevin Terusaki on 8/28/12.
    // Copyright (c) 2012 TeamAqua. All rights reserved.
    //

    #import “SimpleTableCell.h”

    @implementation SimpleTableCell

    @synthesize nameLabel= _nameLabel;
    @synthesize prepTimeLabel = _prepTimeLabel;
    @synthesize thumbnailImageView = _thumbnailImageView;

    – (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
    {
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {
    // Initialization code
    }
    return self;
    }

    – (void)setSelected:(BOOL)selected animated:(BOOL)animated
    {
    [super setSelected:selected animated:animated];

    // Configure the view for the selected state
    }

    @end

  • anonymous

    i’m also getting:
    SimpleTable[2925:f803] -[UIImageView nameLabel]: unrecognized selector sent to instance 0x68bba20

    I have no idea why this is occurring and have spent the last hour trying to figure it out. Any ideas?

    • anonymous

      forget it, resolved it. I dont think i had linked them properly in SimpleTableCell.xib. Originally when i encountered this problem, I struggled to find the placeholders and objects menu (turns out you can shrink it down to icons). While convenient, i couldn’t link to the appropriate labels in the cell properly. also, my Image View box wasn’t inside the SimpleTableCell, so i dragged it in, then linked them all up again in a last ditch effort. To my surprise, it worked! I also did the homework :p

      Great tutorial, the images with every step were very helpful!

      Found a typo: “we have to alter this part of code in “SimpleTableView.m” to the following”
      SimpleTableView.m should be SimpleTableViewController.m.

      Cheers.

  • http://www.facebook.com/namio.evangelistacavalcante Nâmio Evangelista Cavalcante

    How do I configure a table view with this table view cell, using storyboard?

  • Pavel

    Thanks.
    But how can i make segue to show_item_detail_screen from a list with custom defined cells?

  • Nate

    Hey,
    Great tutorial, but i keep getting a sigabrt error. Even after hours of searching, still no luck.
    Can someone please help?

  • Monojit

    nice1..dude! really u must write more often! so that novice user like me,can get advantage from that!

  • Surbhit

    You forgot to mention that before making connection you have to set the class of File Owner to SimpleTableCel, otherwise connections cannot be made.

  • Joe

    When is the next tutorial available?

  • http://twitter.com/scicalculator Derek Thomas

    Thanks for these great tutorials. I have a question since I have just started learning based on XCode 4.5.1 and iOS 6. Everything in this tutorial works great except that the final part in which we specify the `heightForRowAtIndexPath ` method does not seem to work. In fact, I changed the the return value to an NSString expecting it throw errors, but no problem occured, which makes me think that the method is never called. I found the “Row Height” Property in the xib file for the SimpleTableViewController, which rightly sets the height to a specific value. That being said, has iOS6 gotten rid of the ability to create a row height based on a function?

    The reference in http://developer.apple.com/library/ios/#documentation/uikit/reference/UITableViewDelegate_Protocol/Reference/Reference.html makes me think that it’s still available, but they do mention “performance implications to using tableView:heightForRowAtIndexPath: instead of the rowHeight property”.

    Is there a step that I missed that made my SimpleTableView unable to have a row-height-setting method? Any thoughts would be helpful.

    • khanhtungna

      It’s late for you but maybe someone review your questions.
      Fix it by:
      1/ Click on the SimpleTableViewController.xib file. The screen with table appear.
      2/ Click on the table. The properties area appear in the right side.
      3/ Click Size Inspector.
      The Table View Size appear
      Set Row Height to 78
      Run the app again you will have the row size as expected.
      Good luck,

      • Ting Wu@tw

        Thanks a lot for the update!

        The problem annoyed me from yesterday.

        I checked my code repeatedly, but couldn’t find the answer.

        Here it is ! Haha.

  • ro_crazy

    a big thank for you. It is really clear

  • Pingback: Custom UITableViewCell « tediscript.wordpress.com()

  • Christopher Morales

    Soooo simple :D
    Thx for the tutorial !!!!
    Just what I was looking !!!

  • Bill

    Great tutorial!!

  • Pingback: IOS编程教程(六)如何在UITableView处理行选择 | 编程·早晨()

  • http://www.facebook.com/kparker1974 Kerrie Kelly Parker

    Hello. I think your tutorial is just wonderful. I do have a question, though. I have tried just every combination I can think of to get this part of your tutorial to work below without any luck. Do you have a screen shot of what to do here? I’m not sure if I change the entire line, just part of it, etc…just not clear here although I’ve tried to figure it out. Thanks!

    Lastly, change the line of code in “cellForRowAtIndexPath” method to:

    1
    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

    • http://www.facebook.com/kparker1974 Kerrie Kelly Parker

      I think I found it :)

  • evelim

    Hi, could you pls give an example for 2 prototype cells (and 2 cell classes) on the same tableview?

    Thx!

  • Pingback: IOS编程教程(六)如何在UITableView处理行选择 « 成人免费资源三级分享网站()

  • Pingback: IOS编程教程(十):使用StoryBoard来建立导航控制器和表视图 | 编程·早晨()

  • Kal

    Fantastic tutorial.

  • http://twitter.com/zulianieffe Francesco Zuliani

    Great tutorial! Thanks!

  • Philippe

    Very well done and very useful for an iOS newbie like me. Many thanks!!!

  • Guest

    Hi, I am able to establish connection with properties. No properties displayed when I right click the labels. What will be the problem. I am using Xcode4.5. I’ve attached a screenshot.

    • Natalie

      Same error facing here.. I am using xcode 4.6

      • Natalie

        Solved it with following steps:

        1. Select SimpleTableCell.xib

        2. Click the “Custom class” button at the right

        3. Name the Class name as ‘SimpleTableCell’

        4. Then I could see the properties

  • Balaji Kandasamy

    Hi, I am not able to establish connection with properties. No properties displayed when I right click the labels. What will be the problem. I am using Xcode4.5.

    • Pragnesh Ambani

      To link a .xib to a class under Xcode4:

      1. Open your .xib.
      2. In placeholder: select File’s Owner.
      3. In the third thumbnail:”Identity Inspector” of the right panel, edit the “Custom Class” field and enter the name of your class.

      I also then had to:

      1. Click the root view under Objects.
      2. Click the last tab: “Show Connections”.
      3. Drag “New referencing outlet” to “File’s Owner” and select “view”.

      Refer link:http://stackoverflow.com/questions/6076964/how-to-link-a-xib-file-to-a-class-file-with-xcode-4

      • Kshanti

        Now in xcode 5.0, set the Custom Class of your Table View Cell to SimpleTableCell

        • Raul Nabarret

          How do you do that?

          • Salar N (Dr Bongo)

            In the XIB file which you created in the tutorial, select the entire Cell and in the Inspector under Identifier, type in the custom table cell name. See image below. If what i suggested does not make sense, review the entire tutorial. Eventually you will make mistakes and learn from them. The whole fun and point of programming.

  • Jordan Merrick

    Great tutorial! I’m struggling with the very last part about setting the row height. I’m running Xcode 4.5.2 with iOS 6 and it seems to ignore it completely. Is there an alternative to using heightForRowAtIndexPath?

    • Clive Yip

      i had the same problem. i couldn’t change it in code so i went to select the Table View, then in ‘Size Inspector’ changed the Row Height to 78

  • http://binceipt.com/ Mark Thien

    Hi,

    I got it successfully implemented. however, the navigation doesn’t work anymore when I click on any cell. Previously when I clicked on any cell it will go to RecipeDetailViewController, which only show the name of the receipt.

    Any crue ?

    Cheers,
    Mark Thien

    • fidel

      same problem, did you manage to get it fixed?

  • John Chuong Nguyen

    Hi, how can I create a new cell that link to another viewcontroller? For example, the last cell about the Author, or Help or Feedback, which doesn’t have image, subtitle, etc. And it will link to another interface (different layout page/view controller). I tried by create in Storyboard but it didn’t show up.
    In other words, most cell created by code, but one or some cells created by storyboard?
    Please help.

  • http://binceipt.com/ Mark Thien

    after changing to:

    – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    static NSString *simpleTableIdentifier = @”SimpleTableCell”;

    SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil)
    {
    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”SimpleTableCell” owner:self options:nil];
    cell = [nib objectAtIndex:0];
    }

    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row];

    return cell;
    }

    in SimpleTableViewController.m, the navigation is no longer working. Meaning when u click on a cell, it will bring you to next page, which is just to display the recipe name. But now, it won’t go to next page.

    Any crue?

    Cheers,
    Mark

    • Nate

      Because the Xcode now uses storyboards, it wont work because now, we use storyboards.

      In order to fix the problem, you have to create your table cell in the storyboard. Copy and paste the contents in the simpletablecell xib onto the prototype cell in storyboard.

      Then, replace NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”SimpleTableCell” owner:self options:nil];
      cell = [nib objectAtIndex:0];

      with “cell = [[SimpleTableCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];” Remember to set the identifier of the prototype cell in the storyboard and hook up everything also.

      Cheers :)

      • Daedalus

        Hi , our case same. I replace the below statement. Work fine.

        – (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
        {
        [self performSegueWithIdentifier: @”showRecipeDetail” sender: self];
        }

  • Mehmet

    That’s great!! Thank you!! :D

  • Pravin Mahajan

    Awesome tutorial, this post is very helpful to me Thanks so much !

  • Pingback: Custome Cell For Table View : Unlimitedtricks Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos()

  • http://www.facebook.com/jiunit Balaji CK

    very nice tutorial. Very useful site for iOS programming learners.

  • sergtk

    Awesome! Simple, concise and only essential. I have wasted time with other tutorials until I came up with this one. Thanks a lot – good job!

  • Pingback: Curso de programación iOS para principiantes | CyberHades()

  • Joseph Priest

    Wonderful tutorial, really enjoyed the step-by-step process. Are you going to do one for dynamic cells that the user can create?

  • bugger

    How i can pass data with seque and a custom cell. doesn’t work yet.

  • Munish Pathak

    Fantastic tutorial, This is what I was looking for.
    Thanks.

  • Oscar

    Great tutorial! Please make the followup aswell :)

  • gabriel

    when i run the app no images are showing on the left.

  • ARod

    Thanks for the tutorial. Works like a charm. XCode 4.5.2.

  • Fidel

    objectAtIndex its no longer needed as of xcode 4.5 you can use array[position] or for example in this case you could replace:

    cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

    for:

    cell.textLabel.text = tableData[indexPath.row];
    cell.imageView.image = [UIImage imageNamed:thumbnails[indexPath.row]];

    I think there is no big diferences but for people who is more comfortable on languages like java its simpler plus its less code.

    Great series of turtorials by the way.

  • Namit Gupta

    This helped a lot. Thanks soo much.

  • Khalid Mehmood Awan

    awsome….

  • Pingback: WiFi Horizon, Best news updates, offers and business opportunities()

  • nani

    Adjusted the custom cell view as mentioned, but my table view looks weird.

  • Guest

    Help! This is a great tutorial but my result don’t match which is frustrating since I follow the tutorial step by step :(

    See the attached image.

  • Guest

    Here is the image.

  • Bruce Elliott

    Help! This is a great tutorial but my result don’t match which is frustrating since I follow the tutorial step by step :(

    See the attached image.

    • Nuno Gonçalves

      I have the same problem. According to a comment I read, it might have to do with xcode 4.5 not using the method for the height the same way as it used to. Anyway, I’d like to have some feedback too.

  • Guest

    Here is the image.

  • Bruce Elliott

    Here is the image

    • http://twitter.com/manobray Lucas Ramos

      Return to the “Designing the Cell” part of the tutorial.
      Go to Interface Builder —-> Left Click the Cell —-> (Upper Right Corner) Size Inspector
      Change the Height to 78

      • numeric

        I figured it out!!! You have to go into the other xib (SimpleTableViewController.xib) and change the row height in the size inspector. That overrides any setting you put in SimpleTableCell.xib How everyone else got away with not doing that I have no idea.

  • http://www.facebook.com/people/Ryan-OConnor/219400053 Ryan O’Connor

    One of the best tutorials of anything I’ve ever followed in my life. A+++++++++

  • vinoth

    you did not told put class name

  • Aman

    Fantastic tutorial !! You made it really simple.

  • http://www.facebook.com/danyalov Jack Daniel

    you are awesome, man! my respect…great tuts. thus help me

    • http://www.simonblog.com Simon Ng

      Thanks for your words! I’m so glad to hear the tutorial helps you create your apps.

  • Pravin

    I M new in iPhone and i did everything correctly but my application crash when i run the app with below error message,

    2013-03-23 08:56:56.599 MyLocationDemo[19636:11f03] *** Terminating app due to uncaught exception ‘NSUnknownKeyException’, reason: ‘[ setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key nameLabel.’

    *** First throw call stack:

    (0x1857012 0x1173e7e 0x18dffb1 0xc1fe41 0xba15f8 0xba10e7 0xbcbb58 0x2d5019 0x1187663 0x185245a 0x2d3b1c 0x2d58da 0x35ab 0x1728fb 0x1729cf 0x15b1bb 0x16bb4b 0x1082dd 0x11876b0 0x2fcdfc0 0x2fc233c 0x2fcdeaf 0x1a72bd 0xefb56 0xee66f 0xee589 0xed7e4 0xed61e 0xee3d9 0xf12d2 0x19b99c 0xe8574 0xe876f 0xe8905 0xf1917 0x21d7 0xb5157 0xb5747 0xb694b 0xc7cb5 0xc8beb 0xba698 0x17b2df9 0x17b2ad0 0x17ccbf5 0x17cc962 0x17fdbb6 0x17fcf44 0x17fce1b 0xb617a 0xb7ffc 0x1e0d 0x1d35)

    libc++abi.dylib: terminate called throwing an exception

    Please help me…

    • Roop

      I finally solved this. In the XIB file and set the File’s Owners class to NSObject. Then set the table cell’s class to SimpleTableCell and set the Identifier to SimpleTableCell then drag from the table cell to the labels and image and set them to the proper names.

    • Rubin Zubin

      I am new to iphone programming and i am also getting sigabrt signal error even though i connected the controlls in xib files any solution regading this would be highly appreciated.

  • http://twitter.com/viterete8 Victor Pinto

    best post about Table View!
    pd:i did my homework lol

  • Pingback: UITableViewCell iOS | tediscript.wordpress.com()

  • cml

    this is a priceless tutorial.. thank you for sharing your knowledge and experiences…

  • http://twitter.com/neverbendeasy Erin Parker

    Awesome! Done and did the homework too :D Thanks so much.

  • http://twitter.com/manobray Lucas Ramos

    I had some problems and then did what everyone should do when learning.

    Erased everything and started from the beginning!

    I found my mistake and fixed what I had already learned.

    GREAT TUTORIAL! Works Perfect on iMac 2013/1 , Last available xCode 4.6.1.

  • Matty Hunt

    My app doesn’t scroll????

  • Jitendra

    thnx it was very good

  • shailesh

    Superb Tutorial :)

  • shailesh

    Thanks lot for great tutorial :) I’ve gone through all your steps and when i press on run button then it runs smoothy :) Home work is also done :) I just love your tutorials :) Thank you very much posting such a nice tutorial.

  • bjde0b

    I am getting an error on the nib of SimpleTableCell, any suggestions?

    • bjde0b

      My image didn’t load, so I have to copy the text.

      NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”SimpleTableCell” owner:self options:nil];

      error on:
      nib = (NSArray*)0x005ad184

    • bjde0b

      I am slowly learning how the debugger works. what does “this class is not key value coding-compliant” mean?

      Terminating app due to uncaught exception ‘NSUnknownKeyException’, reason: ‘[ setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key nameLabel.’

  • khanhtungna

    Great tutorials,
    But I have issue when display item.
    That’s the name does not display right place.
    I only saw the name with the prepTime when I click on an item.
    Please see picture for details.
    Many thanks for any advise!

    • khanhtungna

      I fixed this in
      -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

      Wrong code:
      cell.textLabel.text = [tableData objectAtIndex:indexPath.row]; —> It seem for the whole item.

      Right code:
      cell.nameLabel.text = [tableData objectAtIndex:indexPath.row]; —> just for the nameLabel

      Hope it might help someone,

      • GabeTHEGeek

        It helped me! Yeaaaaah.

  • Boo Rar

    Thanks Evan

    Helped a stack

    I just would like to know can you put in a Imput type like Text view and how would you refer to values in it when the user submits

  • Lee

    You’re awesome! These tutorials help me get up and running very quickly! Love the little explanations in yellow like “Property and Outlet” and of course the images that describe what you’re talking about.
    You rock bro!

  • khanhtungna

    Very nice tutorials. Thanks so much.

  • Roya

    So for me the custom format only shows when I click on the cells. I.e. scrolling through the cells look like the original, default ones, but clicking on them makes the name and prep time show. Any ideas on why this is happening?

  • Pingback: Custom comment cell with expandable text | 101 Goals()

  • IOSLORD

    Hi, I seem to have a problem with the program.

    I followed all the instructions but the part

    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row];

    – (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

    happens to show an error. ( I have imported the SimpleTableCell.h file)

    I would like it if someone can help me figure the problem.

    Thanks,

    IOSLORD

  • Subin

    Thanks for the tutorial. It was really great. I am not able to run the app. It throws an error. Please help me.

    int main(int argc, char *argv[])
    {
    @autoreleasepool {
    return UIApplicationMain(argc, argv, nil, NSStringFromClass([SUBAppDelegate class]));

    thread1: signal SIGABRT
    }
    }

    • Mike M

      I am having the same message :(

      Solution?

      • Mark Joseph Bureros

        me too I’m having the same problem
        do you have solution?

        • Mike M

          Mark, I executed the tutorial a second time with no success however I did notice this link for a TUTORIAL UPDATE which utilizes an alternate method. This way you can move forward and revisit this issue later as needed.

        • Mark Joseph Bureros

          i already fix this problem

      • Mark Joseph Bureros

        last night think

    • Gavin

      Hi Subin:

      I have the same issue, how could you fix it?

      Thanks,

  • samKing

    (I am running xcode 4.6.2) I found almost identical error to Subin. App will not run and throws exception in main.m

    return UIApplicationMain(argc, argv, nil, NSStringFromClass([SimpleTableAppDelegate class]));

    thread1: signal SIGABRT

    • IOSLORD

      Thanks
      It helped me with my problem. :)

  • Pingback: IOS编程教程(十四):回到基础,介绍面向对象编程 - iOS - 开发者第662133个问答()

  • Pingback: Custom Expandable TableView with Xcode 4.4()

  • atakan

    if found the bug it is simple delete this lines
    “@interface SimpleTableViewController ()

    @end
    ” on SimpleTableView.m file. You will again declaration SimpleTableView interface and it hasn’t tableData defination.

  • Granit Gjevukaj

    Can the same result also be achieved when using storyboards instead of nibs?

  • Imran

    I am currently stuck at the “Making the connection” stage. After creating the .h and .m files and inserting the code lines. I am unable to see the Outlets when right-clicking on the Objects in the interface builder.

    Any ideas what it could be? I have deleted the files and re-created but I still come up with nothing on Outlets right-click menu.

    (check image attached)

    • Steve

      you must select the Table view cell in “SimpleTableCell.xib” and change the class to “SimpleTableCell” (identity inspector) and the identifier also to “SimpleTableCell” (attributes inspector) !

      hope it works :)

      • PegOBrien61

        I’m having the same issue. It won’t allow me to change the class to SimpleTableCell. Just keeps changing it back to UITableViewCell. I don’t have it available in the pulldown like the downloaded code does.

      • emma

        hi im emma! i have kinda the same problem u see. im not getting the oultet option. i tried what u said earlier to imran but that didnt work for me. please help as im stuch here.
        please get back to me.

  • Lukas

    Hi!
    I got a question. If I paste the code
    @implementation SimpleTableViewController{
    NSArray *tableData;
    NSArray *thumbnails;
    }

    – (void)viewDidLoad
    {
    [super viewDidLoad];
    // Initialize table data
    tableData = [NSArray arrayWithObjects:@”Egg Benedict”, @”Mushroom Risotto”, @”Full Breakfast”, @”Hamburger”, @”Ham and Egg Sandwich”, @”Creme Brelee”, @”White Chocolate Donut”, @”Starbucks Coffee”, @”Vegetable Curry”, @”Instant Noodle with Egg”, @”Noodle with BBQ Pork”, @”Japanese Noodle with Pork”, @”Green Tea”, @”Thai Shrimp Cake”, @”Angry Birds Cake”, @”Ham and Cheese Panini”, nil];

    // Initialize thumbnails
    thumbnails = [NSArray arrayWithObjects:@”egg_benedict.jpg”, @”mushroom_risotto.jpg”, @”full_breakfast.jpg”, @”hamburger.jpg”, @”ham_and_egg_sandwich.jpg”, @”creme_brelee.jpg”, @”white_chocolate_donut.jpg”, @”starbucks_coffee.jpg”, @”vegetable_curry.jpg”, @”instant_noodle_with_egg.jpg”, @”noodle_with_bbq_pork.jpg”, @”japanese_noodle_with_pork.jpg”, @”green_tea.jpg”, @”thai_shrimp_cake.jpg”, @”angry_birds_cake.jpg”, @”ham_and_cheese_panini.jpg”, nil];
    }
    it says that ‘SimpleTableViewController’ cannot use ‘super’ because its a “root class.
    How can i solve this?
    Another thing is that Xcode says: Use of undeclared Identifier ‘thumbnails’
    here:
    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

    Please help me!
    L

  • Starter

    What is the problem???

  • Cristiano72

    Hi. When i try to make connection in xib file between the table view cell and the class “simpletabcell”, the custom class show only the uitablecell.
    Can you help me? I follow all your instruction but i can’t make this connection.

  • Gavin

    When i run the tutorial, i got the error message like below:

    int main(int argc, char *argv[])
    {
    @autoreleasepool {
    return UIApplicationMain(argc, argv, nil, NSStringFromClass([SUBAppDelegate class]));

    thread1: signal SIGABRT
    }
    }

    Can anyone help me, pls?

    Thanks,

  • ahmer afzal

    i think you forget to mentioned that SimpleTableViewController.xib also need to set Row Height = 78, but thanks for sharing great tutorials

    • sy

      thank you for this. I was having trouble with the cell size

  • kiran

    This is a great tutorial that i’d ever seen. Thanks you very much for the clear and neat explanation….

  • we

    Hi I am wonder where “cell” is being defined.

    for this particular segment of code:

    if(cell == nil)

  • Mike

    Hey man. I gotta say, these tutorials are awesome. Thank you so much for this. You sir, deserve an award.

  • Blanca

    GREAT Tutorial! Thank you so much for posting this!!!

  • Khim

    The images so nice & made me hungry :-) Simple & easy to understand. Great tutorial. Thank you so much.

  • Dhruv

    Your tutorials are phenomenal. Thank you so much for spreading your knowledge and making this a fun experience!

  • Souvik

    Hi,
    First of thanks for this great tutorial.
    I am totally new in Objective C and IOS programming. In this tutorial I am facing a problem while trying to connect the outlets to the UI components placed inside the SimpleTableCell. The IBOutlet entries declared in the SimpleTableCell.h are not appearing when i right click on the Table View Cell UI component in the object pane. I am using Xcode 5.
    Could you please help me on this?

    • Manju

      I faced the same issue. You have to select the Table view cell. Go to Identity Inspector and change the custom class to SimpleTableCell. After that, when you right click, you will find the properties added to the list.

      • Souvik

        Thanks a lot Manju. It solved the problem.

    • gloria

      Hi, I am new to Objective C & got the same problem as you.
      Change the Custom Class works for me. Please try this out.
      (FoodTableCell in the image responding to SimpleTableCell class)

  • elwood

    Great tuturials, I’m doing them all.

    One thing I think is forgotten in this tutorial is that you have to import the Recipe.h file so the SimpleTableViewController knows the Recipe class

    #import “SimpleTableViewController.h”
    #import “SimpleTableCell.h”
    #import “Recipe.h”

    @interface SimpleTableViewController ()

  • Jozef Matúš

    And what about landscape, It probbably will not fit.

  • Abdullah Al-Harbi

    Amazing step-by-step tutorial which i needed long time ago …. can’t wait to read them all :) thanks

  • Sabir

    Nice tutorial…….I got everything……….Hurrey….

  • chamu

    I am new to IOS development. Thanks a lot for these tutorials. You included each and every detail, this helped me a lot

  • Pingback: iOS学习终于过了第一道坎 | Rules R 2 B Fxcked()

  • chengfei heng

    If I set simpleTableIdentifier’s value to anything,it still does work,and it looks like it does not matter what custom cell indentified.

    static NSString *simpleTableIdentifier = @”SimpleTableCell”;

  • Faizan Khanani

    perfect tutorial

  • Akshay Gangurde

    Thank you so much….

  • TheEpicPanic

    I am currently trying this out Xcode 5 after following the previous tutorial that has been updated.

    On my SimpleTableView.m file I added the change you specified and got this:

    – (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
    static NSString *simpleTableIdentifier = @”SimpleTableCell”;

    SimpleTableCell *cell = (SimpleTableCell *)[tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    if (cell == nil)
    {
    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”SimpleTableCell” owner:self options:nil];
    cell = [nib objectAtIndex:0];
    }

    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row];
    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];
    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row];

    return cell;
    }

    anyway, the line with tableData and the line with prepTime both give me the error saying “use of undeclared identifier prepTime” and the same for tableData. What am I missing? thanks! PS. I love these tutorials! Very useful!

    • Connected Cat

      OK, so I had a similar issue. The tableData identifier is missing because it’s not declared anywhere. What you want is
      cell.nameLabel.text = [recipes objectAtIndex:indexPath.row];
      this means “go to the NSArray recipes, find section identified by indexPath.row and pass its contents to cell.nameLabel.text. I really don’t know how it’s supposed to work with tableData. If somebody can explain this – I would be very grateful, I think I’m missing something here.
      for more details: http://stackoverflow.com/questions/11175938/xcode-use-of-undeclared-identifier
      As for the prepTime – it’s the same story. There is no array called perpTime, so that is meaning less. This also seems to be a part of homework, so I’m not sure why it’s even posted. For now you can just pass the static string there:
      cell.prepTimeLabel.text = @”30 min”;

      This will display “30 min” for every cell.

  • Hadi

    You guys are amazing. I like the tutorial as I have just started learning OBJ-C

  • tony

    I’m using Xcode 5.0 and I’m just trying to change the code on cellForRowAtIndexPath to

    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];but every time i change it I just keep getting and error saying the thumbnails is wrong. I don’t know how to fix this or if I need a different code for Xcode 5.

  • Akram

    Very Nice and step by step tutorial.. owsm…..

  • Akram

    I am fan of your tutorials …

  • Angela

    SOMEONE PLEASE HELP:(((

    It said “Use of undeclared identifier ‘prepTime’ !!!

    I’ve followed every single step! And Im’m using the newest version of xcode.

    Goshhhhhh why will that happen

    • Connected Cat

      There is no array called perpTime, so that is meaningless. This seems to be a part of homework, so I’m not sure why it’s even posted. For now you can just pass the static string there:
      cell.prepTimeLabel.text = @”30 min”;

      This will display “30 min” for every cell.

  • Rejane

    I don’t manage to scroll down to the last row anymore. I tried changing the height of the frame, but the problems stays until the rows are small enough to hold in one screen without scrolling.

    Is there a way to fix this issue ?

    • ak

      I have got the same problem. Any idea how to fix it?

    • Robert L

      For those of you who plan on working on this tutorial in the future and run into this issue as I did, the solution is simply that, by default, the iPhone simulator is for 3.5 inch iPhones, but the view is usually for a 4-inch iPhone. Running this tutorial in a 4″ simulator will let you get to the last row – conversely, you can shrink it to a height of 460px (leaving 20px at the top for the status bar), and run it in a 3.5″ simulator and it will display as expected. Then you’ll have to worry about autoresizing if you plan on supporting both phone versions, of course!

  • Pingback: Week 5 Reflection | m&m()

  • zapotec

    I can make the connections with the Labels but not with the UiImage, dont know why…….I tried to delete the project, begin again from the beggining, but still the same…… Anybody knows why?? I am using Xcode 5.1 with SDK 7.1….

  • emma

    i couldnt establish relation with the properties !. when i right clicked the objects i didnt get the option of outlets what am i supposed to do now.?
    pls tell me
    i really want to learn programming.

  • Sharad Goyal

    i am new in iphone apps so it is very helpful to me

  • Rohit

    I am doing something wrong. Everything works, except the cell spacing is completely off. Any ideas what step I may have missed?

  • Daniel

    My labels don’t auto-resize to fit the content. Did I miss anything?

    • WillianT

      I’m using Xcode 5.1.1 and SDK 7.0. I have the same issue. Any idea to fix?

  • Pingback: Customize Table View Cells for UITableView | jolam()

  • Speedy

    Best very simple article very helpful i got a clear idea thanks for sharing

  • Pingback: pawn shops las vegas blvd()

  • Anu

    Hello. I have errors saying that nameLabel,prepTimeLabel,and thumbnailImageVIew are not found on object of type SimpleTableCell
    Please help
    I’ve tried everything. Everything is spelt and capitalized properly

    • aNu

      I got it

  • kunoir

    You changed the array from recipes to tableData but you didn’t add in code to fix up the instances of recipes.

  • Bence Károly

    I have completed every step, and at the last step when I’m supposed to import SimpleTableCell.h to make the errors go away, I still have two errors, such as:

    cell.nameLabel.text = [tableData objectAtIndex:indexPath.row]; // tableData undeclared identifier

    cell.thumbnailImageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];

    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row]; //prepTime undeclared indentifier

    • sunflowerflow

      I think you should modify the arrays in the @implementation bracket. And replace the tableData by recipes.

  • sunflowerflow

    I think the modification of the arrays @implementation bracket has been forgotten. And the tableData should replaced by the recipes.

  • blizzy

    So I’ve completed this tutorial and in update #1 it further helps customize the table cells by adding table cell background image. However it doesn’t show you how to do that if you made your custom table view cell through an empty interface like we did in this tutorial. Can someone please tell me how to add my own table cell background image to my cells if I created my cell through an empty interface like in this tutorial. thanks!

  • blizzkreme

    Thanks for the update. Great tutorials! It works great. By the way, is it true that Purgatory Mountain, the one found in http://bit.ly/1jifRpt, is defeating this last month?

  • Mr. Noob

    How do I change the preperation time to be 30 min? I know we can change the text through the label properties. I’m very new to iOS. Thanks

  • Aun

    i cant understand this line . cell = [nib objectAtIndex:0];
    kindly explain why 0 ?
    thanks

    • jkd359

      You have created an array with only one object and the easiest way to grab a single object from an array is to grab the first object (which will be at index 0). Objects in an array are ordered 0, 1, 2, 3, 4 – they start from 0 not 1.

  • Trung Le

    This is a great tutorial! But i don’t understand this lines of code:
    if (cell == nil)
    {
    NSArray *nib = [[NSBundle mainBundle] loadNibNamed:@”SimpleTableCell” owner:self options:nil];
    cell = [nib objectAtIndex:0];
    }

    Please help me! Thank a lot!

    • jkd359

      This is pretty much the same as:

      if (cell == nil) {

      cell = [[CustomCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

      }

      Which is basically saying, “If there is no cell in existence create a new cell but make sure it is my custom cell that i told you to create not the default UITableViewCell.”

      The difference is that the code outlined in the tutorial you are are loading the CustomCell from something called a nib which is just a UserInterface file extension (like how a word document is .doc, iOS and OSX UI files can be .nib)

  • Akhilesh

    image is not coming still help ?????/

  • _Guest_

    I keep on getting this error. I go to the area to look at the problem and this is what pops up. HELP

    ld: 5 duplicate symbols for architecture x86_64

    clang: error: linker command failed with exit code 1 (use -v to see invocation)

  • Ankit Sharma

    2014-10-10 16:03:05.286 tableview[1950:70b] *** Terminating app due to uncaught exception ‘NSInvalidArgumentException’, reason: ‘-[TableViewCell PrepTimeLabel]: unrecognized selector sent to instance 0x8aac5c0′

  • Ankit Sharma

    i got this error where tableviewcell is my class name

  • J

    Thank you for the tutorials! I am receiving an issue in SimpleTableViewController.m when I enter:

    cell.prepTimeLabel.text = [prepTime objectAtIndex:indexPath.row]

    I receive an error stating “Use of undeclared identifier ‘prepTime’, however, I’ve checked in SimpleTableCell.m to make sure I typed the information in correctly there and I did. All seems correct everywhere else.

    What do I need to do to remove this error?

  • Helios Narcissus

    you sir have a knack for teaching noobies :) hail hail ! ^_^

  • Anil Maharjan

    hello sir, i have done table view tuto in xcode 5 from the link ” http://www.appcoda.com/uitableview-tutorial-storyboard-xcode5/ ” and it ran successfully, but this tutorial has been done in xib, i am totally new to ios so can you please help me to do in storyboard..

208 Flares Twitter 26 Facebook 154 Google+ 27 LinkedIn 1 208 Flares ×