Duration

~10 minutes

Goals

The primary goal of this lab will be to explore the different UITableViewCell styles that are included in iOS. This is a group exercise intended to be done with an instructor.

Required assets

There is a completed solution in the Exercise 3 folder. In addition, if you did not complete the prior exercise, you can use the completed solution from that exercise as a starting point here.

Challenge

You will be continuing from the prior exercise, working with an instructor to modify your GetCell implementation (in either Table View) to try out the built-in cell styles through the UITableViewCell constructor.

Depending on the style you are working with, you will need to fill in different subview values. Here are the properties from the EmailItem that will be used in the lab:

• Subject will be mapped to TextLabel.Text.
• Body will be mapped to DetailTextLabel.Text.
• GetImage() will be used to create an image for ImageView.Image.

Steps

Below are the step-by-step instructions to implement the exercise. You only need to work with a single version of your Table View. We have two in this project and either one can be used. The lab instructions here will assume you are continuing with the code-based approach that utilizes the UITableViewSource.

The Default style

We've already been using the Default style, however we haven't set all the fields.

1. Open the source file for your EmailServerDataSource class (or the Table View Controller implementation, either will work) and locate the GetCell method. All our changes will happen here.
2. Let's officially use the default style - change the constructor for the UITableViewCell to use the version that takes a UITableViewCellStyle and a string.
   • Set the style the Default
   • Pass null in for the string parameter. We'll use this later.
3. Run the app to see that everything is the same.
4. Next, set the cell's ImageView.Image property to the result from the EmailItem.GetImage() method. This will create a rounded "initials" image indicating who the email is from. You can look at the code in the EmailServer class if you are interested in CoreGraphics and how this was done.

Show Code

public override UITableViewCell GetCell(UITableView tableView,
                                        NSIndexPath indexPath)
{
    UITableViewCell cell = new UITableViewCell(UITableViewCellStyle.Default, null);
    var item = emailServer.Email[indexPath.Row];

    cell.TextLabel.Text = item.Subject;
    cell.ImageView.Image = item.GetImage();
    return cell;
}

5. Run the app again to see the results.

The Subtitle style

Next, let's try the Subtitle style. This style includes a second piece of text we can add to the screen.

1. Change the cell style to Subtitle instead of Default.
2. Fill in the DetailTextLabel.Text property with the EmailItem.Body property.
3. Run the app to see the results.
4. This is probably the most common style used as it presents a reasonable amount of information. Let's customize it a bit to see what options are available.
   • Set the Font property for the TextLabel to be UIFont.FromName("Helvetica Light", 14).
   • Set the Font property for the DetailTextLabel to be UIFont.FromName("Helvetica Light", 12).
   • Set the TextColor property for the DetailTextLabel to be UIColor.LightGray.

Show Code

public override UITableViewCell GetCell(UITableView tableView,
                                        NSIndexPath indexPath)
{
    UITableViewCell cell = new UITableViewCell(UITableViewCellStyle.Subtitle, null);
    var item = emailServer.Email[indexPath.Row];

    cell.TextLabel.Font = UIFont.FromName("Helvetica Light", 14);
    cell.DetailTextLabel.Font = UIFont.FromName("Helvetica Light", 12);
    cell.DetailTextLabel.TextColor = UIColor.LightGray;

    cell.TextLabel.Text = item.Subject;
    cell.ImageView.Image = item.GetImage();
    cell.DetailTextLabel.Text = item.Body;
    return cell;
}

5. Run the app to see the results.

The Value1 style

Next, let's try the Value1 cell style. This style has the same features as Subtitle but places the text in different places.

1. Change the cell style to Value1.
2. Run the app to see the change. What happened to our detail text?
3. The problem is that the two text controls now share the same line. Our main text is too long so the detail text is pushed out of view. This is a common problem with this style. We'll solve this in another course when we talk about custom cells; for now, just clip the text to 20 characters using Substring.

cell.TextLabel.Text = item.Subject.Substring(0, Math.Min(20, item.Subject.Length)) + "...";

This isn't an optimal solution, try rotating the device .. now we've got more room but aren't taking advantage of it. Unfortunately, the built-in style won't let us adjust the layout without creating a custom cell.

The Value2 style

Finally, let's try the Value2 cell style.

1. Change the cell style to Value2.
2. Run the app to see the change. What happened?
3. You should have gotten a runtime exception - something like this:

4. Value2 is the only style that does not include an image. Fix the problem by commenting out the image assignment.
5. Run the app to see the results.
6. Reset the app to use the Subtitle style and uncomment the image assignment to prepare for the next exercise.

Summary

In this exercise, you tried out each of the basic cell styles. The supplied Completed project has the updated code in both the Storyboard and code-based ViewControllers.