UITableView Part 1: Styling a Grouped Table

I’ve been struggling to come up with a good tableview design that looks decent and doesn’t use the existing vertical-striped background of the grouped table view. In playing around with the various settings, I found a few things I decided to post upon. While I’m not the greatest at UI design, and I’m not a graphic designer, I hope this may help you determine what you can tweak with the UITableView. Note that I’m using Xamarin Studio and C#, instead of Objective-C. However, what code I write should be very easily translatable.

To start, the grouped tableview provides a header/footer with a series of rounded corner tables. It also naturally applies a padding to put spacing on the left and right side. In searching around, I found a good resource to remove this padding and “lengthen” the table to take up the full screen. To do this is very simple; simply apply a Frame with an added width, such as the following.

this.TableView.Frame = new RectangleF (
  this.TableView.Frame.X - 20, 
  this.TableView.Frame.Y, 
  this.TableView.Frame.Width + 40,
  this.TableView.Frame.Height);

This code runs in the ViewDidAppear method. Notice the subtracted width, removing the default width of the frame by twenty and adding 40 to the width, which expands the table to the entire frame.

The key is adding the rounded header. The first approach I’ve seen is to use a custom cell image for the top and bottom rounded corners. This certainly works as an approach to rounding. The alternative approach I’ve taken is to create a custom header and footer, like the following below:

public override UIView GetViewForHeader (UITableView tableView, int section)
{
	var root = new UIView ();
	root.Frame = new RectangleF (20, 0, 320, 30);

	UIImage img = UIImage.FromFile ("tableroundedtop_iphone.png");
	var imgView = new UIImageView (img, img) { Frame = root.Frame };
        root.AddSubview(imgView);
	.
	.

        return root;
}

In this code above, the root view comprises of a UIImageView as it’s child. A second child, a label, is also added and centered within the header, which worked from utilizing a need trick, as shown here:

var label = new UILabel { Text = "HEAD", BackgroundColor = UIColor.Clear };
label.SizeToFit ();
label.Center = root.Center;

First, the label adds the text and color information. Secondly, the SizeToFit() method sizes the label appropriately based on the size (font width and font size) of the text. Using the Center property, which returns the center of the object, the label’s center now becomes the root control’s center, which in effect centers the element. Very interesting.

To size the header and footer, we can override the GetHeightForHeader and GetHeightForFooter:

public override float GetHeightForFooter (UITableView tableView, int section)
{
	return 60;
}

The value returned becomes the height of the cell; sometimes the content of the footer stretches to meet the height; but note in the code above, we define a Frame of only 30 pixels high. The Frame essentially controls the area the view will draw in; the footer specifies that it will draw in the first 30 pixels. With a height of 60 pixels for the footer, a 30 pixel space fits within each tableview, as you’ll see in the image.

How do we style the table cells? There are several options. Depending on the style of the table, such as Default style, you can style the cell directly by setting it’s BackgroundColor to the TextLabel label control, or on the cell. Additionally, you can set the BackgroundView property on the cell itself and supply a view to use as the background (which can be an image, etc.), as another alternative.

Also, to change the grouped table background and remove the vertical striping, you can use the following code to set a static color for the table, but remove the background view.

this.TableView.BackgroundColor = UIColor.White;
this.TableView.BackgroundView = null;
this.TableView.Opaque = false;

The final result? Not the prettiest, but at least it was a good learning lesson.

iOS Grouped UITableView

Advertisements

4 thoughts on “UITableView Part 1: Styling a Grouped Table

  1. Pingback: UITableView Part 2 – DataSources and Sources | On All Things Web

  2. Woah! I’m really enjoying the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s hard
    to get that “perfect balance” between user friendliness
    and visual appeal. I must say you’ve done a awesome job with this.
    Also, the blog loads super quick for me on Internet explorer.
    Exceptional Blog!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s