像表格视图单元格一样绘制游戏中心

Question

我现在添加了一项赏金，任何能够拍摄下面三张图片并生成 UITableView 的工作实现（模仿游戏中心游戏中的外观和感觉的 UITableView 的人）都将获得奖励选项卡。该实现必须使用非分组的表格视图，但要演示四个单元格变体（顶部、中间、底部和单个）中的每一个

任何人都可以阐明Apple如何实现游戏中心< /strong> 出现在游戏选项卡上的表格视图单元格？

我特别指的是他们如何绘制边界，以及他们如何让它与底层的绿色噪点纹理混合。

我尝试使用 Quartz 2D 绘制自己的边框，但似乎无法达到相同的质量，并且我认为使用具有较低 alpha 分量的颜色进行绘制可以实现纹理混合，但情况似乎并非如此。

如果有人可以阐明任何观点，甚至分享任何适当的代码，我将非常感激。

编辑：

我注意到表格视图不符合通常的行为。在正常的分组表格视图中，背景是固定的，单元格在其上滚动，但在游戏中心（特别是我关心的表格视图）中，背景与单元格一起滚动。这让我相信桌面视图根本没有分组，这只是 Quartz 2D 绘图和图像混合的幻觉。

编辑：

所以我做了一些探索，看起来苹果确实通过使用标准 tableviewcell、无缝纹理、边框纹理和单元蒙版来创建分组 tableview 的幻觉。所有这些结合起来消除了这种错觉，并支持了我关于为什么背景随单元格滚动的推理（到目前为止我还无法复制）。

游戏中心单元格背景纹理（无缝）

游戏中心单元格边框纹理

游戏中心单元格蒙版

现在我必须弄清楚他们如何将所有这些结合在一起来实现这种幻觉。任何帮助将不胜感激。

实际的 Game Center 表格与@psycho 建议的解决方案之间的差异（您可以在下面看到）仍然有一定的差距；单元格宽度太窄，边框太细，角半径太大。

Answer 1

他们正在删除所有默认的绘图/边框，并简单地使用带有自己的图像的自定义单元格。

关于您的编辑：这是不正确的。我也实现了这种行为。 ，之前，我不记得具体是怎么做到的，我想我直接在表格视图上设置背景图像，而不是它后面的视图。（参见下面的代码。）

编辑：

这是我用来模仿单元格“拖动”背景部分的行为的代码：

- (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)];

}

我已将其放入 UITableViewController 子类中，并在多个实例中继承了该子类。如果仔细观察，细胞外部的“颜色”/纹理会随着细胞移动。

Answer 2

我不确定是否准确回答您的要求，因为我使用了分组的​​ tableView，但在测试时它似乎可以解决问题，并且背景随单元格滚动，正如在游戏中心中看到的那样。

顺便说一句，抱歉，我不使用 Objective C，而是使用 Monotouch 和 C#，但我从经验中知道，当找到用另一种语言编写的有趣技巧时，找到一种语言到另一种语言的绑定并不难。

好了，别废话了，代码如下。

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;
    }
}

因此，主要的调整在于使您的 tableView 透明且足够高，以便不需要滚动，并将其粘贴到滚动视图中，滚动视图将滚动其背景及其内容（此处为 tableViews）。