И разместите их с помощью Swift NSLayoutConstraint

вступление

В этом кратком руководстве мы узнаем, как реализовать очень распространенные компоненты пользовательского интерфейса iOS: UITableView и UICollectionView.

Исходный код готового проекта доступен на GitHub.

Настройка проекта

Во-первых, давайте создадим новый проект Xcode, присвоив ему любое имя.

Теперь удалите файл SceneDelegate.swift и удалите два UISceneSession метода внутри AppDelegate.swift:

Затем удалите файл Main.storyboard.

Теперь нам нужно открыть Info.plist и удалить следующие ключи: Application Scene Manifest и Main storyboard file base name. Наш окончательный файл теперь выглядит так:

И теперь мы готовы приступить к созданию нашего пользовательского интерфейса программно! Приложение будет содержать UITabBarController с двумя вкладками: Таблица и Коллекция.

TabBarController

Нам нужно создать наш UITabBarController и настроить его вкладки следующим образом:

Пока не обращайте внимания на предупреждения компилятора.

AppDelegate

Установите TabBarController как rootViewController из window внутри AppDelegate.swift:

В настоящее время компилятор жалуется на отсутствие таких классов, как TableViewController и CollectionViewController. Поэтому сейчас мы их создадим.

TableViewController

Во-первых, давайте создадим массив из titles, считая от «одного» до «восьми», который мы отобразим в нашем UITableView:

Теперь реализуем реальный UITableView:

Мы пишем tableFooterView = UIView(), чтобы скрыть разделители под tableView. Команда translatesAutoresizingMaskIntoConstraints = false гарантирует, что наши будущие программно созданные ограничения не конфликтуют с автоматически созданными. Фактически, используя эту команду, мы сообщаем нашему tableView, что НЕ автоматически генерирует ограничения на основе его кадра.

Мы реализуем ограничения следующим образом:

overrideUserInterfaceStyle = .light сообщает системе использовать световой режим на iOS 13.

Внутри NSLayoutConstraint.activate мы перечисляем все ограничения tableView. Первое ограничение widthAnchor означает, что мы хотим, чтобы ширина tableView была равна ширине основного view. Второе ограничение выполняет аналогичную задачу, но со свойством height.

Не забудьте вызвать наш новый setupUI() метод внутри viewDidLoad():

Теперь мы создадим наш собственный UITableViewCell, который мы будем повторно использовать в tableView

ТаблицаViewCell

Здесь мы хотим, чтобы UILabel находился в центре contentView ячейки:

Ограничение centerXAnchor центрирует titleLabel по горизонтали внутри contentView. Ограничение centerYAnchor выполняет вертикальное центрирование.

Давайте использовать нашу ячейку внутри tableView!

TableViewController

Сначала зарегистрируйте ячейку и установите delegate = self и datasource = self на tableView. Вот обновленное свойство lazy tableView:

Теперь компилятор будет жаловаться, что в нашем контроллере представления нет UITableViewDataSource методов:

Реализация проста: мы говорим tableView, что количество строк должно быть равно счетчику свойства массива titles (в нашем случае 8), иметь только один раздел и отображать заголовок в соответствии с UITableViewCell.

После успешной реализации UITableView мы готовы создать UICollectionView аналогичным образом!

КоллекцияViewController

Реализация очень похожа. Однако теперь нам нужно предоставить UICollectionViewLayout для нашего collectionView. Внутри метода collectionViewLayout() мы указываем collectionView иметь квадратные ячейки шириной и высотой, равными 20 процентам ширины экрана. Мы используем sectionInset, чтобы разместить отступ в 10 пунктов слева и справа от collectionView.

КоллекцияViewCell

Ячейка также реализована очень аналогично:

Давайте подробнее рассмотрим, как мы устанавливаем ограничения:

Здесь мы размещаем пользовательский интерфейс следующим образом:

  1. Добавьте roundBackgroundView к contentView.
  2. Добавьте titleLabel к roundBackgroundView
  3. Расположите roundBackgroundView со смещением по 5 точек с каждой стороны: сверху, снизу, слева и справа.
  4. По горизонтали и вертикали центрируйте titleLabel внутри roundBackgroundView

Наконец, если мы построим и запустим наше приложение, мы увидим, что наши tableView и collectionView отображаются именно так, как мы хотели:

Мы сделали!

Если вам интересно, как быстрее реализовать UITableView и UICollectionView с помощью RxSwift и RxDataSources, не стесняйтесь проверить мой другой пример, основанный на примерах:



Реализуйте UITableView и UICollectionView с помощью RxDataSources
И почему вы никогда не будете напрямую использовать UITableViewDataSource снова medium.com



Большое спасибо за чтение!