Drawing Game Center like tableview cells

I've now added a bounty which will be awarded to anyone who can take the three images below and produce a working implementation of a UITableView that mimicks the look and feel of the one found in Game Center on the Games tab. The implementation must use a non-grouped tableview but demostrate each of the four cell variants (top, middle, bottom and single)

Can anyone shed any light on how Apple achieve the Game Center tableview cells which appear on the Games tab?

I'm specifically referring to how they draw the border, and how they seem to get it to blend with the underlying green noisey texture.

I've tried drawing my own borders using Quartz 2D but cannot seem to get anywhere near the same quality, and I thought drawing with a color which had a low alpha component would achive the texture blending but this doesn't seem to be the case.

If anyone can shed any light, or even share any approriate code I would be incredibly greatful.

EDIT:

Something I've noticed is that the tableview doesn't conform to usual behaviour. In a normal grouped tableview the background is stationary and the cells scroll over it, but in Game Center (and specifically the tableview I'm concerned with) the background scrolls with the cells. This is leading me to believe that the tableview is not grouped at all, and this is but an illusion mixing Quartz 2D drawing and images.

EDIT:

So I've done a little poking around, and it does seem as though Apple a creating an illusion of a grouped tableview by using a standard tableviewcell, a seamless texture, a border texture and a cell mask. All this combined pulls off that illusion and supports my reasoning about why the background scrolls with the cells (something I've so far been unable to replicate until now).

Game Center cell background texture (seamless)

Game Center cell border texture

Game Center cell mask

Now I've just got to figure out开发者_运维知识库 how they combine all these together to pull off this illusion. Any help will be greatly appreciated.

The differences between the actual Game Center table and the solution @psycho suggested below which you can see is still some way off; the cell widths are too narrow, the border too thin and the corner radius too large.

---

They are removing all of the default drawing/borders and simply using custom cells with their own images.

Regarding your edit: This is incorrect. I've achieved that behavior too. , before, I don't recall exactly how I did it, I think I set the background image directly on the table view, not the view behind it. (See the code below.)

EDIT:

Here's the code I used to mimic the behaviour of cells "dragging" portions of the background with them:

- (void)viewDidLoad {
[super viewDidLoad];

[self.tableView setRowHeight:65.0];

[self.tableView setBackgroundColor:[UIColor clearColor]];
[self.tableView setBackgroundView:nil];
[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"metal_settings.png"]]];    

[self.tableView setSeparatorStyle:UITableViewCellSeparatorStyleNone];

[self setContentSizeForViewInPopover:CGSizeMake(300, 300)];

}

I've put this in a UITableViewController subclass and have inherited from that in several instances. If you look closely, the "color"/texture outside of the cells moves with the cells.

---

I'm not sure to answer exactly what you asked for because I used a grouped tableView, but when testing it seems to do the trick, and the background scrolls with the cells, as it can be seen in game center.

By the way, sorry, I don't use objective C but Monotouch and C#, but I know from experience it's not so hard to find bindings from one to the other when finding an interesting trick written in another language.

Well, stop babbling, here's the code.

public class test : UIScrollView {
    UIImage _borderTexture = null;
    int _paddingTop = 10;

    public test (RectangleF frame) : base (frame) {
        //setting the green background for the whole view
        BackgroundColor = UIColor.FromPatternImage(new UIImage("bg.png")); 
        //initializing texture for borders
        _borderTexture = new UIImage("bt.png");

        //adding some various-sized tables
        addTable(new string[] {"lonely cell"});
        addTable(new string[] {"top cell", "middle cell 1", "middle cell 2", "bottom cell"});
        addTable(new string[] {"this", "is", "a", "quite", "long", "table", "for", "an", "exemple"});

        //and then we adjust the scroll size to contents
        ContentSize = new SizeF(frame.Size.Width, _paddingTop);
    }

    void addTable(string[] contents) {
        // approximately keeping track of content's heights to adjust scrollView size
        // the table must be AT LEAST as high as its content to avoid its own scroll
        int approximativeHeight = contents.Length * 44 + 25;
        UITableView t = new UITableView(new RectangleF(10, _paddingTop, Frame.Width - 20, approximativeHeight), UITableViewStyle.Grouped);
        _paddingTop += approximativeHeight;

        //make the tableView's background invisible
        t.BackgroundColor = UIColor.FromWhiteAlpha(0, 0);
        //setting the yellow texture for cell borders
        t.SeparatorColor = UIColor.FromPatternImage(_borderTexture);
        //using our own data source to customize cells at creation
        t.DataSource = new testTVDataSource(contents);

        //finally, add the custom table to the scroll view
        AddSubview(t);
    }
}

public class testTVDataSource : UITableViewDataSource {     
    string[]    _contents = null;
    string      _cellID = "reuse";

    public testTVDataSource(string[] contents) {
        _contents = contents;
    }

    public override int RowsInSection (UITableView tableView, int section) {
        return _contents.Length;
    }

    public override UITableViewCell GetCell (UITableView tableView, NSIndexPath indexPath) {
        var cell = tableView.DequeueReusableCell (_cellID);
        if (cell == null) {
            cell = new UITableViewCell (UITableViewCellStyle.Default, _cellID);
            //make all backgrounds of the cell and its subviews to be invisible
            cell.BackgroundColor = UIColor.FromWhiteAlpha(0, 0);
            cell.TextLabel.BackgroundColor = UIColor.FromWhiteAlpha(0, 0);
            //avoid the blue highlighting when selected
            cell.SelectionStyle = UITableViewCellSelectionStyle.None;
        }
        //just some content for test
        cell.TextLabel.Text = _contents[indexPath.Row];
        return cell;
    }
}

So the main tweak resides in making your tableView transparent and high enough for it to not need scrolling, and to stick it into a scrollView which will scroll its background with its content (here, the tableViews.)