Рисование игрового центра в виде ячеек таблицы

Question

Теперь я добавил награду, которая будет присуждена каждому, кто может взять три изображения ниже и создать рабочую реализацию UITableView, которая имитирует внешний вид, найденный в Game Center на вкладке Игры. Реализация должна использовать не сгруппированное табличное представление, но демострировать каждый из четырех вариантов ячейки (верхняя, средняя, ​​нижняя и одиночная)

Может ли кто-нибудь пролить свет на то, как Apple добилась появления в Game Center ячеек таблицы, которые отображаются на вкладке Игры ?

Я конкретно имею в виду, как они рисуют границу, и как они, кажется, смешивают ее с базовой зеленой шумной текстурой.

Я пытался нарисовать свои собственные границы с помощью Quartz 2D, но, похоже, я не могу достичь почти такого же качества, и я думал, что рисование цветом, имеющим низкую альфа-компоненту, приведет к смешиванию текстур, но, похоже, это не так будь случай.

Если бы кто-нибудь мог пролить свет или даже поделиться каким-либо ценным кодом, я был бы невероятно благодарен.

EDIT:

Что-то, что я заметил, это то, что просмотр таблицы не соответствует обычному поведению. В обычном сгруппированном табличном виде фон неподвижен, и ячейки прокручиваются над ним, но в Game Center ( и, в частности, в табличном представлении, которое меня интересует ), фон прокручивается вместе с ячейками. Это наводит меня на мысль, что табличное представление вообще не сгруппировано, и это всего лишь иллюзия, смешивающая кварцевый 2D рисунок и изображения.

EDIT:

Итак, я немного поковырялся, и похоже, что Apple создает иллюзию сгруппированного табличного представления, используя стандартную ячейку табличного представления, бесшовную текстуру, текстуру границы и маску ячейки. Все это вместе снимает эту иллюзию и поддерживает мои рассуждения о том, почему фон прокручивается клетками (, что я до сих пор не мог воспроизвести до сих пор ).

Фоновая текстура ячейки Game Center ( бесшовные )

Текстура границы игрового центра

Игровой центр, клеточная маска

Теперь я просто должен выяснить, как они объединяют все это вместе, чтобы осуществить эту иллюзию. Любая помощь будет принята с благодарностью.

Различия между фактической таблицей 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, но при тестировании, похоже, все получается, и фон прокручивается с ячейками, как это видно в игровом центре.

Кстати, извините, я не использую цель 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 прозрачным и достаточно высоким, чтобы он не нуждался в прокрутке, и вставить его в scrollView, который будет прокручивать его фон с его содержимым (здесь, tableViews.)