Макет Xib в раскадровке
1. Введение
В этом уроке 9 мы собираемся использовать собственный макет NewsTableViewCell
xib (который мы создали в Урок 7) в нашей раскадровке. Это простой процесс с использованием BFWControls.framework (который мы добавили в Урок 8). Попутно мы также узнаем о классах и подклассах, как изменить суперкласс и соединить розетки.
2. Клонировать проект
Если вы продолжаете с предыдущего Урока 8, то у вас есть все необходимое. Переходите к шагу 3.
Если вы хотите начать с этого урока, вы можете загрузить проект, выполнив следующие действия:
👉 Запустите приложение «Терминал» (из папки «Приложения»).
👉 В Терминале введите: cd ~/Documents
и нажмите Return
.
👉 Вставьте следующее в Терминал и нажмите Return
:
git clone --recurse-submodules --branch Start-Tutorial-9 https://bitbucket.org/barefeetware/lego-tutorial-social.git
👉 Следите за процессом загрузки в Терминале и дождитесь его завершения.
👉 В папке «Документы» откройте папку lego-tutorial-social
.
👉 Откройте файл Social.xcode.proj
.
В этом руководстве предполагается, что вы знаете, как выполнять задачи, уже рассмотренные в этой серии. Если вы не уверены, вернитесь к более подробным инструкциям в предыдущих руководствах.
3. Класс и подкласс
👉 В Xcode выберите Main.storyboard
и прокрутите, чтобы отобразить сцену новостей, содержащую список новостей. Выберите первую ячейку, щелкнув по ней один раз. На панели инспектора справа щелкните третий значок (который выглядит как удостоверение личности). Он показывает Identity Inspector
.
👁 Identity Inspector
показывает, что Class
выбранной ячейки UITableViewCell
.
До сих пор каждый визуальный объект, который мы добавляли в наше приложение, был своего рода «представлением». Представление изображения содержит изображение. Метка содержит текст. Представление стека содержит другие представления. Все они имеют определенные имена. Поскольку они предоставляются встроенной структурой «UIKit», они называются UIView
, UIImageView
, UILabel
, UIStackView
, UITableView
, UITableViewCell
и так далее. Есть еще много других типов представлений, таких как UISwitch
, UISlider
, UISegmentedControl
и UIActivityIndicatorView
, которые мы еще не использовали.
Мы можем рассматривать UIView
как классификацию или «класс» всех более конкретных взглядов. С точки зрения программирования UIView
- это «суперкласс». Все остальные (UILabel
, UIImageView
и т. Д.) Являются «подклассами» UIView
.
Называя подкласс в Swift (язык программирования, который мы используем для разработки iOS), мы обычно копируем суффикс суперкласса. Вот почему UIImageView
и UIStackView
имеют суффикс View
от UIView
. Есть некоторые исключения, например UILabel
(который не имеет имени UILabelView
, хотя он также является подклассом UIView
).
В Уроке 7 мы создали собственный подкласс UITableViewCell
, который мы назвали NewsTableViewCell
.
👉 В поле Class
в Identity Inspector
начните вводить News
(включая верхний регистр N
). Xcode должен автоматически заполняться единственным подклассом UITableViewCell
, который начинается с News
, то есть NewsTableViewCell
.
👉 Ударьте Return
(на клавиатуре).
👁 Мы только что изменили класс ячейки с общего UITableViewCell
на наш собственный подкласс.
4. Класс, использующий свой Xib
Это все хорошо, но визуально ничего не изменилось. В Урок 7, когда мы создавали класс NewsTableViewCell
, мы также создали файл xib, содержащий желаемый макет. Можно ожидать, что этот макет теперь появится в этой ячейке сцены новостей после того, как мы изменили его класс на наш NewsTableViewCell
. Однако этого не произошло. Почему нет?
Оказывается, хотя Xcode предлагал Also create XIB file
(когда мы создавали подкласс NewsTableViewCell
в Учебнике 7), на самом деле он не использует макет этого файла xib. Для этого нам нужен код. К счастью, это одна из вещей, которые BFWControls.framework (который мы добавили в Урок 8) делает за нас.
BFWControls включает подкласс UITableViewCell
под названием NibTableViewCell
, который заботится об использовании макета xib. Чтобы использовать эту функцию в нашем пользовательском классе ячеек, нам просто нужно сделать его подклассом NibTableViewCell
. Мы делаем это в коде этого класса. Не волнуйтесь - это действительно просто.
5. Изменить код
👉 В навигаторе проекта выберите NewsTableViewCell.swift
. Как вы могли догадаться, это файл, содержащий «Swift» код для этого класса.
Во-первых, мы избавимся от кода-заполнителя, который нам не нужен и который на данный момент ничего не делает.
👉 Выделите все строки текста (т. Е. «Код») между начальным {
и закрывающим }
.
👉 Ударьте Delete
(на клавиатуре).
6. Импортировать фреймворк
Нам нужно указать этому файлу кода использовать код в структуре BFWControls, сказав ему «импортировать» его.
👉 Под существующим import UIKit
добавьте строку import BFWControls
.
7. Изменить суперкласс
👁 Как видите, за class NewsTableViewCell
следует двоеточие (:
) и суперкласс UITableViewCell
. Нам нужно изменить суперкласс на NibTableViewCell
, чтобы получить его возможности.
👉 Измените суперкласс на NibTableViewCell
. Вы можете просто изменить UI
на Nib
.
Если бы мы еще не добавили import BFWControls
, Xcode пожаловался бы на Use of undeclared type ‘NibTableViewCell’
, что означает, что он не знает, что такое NibTableViewCell
.
8. IBDesignable
Наконец, нам нужно сообщить Xcode, что мы хотим, чтобы NewsTableViewCell
отображался не только во время выполнения (т. Е. Когда мы запускаем приложение), но и во «время разработки», когда мы просматриваем настраиваемую ячейку в Interface Builder, например, в раскадровка.
👉 Добавьте @IBDesignable
перед class
.
Все сделано. Мы изменили NewsTableViewCell
, чтобы он стал подклассом NibTableViewCell
BFWControls, и попросили Xcode показать его во время разработки в Interface Builder.
9. Показать пользовательский экземпляр ячейки
👉 Вернитесь к файлу Main.storyboard
, выбрав его в навигаторе проекта. Выберите Инспектор атрибутов.
👁 Инспектор атрибутов теперь имеет дополнительный раздел Nib Table View Cell
с Tertiary Text
и другими атрибутами.
🐞 Если инспектор атрибутов показывает пустое содержимое, щелкните пустую часть холста (например, между сценами), а затем снова щелкните верхнюю ячейку элемента новостей, чтобы выбрать ее.
👁 Xcode потребуется несколько секунд, чтобы построить части проекта, необходимые для обновления ячеек с помощью настраиваемого макета.
👁 Выбранная ячейка теперь выглядит по-другому, но она сдавлена.
👉 Перетащите маркер выделения выбранной ячейки вниз так, чтобы высота составляла около 180 точек.
👁 По мере того, как вы перетаскиваете ячейку, чтобы увеличить ее, вы можете увидеть, как появляется настраиваемый макет.
🎉 Вот и все! Раскадровка теперь использует наш настроенный макет xib в ячейках новостей.
10. Инспектор подключений
Теперь у нас есть желаемый макет ячейки, но он показывает только изображения-заполнители и Label
текст. Мы хотим, чтобы он использовал макет из xib, но заполнял его изображением и текстом из этого экземпляра. Нам нужно вернуться к xib и подключить метки и представления изображений к правильным выходам, чтобы код знал, куда поместить текст, подробный текст, изображение и так далее.
👉 Выберите файл NewsTableViewCell.xib
в навигаторе проекта. В структуре документа щелкните один раз на News Table View Cell
. (В качестве альтернативы вы можете щелкнуть пустое место на холсте, а затем один раз щелкнуть край ячейки.)
👉 На правой панели инспектора щелкните крайний правый значок (стрелка в круге), чтобы отобразить Connections Inspector
.
👁 В первом разделе под названием Outlets
показаны все розетки, доступные для подключения в классе NewsTableViewCell
. Поскольку мы еще не добавили никаких выходов в наш NewsTableViewCell
файл кода, весь этот список выходов унаследован от его NibTableViewCell
суперкласса.
11. Подключите розетки
Чтобы наш NewsTableViewCell
знал, где разместить текст, подробный текст и изображение в каждом экземпляре, нам нужно подключить каждый выход к желаемому представлению изображения или метке в макете.
👉 Рядом с textLabel
в крайнем правом углу перетащите левую часть пустого круга на верх Label
.
👉 Аналогичным образом подсоедините detailTextLabel
к нижней части Label
.
👉 Подключите выход imageView
к небольшому верхнему окну изображения.
12. Обновить просмотры
👉 Вернитесь к файлу Main.storyboard
. Если он не обновляется, выберите Refresh All Views
в меню Editor
.
👁 Xcode показывает текст и изображение для этой верхней ячейки в макете, который мы разработали для NewsTableViewCell
.
👉 Давайте попробуем вторую ячейку. Выберите его, щелкнув по нему один раз. Перетащите маркер выделения вниз, чтобы его высота также была около 180 точек.
👁 Вторая ячейка по-прежнему является классом UITableViewCell
по умолчанию. Обратите внимание, что, когда он имеет большую высоту, вид изображения может увеличиваться, чтобы соответствовать изображению.
👉 Если макет первой ячейки выглядит немного запутанным, как вы видите выше, снова выберите Refresh All Views
в меню Editor
. Это несовпадение является только временным, при предварительном просмотре «во время разработки» в Интерфейсном Разработчике. На время выполнения это не влияет.
👉 Не снимая выделения со второй ячейки, в Identity Inspector
измените ее класс на NewsTableViewCell
, как делали раньше.
👁 Обе ячейки теперь имеют NewsTableViewCell
и используют макет из нашего NewsTableViewCell.xib
. Каждая ячейка показывает свой текст и изображение.
13. Заполнители текста
Наша пользовательская ячейка работает хорошо. Каждый экземпляр показывает наш индивидуальный макет и индивидуальный контент в выходах textLabel
, detailTextLabel
и imageView
. Однако, как вы можете видеть, у нас есть второе представление изображения и третья текстовая метка, которые в настоящее время просто показывают изображение-заполнитель и Label
текст. Нам нужно подключить для них выходы, чтобы мы могли назначать им контент.
Суперкласс NibTableViewCell
уже включает третий выход текстовой метки, называемый tertiaryTextLabel
. Все, что нам нужно сделать, это подключить его к нашему xib, как мы делали раньше для textLabel
и detailTextLabel
.
👉 Выберите файл NewsTableViewCell.xib
в навигаторе проекта.
Все три метки имеют замещающий текст Label
, что немного затрудняет их идентификацию с первого взгляда. Во-первых, давайте изменим текст-заполнитель для каждого.
👉 Дважды щелкните по очереди на каждой из трех меток, чтобы выбрать ее содержимое. Измените верхний на [Text]
, нижний на [Detail Text]
и средний на [Tertiary Text]
. Не забудьте включить открывающий [
и закрывающий ]
в каждом.
👉 На холсте выберите контейнер внешней ячейки. Выберите Connections Inspector
на правой панели инспектора. Соедините розетку tertiaryTextLabel
со средней текстовой меткой с помощью заполнителя [Tertiary Text]
.
👉 Снова выберите Main.storyboard
.
👁 Обратите внимание, что заполнитель Label
для третичной метки был заменен в каждом экземпляре ячейки на [Tertiary Text]
.
👉 Запустите приложение.
👁 Обратите внимание, что текст-заполнитель удаляется во время выполнения. Суперкласс NibTableViewCell
автоматически удаляет текст заполнителя, если он начинается и заканчивается квадратными скобками (например, [
и ]
).
14. Третичный текст
Класс UITableViewCell
включает textLabel
и detailTextLabel
, которые NibTableViewCell
«переопределяют». Вот почему наш NewsTableViewCell
автоматически использовал текст заголовка и подробный текст подзаголовка из исходных ячеек раскадровки. Однако эта третья текстовая метка с именем tertiaryTextLabel
не существует в суперклассе UITableViewCell
. Нам нужен другой способ предоставить текст для него. NibTableViewCell
делает это, предлагая атрибут Tertiary Text
.
👉 Вернитесь к Xcode. Выберите первую ячейку в новостях. Выберите Инспектор атрибутов.
👉 В поле Tertiary Text
инспектора атрибутов введите дату выборки: October 9, 12:32pm
👁 После того, как вы нажмете Return
, вы увидите, что текст даты отображается в третичной текстовой метке.
👉 Аналогичным образом выберите вторую ячейку и введите Tertiary Text
как: October 10, 2:13pm
15. Подтвердить изменения
Как вы это делали раньше:
- 👉 Выберите
Commit Changes
в менюSource Control
. - 👉 Введите описание, например:
NewsTableViewCell: changed to a subclass of NibTableViewCell. Added placeholder text. Connected outlets.
- 👉 Нажмите кнопку
Commit
.
16. Резюме
Наш NewsTableViewCell
объединяет макет из файла xib с текстом и изображением для каждого экземпляра из раскадровки.
⁉️ Если у вас есть какие-либо вопросы или комментарии, пожалуйста, добавьте ответ ниже.
На втором изображении все еще отображается изображение-заполнитель. Затем, в Урок 10, мы создадим нашу собственную розетку и атрибуты, чтобы мы могли настроить это изображение детали.