Рассмотрим 2 варианта создания коллекции в storyboard. Будем использовать Tab Bar Controller из https://zen.yandex.ru/media/id/6005d895f46d284abbb641fe/primer-uitabbarcontroller-swift-6005d8c61f435e52d4c31b91
Создадим новый проект EnterInTableView.
Первый вариант когда будем добавлять CollectionView Controller в Storyboard.
- Откроем Main.storyboard и добавим в него CollectionView Controller.
Теперь проект будет запускаться с коллекции. Добавим swift файл который свяжем с отображением CollectionView Controller. В дереве проекта находим основную папку проекта EnterInTableView зажимаем Ctr и нажимаем на папку. Выбираем New File...
Выбираем Cocoa Touch Class --> Next
Меняем Subclass на UICollectionViewController. Имя класса заполнится автоматически CollectionViewController.
Открываем Main.storyboard и связываем отображение с созданным классом CollectionViewController.
Для того чтобы открыть отображение и код нужно вызвать ассистента. Выбрав в отображении Collection View Controller.
Зададим идентификатор ячейки Cell. Для этого выберем ячейку в отображении и зайдем в атрибуты там будет поле Identifier.
Для отображения создадим массив numberArray. Для заполнения массива числами создадим функцию func createArray(), которая будет заполнять массив числами от 0 до 100.
Начнем заполнять коллекцию данными.
Заполним ячейки данными из нашего массива. Для этого обратимся к методу
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {...}
В настройках количества секций укажим 1.
Если запустить проект увидим ячейки с цифрами до 100. Если потянем ячейки вниз а потом снова отпустим увидим что ячейки которые искрились внизу экрана отписывались заново и с наложением цифр друг на друга. Чтобы такая проблема не возникала мы создадим свой класс для ячейки.
Создание и настройка кастомной ячейки.
- Выбираем Фаил - New File.. или Ctr+ нажаите на папку проекта - New File.
- Выбираем Cocoa Touch Class --> Next
- Меняем Subclass на UICollectionViewCell. Имя ячейке зададим TextCollectionViewCell. Ставим галочку Also create XIB file.
- - Next - Create
Из файла CollectionViewController удалим строку:
private let reuseIdentifier = "Cell"
В файл TextCollectionViewCell добавим строку:
static let identifier = "Cell"
Откроем TextCollectionViewCell.xib и расширим отображение ячейки для более удобного взаимодействия. Для этого наводим на край и тащим.
- Нажмем на + и перетащим Label внутрь ячейки.
- Закрепим Constraint по 16 от всех краев.
- Меняем расположение текста в Label.
- Выбираем ячейку и прописываем ей идентификатор Cell.
- Откроем Assistent для ячейки.
- Протянем Outlet для Label. @IBOutlet weak var numberLabel: UILabel!
Добавим функцию конфигурирования ячейки которую будем использовать для изменения текста в Label.
Откроем Main.storyboard и выберем ячейку в коллекции
И удаляем ячейку из Collection View ( удалить как стернеть на клавиатуре выбрав элемент)
Переходим в CollectionViewController.swift видим ошибку что переменная reuseIdentifier не найдена .
Изменим данный код
Так же изменим инициализацию ячейки с новым отображением. Здесь будем использовать нашу функцию configure.
Запустим проект и видим что все работает точно так же но ячейка создана отдельным XIB файлом.
Мы видим что цифры до 10 сместились, это из-за настройки нашего Label и то что текст должен быть по середине ячейки.
- Покрасим ячейки в цвет чтобы видеть их размер.
- Открываем TextCollectionViewCell.xib и выбираем Cell.
- Смотрим Атрибуты и ищем background выбираем любой цвет.
- Запустим проект и видим размер ячеек не одинаков.
Научимся настраивать размер ячейки при помощи метода: collectionViewLayout sizeForItemAt
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
CGSize(width: 80, height: 80)
}
- Откроем CollectionViewController найдем где заканчивается класс }.
- Добавим расширение коллекции UICollectionViewDelegateFlowLayout
Для того чтобы изменение размера ячейки работало нужно открыть Main.storyboard и выбрать коллекцию - открыть инспектор размера - установить Etimated Size - None.
Изменим размер в CollectionViewController: UICollectionViewDelegateFlowLayout
CGSize(width: 150, height: 80)
Изучим что такое секции и как их создавать коллекции.
Для того чтобы разделить на секции нужно сделать новую ячейку для заголовка секции. Для более удобной навигации в проекте создадим папку Subviews( СабВью - Подпредставления):
- Зажимаем на клавиатуре Ctr + нажимаем на папку проекта, выбираем New Group.
- пишем название Subviews
Внутри этой папки создадим новый Фаил ячейки для заголовка коллекции CollectionReusableView. Показано создание файла CollectionReusableView:
Настроим внешний вид ячейки - например Круглая картинка с основным текстом и дополнительным. Выберем CollectionReusableView.xib.
Перетащим элементы внутрь ячейки и закрепим:
- Перетащим картинку.
- Выберем ячейку и отключим настройку Safe Area, для более точной настройки constraint.
- Закрепим нашу картинку слева, ширину и высоту.
- Нажмем Ctr и потянем внутрь ячейки для закрепления картинки по середине ячейки.
- Выбираем посередине Vertically.
- Перетаскиваем два Label.
- Выбираем первый Label настраиваем constraint. К верху 16, слева 32, снизу 8, справа 16.
- Выбираем второй Label настраиваем constraint. К низу 16, слева 32, справа 16. К верху не делаем так как первый label уже закрепился к нему на расстоянии 8.
- Изменим у первого Label размер шрифта на 22 и текст Algiment слева.
- У второго Label изменим Size шрифт на 15 и текст Algiment слева.
Command+ B - постоим проект чтобы код скомпилировался и принял новые файлы.
Проветрим что класс связан с отображением и откроем Ассистент( код) для ячейки и протянем Аутлеты:
@IBOutlet weak var imageView: UIImageView!
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var subtitleLabel: UILabel!
Зададим идентификатор ячейки в Атрибутах и в коде:
Откроем CollectionViewController.swift и добавим наш заголовок в коллекцию.
collectionView.register(UINib(nibName: "CollectionReusableView", bundle: nil), forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: CollectionReusableView.identifier)
Инициализируем заголовок в коллекции настройкой ячейки
override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: CollectionReusableView.identifier, for: indexPath) as! CollectionReusableView
return header
}
Добавим настройку размера ячейки заголовка:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
return CGSize(width: collectionView.frame.width, height: 40)
}
Добавим в CollectionReusableView.swift конфигурацию параметров
func configure() {
imageView.backgroundColor = .purple
titleLabel.text = "Title text here"
subtitleLabel.text = "subtitle text "
}
В CollectionViewController.swift в методе viewForSupplementaryElementOfKind добавим вызов функции конфигурирования заголовка.
Уменьшим количество создаваемых ячеек до 10. Запустим проект посмотреть что вышло.
В ячейке заголовка не видно label из-за того что не влазит высота текста в размер ячейки. Изменим цвет ячейки и увеличим размер.
Сделаем круг из картинки внутри ячейки
Создадим модель (структуру) для отображения в заголовке.
Добавим новый swift файл в проект с названием HeaderModel:
Откроем в HeaderModel.swift создадим структуру с идентичными названием HeaderModel
import UIKit
struct HeaderModel {
let title: String // заголовок
let subtitle: String // подзаголовок
let imageBackgroundColor: UIColor // фон картинки
}
Теперь в CollectionViewController.swift создадим массив из структуры
- выбираем предлагаемый инициализатор кликая на него
- Придумываем тексты и цвет картинки
Можно создавать через запятую сколько угодно моделей, столько сколько нужно секций. В данном примере используем две.
Нам необходимо изменить настройку количества секций и переделать в ячейке конфигурацию с использованием модели.
В CollectionViewController.swift меняем метод numberOfSections
override func numberOfSections(in collectionView: UICollectionView) -> Int {
headreArray.count
}
В CollectionReusableView.swift меняем func configure()
func configure(model: HeaderModel) {
imageView.backgroundColor = model.imageBackgroundColor
titleLabel.text = model.title
subtitleLabel.text = model.subtitle
}
Command + B построим проект, чтобы он понял наши изменения в функциях
В CollectionViewController.swift в viewForSupplementaryElementOfKind. Запустим проект теперь в заголовке мы должны видеть данные которые мы создали.