绘制游戏中心,如tableview单元格

我现在已经添加了一笔奖金,奖金将颁发给任何能够拍摄下面三张图片的人,并制作一个UITableView的工作实现,模仿游戏选项卡上游戏中心的外观和感觉。 实现必须使用非分组的tableview,但演示四个单元格变体(顶部,中间,底部和单个)中的每一个

任何人都可以了解Apple如何实现游戏选项卡上出现的Game Center tableview单元格吗?

我特别指的是他们如何绘制边框,以及它们如何使它与底层的绿色噪音纹理融为一体。

我尝试使用Quartz 2D绘制自己的边框,但似乎无法获得接近相同质量的任何地方,我认为使用具有低alpha分量的颜色绘制将实现纹理混合,但这似乎不是这种情况。

如果任何人都可以放弃任何光线,甚至分享任何适当的代码,我将非常高兴。

编辑:

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

编辑:

所以我做了一点点,看起来似乎Apple通过使用标准的tableviewcell,无缝纹理,边框纹理和单元掩码来创建分组tableview的错觉。 所有这些结合起来就消除了这种错觉,并支持我为什么背景与细胞滚动的推理( 到目前为止,我到目前为止还无法复制 )。

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

细胞背景

游戏中心单元格边框纹理

游戏中心单元格边框纹理

游戏中心细胞面具

游戏中心细胞面具

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

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

@psycho解决方案

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

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

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

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

他们正在删除所有默认的绘图/边框,只使用自己的图像自定义单元格。

关于你的编辑:这是不正确的。 我也实现了这种行为。 之前,我不记得我是怎么做到的,我想我直接在桌面视图上设置背景图片,而不是背后的视图。 (参见下面的代码。)

编辑:

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

 - (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子类中,并在几个实例中inheritance了它。 仔细观察,细胞外的“颜色”/纹理随着细胞移动。