绘制游戏中心，如tableview单元格 [英] Drawing Game Center like tableview cells

问题描述

我现在已经添加了一笔奖金，奖励给任何可以拍摄下面三张图片的人，并制作UITableView的工作实现，模仿游戏中心的外观和感觉在游戏标签上。实现必须使用非分组的tableview，但是演示四个单元格变体（顶部，中间，底部和单个）中的每一个

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)

可以谁有人了解Apple如何实现游戏标签上出现的游戏中心 tableview单元格？

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

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

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.

我试图绘制自己的边框使用Quartz 2D但似乎无法获得接近相同质量的任何东西，并且我认为使用具有低alpha分量的颜色绘制将实现纹理混合，但似乎并非如此。

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.

编辑：

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

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.

编辑：

所以我做了一点点，看起来好像Apple通过使用标准的tableviewcell，无缝纹理，边框纹理和a创建了一个分组tableview的错觉。细胞面具。所有这些结合起来消除了这种错觉，并支持我的理由，为什么背景与细胞滚动（我到目前为止无法复制的东西直到现在）。

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

< img src =https://i.stack.imgur.com/riPdD.pngalt =游戏中心单元格边框纹理>

游戏中心单元格面具

现在我只想弄清楚他们如何将所有这些结合起来以消除这种错觉。任何帮助将不胜感激。

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.

实际的Game Center表和下面提到的@psycho解决方案之间的差异，你可以看到它还有一段距离;单元格宽度太窄，边框太薄，圆角半径太大。

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.

推荐答案

我不确定回答你的要求，因为我使用了一个分组的tableView，但是在测试它时似乎可以做到这一点，并且背景随着单元格滚动，因为它可以在游戏中心看到。

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.

由方式，对不起，我不使用目标C而是使用Monotouch和C＃，但我从经验中知道，当找到用另一种语言编写的有趣技巧时，从一个到另一个找到绑定并不是那么难。

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.

好吧，停止bab呀学语，这是代码。

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

所以主要的调整在于使你的tableView透明化足够高，不需要滚动，并将其粘贴到scrollView中，滚动它的背景及其内容（这里是tableViews。）

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.)

这篇关于绘制游戏中心，如tableview单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！