Реализуйте гибкий пользовательский интерфейс с помощью UITableView.

Вы когда-нибудь реализовывали некоторые экраны, как показано ниже?

Что вы делаете с таким интерфейсом?
Мое решение может быть хорошей практикой для пользовательских интерфейсов, у которых есть некоторые моменты:

Длинный экран (с возможностью прокрутки)
Форма (прокручивается при включенной/выключенной клавиатуре)
Нужно добавлять/удалять элементы во время выполнения

Мы делим все на множество UITableViewCell. И в cellForRows:atIndexPath мы возвращаем ячейки.
Например:

Мы разделим этот экран на разные части.

Ячейка заголовка: метка заголовка и подзаголовка
Ячейка электронной почты
Ячейка пароля
Имя ячейки
Гендерная ячейка
Кнопочная ячейка

у меня есть класс knStaticListController заворачивать обычные вещи.

Я использую автоматический макет программно с моим собственным расширением KNConstraints. Вы можете проверить мой пост об автоматическом макете программно здесь и выбрать другой способ использования автоматического макета по коду с этим постом.

Все эти файлы добавляются в стартовый проект. Скачать здесь

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

1. Сделайте заголовок ячейки


  func makeTitleCell() -> knTableCell {
        let titleLabel = UIMaker.makeLabel(text: "Golf App",
                                           font: UIFont.boldSystemFont(ofSize: 22),
                                           color: .white,
                                           numberOfLines: 0,
                                           alignment: .center)
        return knTableCell.wrap(view: titleLabel,
                                space: UIEdgeInsets(top: 16, left: 16, bottom: 44, right: 16))
    }

makeLabel мой быстрый способ создать UILabel с форматом. Вы можете проверить другую функцию для создания популярных элементов управления в UIMaker.

knTableCell.wrap: встроить вид в UIView.

Вы должны установить 4 стороны (верхняя, левая, нижняя, правая) UILabel. Так что размер ячейки может автоматически изменяться в зависимости от UILabel. Или вы можете установить для ячейки фиксированную высоту (например, 82 пикселя).

Помните, что нижний интервал составляет 44 пикселя, я объясню вам в следующей части.

ОЧЕНЬ ВАЖНОЕ ПРИМЕЧАНИЕ

Вы должны убедиться, что каждая ячейка может изменять размер автоматически. В противном случае ваш макет может быть нарушен в этой ячейке.

2. Сделать ячейку текстового поля


  func makeTextFieldCell(placeholder: String) -> knTableCell {
        let textField = UIMaker.makeTextField(placeholder: placeholder,
                                              font: UIFont.systemFont(ofSize: 14),
                                              color: .white,
                                              alignment: .left)
        textField.backgroundColor = UIColor.black.withAlphaComponent(0.5)
        textField.height(48)
        return knTableCell.wrap(view: textField,
                                space: UIEdgeInsets(left: 16, bottom: 16, right: 16))
    }

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

Я использую фиксированную высоту для ячейки текстового поля. Убедитесь, что каждая ячейка может вычислить свой размер.

Эта ячейка имеет верхний интервал 0px, а нижний интервал 16px. Почему?

Поскольку ячейка заголовка имеет нижний интервал 44 пикселя. Если я добавлю 16 пикселей вверху к ячейке текстового поля, расстояние между текстовым полем заголовка и имени составит 60 пикселей. И я хочу увеличить/уменьшить интервал, какой из них я должен изменить? Запутаешься за тот и в следующем году, когда захочешь поменять интервал, не помнишь где менять.

ПРИМЕЧАНИЕ

Установите только вертикальный интервал внизу для всех пользовательских интерфейсов, всех проектов.

3. Добавьте ячейки в UITableView


  override func setupView() {
        tableView.backgroundColor = UIColor.green.withAlphaComponent(0.8)
        view.addSubviews(views: tableView)
        tableView.fill(toView: view)
        
        datasource = [
            makeTitleCell(),
            makeTextFieldCell(placeholder: "Email"),
            makeTextFieldCell(placeholder: "Password")
        ]
    }

Запустите и посмотрите, как это работает. Моя обертка сделает все за вас, вам больше не нужно об этом заботиться.

Пользовательский интерфейс не великолепен, поэтому я не хочу показывать здесь