Ответ 1

Этот проект был обновлен для Xcode 8 и Swift 3.

Создать новый проект

Это может быть просто приложение с одним представлением.

Добавьте код

Создайте новый файл класса Touch Cocoa (File > New > File... > iOS > Cocoa Touch Class). Назовите его MyCollectionViewCell. Этот класс будет содержать выходы для просмотров, которые вы добавляете в свою ячейку в раскадровке.

import UIKit
class MyCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var myLabel: UILabel!
}

Мы подключим эту розетку позже.

Откройте ViewController.swift и убедитесь, что у вас есть следующий контент:

import UIKit
class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    let reuseIdentifier = "cell" // also enter this string as the cell identifier in the storyboard
    var items = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"]


    // MARK: - UICollectionViewDataSource protocol

    // tell the collection view how many cells to make
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.items.count
    }

    // make a cell for each cell index path
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        // get a reference to our storyboard cell
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath as IndexPath) as! MyCollectionViewCell

        // Use the outlet in our custom class to get a reference to the UILabel in the cell
        cell.myLabel.text = self.items[indexPath.item]
        cell.backgroundColor = UIColor.cyan // make cell more visible in our example project

        return cell
    }

    // MARK: - UICollectionViewDelegate protocol

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        // handle tap events
        print("You selected cell #\(indexPath.item)!")
    }
}

Примечания

• UICollectionViewDataSource и UICollectionViewDelegate - это протоколы, которые следуют в представлении коллекции. Вы также можете добавить протокол UICollectionViewFlowLayout для изменения размера представлений программным способом, но это необязательно.
• Мы просто помещаем простые строки в нашу сетку, но вы, безусловно, могли бы сделать изображения позже.

Настройка раскадровки

Перетащите представление коллекции в контроллер просмотра в своем раскадровке. Вы можете добавить ограничения, чтобы заполнить родительский вид, если хотите.

Убедитесь, что ваши настройки по умолчанию в Инспекторе атрибутов также

• Элементы: 1
• Макет: поток

Маленькая рамка в левом верхнем углу коллекции представляет собой коллекцию View Cell. Мы будем использовать его как нашу прототипную ячейку. Перетащите ярлык в ячейку и центрируйте ее. Вы можете изменить размеры границ ячеек и добавить ограничения, чтобы поместить ярлык, если хотите.

Напишите "ячейку" (без кавычек) в поле "Идентификатор" Инспектора атрибутов для ячейки просмотра коллекции. Обратите внимание, что это значение равно let reuseIdentifier = "cell" в ViewController.swift.

И в Identity Inspector для ячейки задайте имя класса MyCollectionViewCell, наш пользовательский класс, который мы создали.

Подключить розетки

• Подключить ярлык в ячейке коллекции до myLabel в классе MyCollectionViewCell. (Вы можете Control-drag.)
• Подключить просмотр коллекции delegate и dataSource к контроллеру представления. (Щелкните правой кнопкой мыши Вид коллекции в структуре документа. Затем нажмите и перетащите стрелку "плюс" до "Контроллер представления".)

Пройденные

Вот как это выглядит после добавления ограничений для центрирования метки в ячейке и привязки коллекции к стенам родителя.

Создание улучшений

Приведенный выше пример работает, но он довольно уродлив. Вот несколько вещей, с которыми вы можете играть:

Цвет фона

В построителе интерфейсов перейдите в Вид коллекции > Атрибут > Инспектоp > Вид > Фон.

Расстояние между ячейками

Изменение минимального расстояния между ячейками до меньшего значения делает его более удобным. В построителе интерфейсов перейдите в свой Вид коллекции > Инспектор размеров > Минимальный интервал и уменьшите значения. "Для ячеек" - это горизонтальное расстояние, а "Для линий" - вертикальное расстояние.

Форма ячейки

Если вы хотите закругленные углы, границу и т.п., вы можете играть с ячейкой layer. Вот пример кода. Вы можете поместить его непосредственно после cell.backgroundColor = UIColor.cyan в код выше.

cell.layer.borderColor = UIColor.black.cgColor
cell.layer.borderWidth = 1
cell.layer.cornerRadius = 8

См. этот ответ для других вещей, которые вы можете сделать со слоем (например, тень).

Изменение цвета при нажатии

Это улучшает работу пользователя, когда ячейки реагируют визуально на краны. Один из способов добиться этого - изменить цвет фона при касании ячейки. Для этого добавьте следующие два метода в класс ViewController:

// change background color when user touches cell
func collectionView(_ collectionView: UICollectionView, didHighlightItemAt indexPath: IndexPath) {
    let cell = collectionView.cellForItem(at: indexPath)
    cell?.backgroundColor = UIColor.red
}

// change background color back when user releases touch
func collectionView(_ collectionView: UICollectionView, didUnhighlightItemAt indexPath: IndexPath) {
    let cell = collectionView.cellForItem(at: indexPath)
    cell?.backgroundColor = UIColor.cyan
}

Вот обновленный вид:

Дальнейшее изучение

• Простой учебник UICollectionView
• Учебник UICollectionView Часть 1: Начало работы
• Учебное пособие UICollectionView Часть 2: Многоразовые представления и выбор ячеек

версия UITableView этого Q & A

• Пример UITableView для Swift

Ответ 2

Делегаты и источники данных UICollectionView

//MARK: UICollectionViewDataSource

override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
    return 1     //return number of sections in collection view
}

override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 10    //return number of rows in section
}

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCellWithReuseIdentifier("collectionCell", forIndexPath: indexPath)
    configureCell(cell, forItemAtIndexPath: indexPath)
    return cell      //return your cell
}

func configureCell(cell: UICollectionViewCell, forItemAtIndexPath: NSIndexPath) {
    cell.backgroundColor = UIColor.blackColor()


    //Customise your cell

}

override func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
    let view =  collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: "collectionCell", forIndexPath: indexPath) as UICollectionReusableView
    return view
}

//MARK: UICollectionViewDelegate
override func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
      // When user selects the cell
}

override func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
     // When user deselects the cell
}

Ответ 3

UICollectionView аналогичен UITableView, но он дает нам дополнительную функциональность, просто создавая представление сетки, что немного проблематично в UITableView. Это будет очень длинный пост, я упоминаю ссылку из которой вы получите все в простых шагах.