Макет 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. Подтвердить изменения

Как вы это делали раньше:

  1. 👉 Выберите Commit Changes в меню Source Control.
  2. 👉 Введите описание, например: NewsTableViewCell: changed to a subclass of NibTableViewCell. Added placeholder text. Connected outlets.
  3. 👉 Нажмите кнопку Commit.

16. Резюме

Наш NewsTableViewCell объединяет макет из файла xib с текстом и изображением для каждого экземпляра из раскадровки.

⁉️ Если у вас есть какие-либо вопросы или комментарии, пожалуйста, добавьте ответ ниже.

На втором изображении все еще отображается изображение-заполнитель. Затем, в Урок 10, мы создадим нашу собственную розетку и атрибуты, чтобы мы могли настроить это изображение детали.