Руководство по программированию на iOS

Как работать с UITableView

Когда вам нужно представить данные в виде таблицы, TableViews - ваш лучший друг.

Табличные представления довольно полезны и используются в большинстве приложений, если не во всех. Если вам нужно отображать данные в непрерывно структурированном виде, то разработчики предпочитают формат table life. Мы собираемся создать небольшое приложение для задач, которое запрашивает у пользователя название задачи, а затем добавляет их в таблицу. Чтобы следовать за мной, необходимы базовые знания Swift языка и редактора Xcode. Я собираюсь разбить это на пять разделов.

  1. Дизайн пользовательского интерфейса
  2. Добавить проверку пользовательского интерфейса
  3. Добавить задачу
  4. Удалить задачу
  5. Редактировать задачу

Возьмите кофе или чай, если хотите, я никуда не пойду, обещаю. Готовый? Давайте начнем.

Откройте Xcode ›Создайте новый проект Xcode› Приложение для единого просмотра ›Далее. Если оно уже открыто и не отображается на экране окна, нажмите Command + Shift + 1.

Разработка пользовательского интерфейса

Щелкните Далее ›Создать, затем в Навигаторе проекта щелкните Main.storyboard.

Выберите вид, затем нажмите Command + удалить. Нажмите Command + Shift + L, затем введите tableview, затем перетащите контроллер табличного представления в основную область. Выберите только что добавленное представление, затем в инспекторе атрибутов установите флажок «Является исходным контроллером представления».

Снова выберите представление, щелкните Редактор ›Встроить› Контроллер навигации. Нажмите Command + Shift + L, затем введите «uibar» и перетащите элемент кнопки панели в правый верхний угол представления. Нажмите кнопку, затем найдите Системный элемент в инспекторе атрибутов и выберите Добавить в раскрывающемся меню.

Выберите файл ViewController.swift в навигаторе проекта, затем нажмите Command + delete. Вы можете удалить его навсегда, так как мы больше не будем им пользоваться. Нам нужно создать новый файл, в котором мы будем выполнять кодирование. Нажмите Command + N, затем выберите Класс касания какао и нажмите Далее. Выберите UITableViewController для подкласса, затем введите MyToDoTableViewController в качестве имени класса. Язык уже должен быть установлен на Swift. В противном случае выберите Swift в раскрывающемся меню.

Нажмите «Далее», затем «Создать». Теперь нам нужно связать только что созданный файл с представлением. Щелкните Main.storyboard, затем выберите представление таблицы. В Инспекторе идентичности установите для класса значение MyToDoTableViewController, а для идентификатора раскадровки и идентификатора восстановления выберите «myToDoView».

Нажмите кнопку «Добавить редактор справа». Если вы не знаете, где его найти, он находится в правом верхнем углу и выглядит как крошечная папка со стрелкой, указывающей вправо. Во втором редакторе посмотрите вверху. Вы должны увидеть структуру каталогов. Перейдите в myToDoList ›MyToDoTableViewController.swift

Нажмите кнопку «Добавить» на панели навигации в левом редакторе, затем, удерживая нажатой клавишу «Command», начните перетаскивать мышь в сторону редактора справа. Вы должны увидеть стрелочный индикатор.

Отпустите мышь, и вы увидите всплывающее меню. Для подключения уже должно быть установлено значение Действие, задайте имя addItemToList.

Щелкните Connet, чтобы добавить действие. Новое имя метода addItemToList должно быть добавлено в ваш файл MyToDoTableViewController.swift. Должно получиться вот так.

Давайте создадим (Command + B) и запустим (Command + R), чтобы убедиться, что все работает. Приложение должно запуститься, и вы должны это увидеть.

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

Добавление проверки пользовательского интерфейса

Здесь мы сделаем две вещи. Мы создадим форму ввода с помощью UIAlertController и добавим текстовое поле для захвата вводимых пользователем данных. Нам также понадобится переменная текстового поля, чтобы связать переменную в окне предупреждения, чтобы получить и проверить значение.

Нам не нужна жесткая проверка. Все, что нам нужно сделать, это убедиться, что в текстовом поле есть значение. Наш ввод будет иметь одно текстовое поле и три кнопки (Отмена, Далее и Готово). Отмена закрывает всплывающее окно, Далее повторно отображает всплывающее окно, если было введено допустимое значение, а Готово также закрывает всплывающее окно, если было введено допустимое значение. Далее и Готово повторно отображают форму с сообщением об ошибке, если введено недопустимое значение.

Если это звучит немного запутанно, не волнуйтесь. Я добавлю комментарии, чтобы объяснить, что делается. Когда мы напишем код, он станет совершенно понятным. Готово ????? Вот оно.

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

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

Добавление задачи в TableView

При работе с tableview все, что нужно, - это UITableViewCell. Вы можете создать свою ячейку и настроить ее по своему вкусу. Но для краткости мы будем использовать предоставленный по умолчанию. Есть одна вещь, которую нужно сделать, прежде чем мы сможем ее использовать. Нам нужно установить идентификатор. Идентификатор - это уникальный идентификатор, используемый для каждой повторно используемой ячейки. Например, если вы хотите отобразить другую ячейку, когда число нечетное или четное, вы можете просто иметь две разные ячейки и легко менять их местами. Но у них должны быть разные идентификаторы, иначе это не сработает. Для получения дополнительной информации посетите документацию Apple.

Давай установим это сейчас. Выберите представление таблицы, затем в инспекторе атрибутов установите значение идентификатора на myToDoTask. Это все.

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

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

Удаление задачи в TableView

Удаление очень похоже на добавление. Мы воспользуемся методом делегата и добавим туда наш код.

Это весь код, необходимый для удаления записи. Мы сохраняем только данные в нашей коллекции, поэтому они не будут сохранены в локальном хранилище.

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

Редактирование задачи в табличном представлении

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

При сборке и запуске вы должны иметь возможность добавлять / удалять / редактировать задачи в табличном представлении. Уууууу. Мы сделали это. Спасибо, что зашли так далеко со мной. Надеюсь, вам было весело. Теперь, когда вы знаете, как работать с табличными представлениями, попробуйте создать собственный UITableViewCell.