Как создать собственное представление из XIB с помощью Swift
Часто проще всего создать собственное представление в файле XIB, где вы можете визуализировать, разметить и отредактировать внешний вид того, что вы пытаетесь создать.
Перенести эти представления из XIB на экран вашего приложения сложнее, чем кажется, учитывая, насколько распространен этот шаблон в разработке для iOS.
Ниже приводится очень простой учебник, который иллюстрирует всю процедуру.
Создание нового проекта приложения с единым представлением
2. Создайте файл XIB.
Щелкните правой кнопкой мыши ту часть экрана, где находятся файлы вашего проекта (контроллер представления, раскадровка и т. Д.), И выберите new file
.
Xcode предложит вам, для какого типа файла вы хотите создать. Выберите параметр View
в меню пользовательского интерфейса. В следующем всплывающем окне вам будет предложено назвать свой XIB - мы назвали наш TestView
.
3. Создайте свое представление в Интерфейсном Разработчике
Мы вставили UILabel и ограничили его центром экрана. Возможно, вам захочется чего-то более активного.
Мы также сделали цвет фона розовым, чтобы его было легче увидеть, когда мы в конечном итоге запустим приложение. Возможно, вы захотите принять другие дизайнерские решения.
Если вы хотите изменить форму XIB, щелкните attributes inspector
в верхнем правом углу и измените размер на freeform
.
Это позволит вам щелкнуть изображение и изменить форму по своему усмотрению. Форма, которую вы выбираете, на самом деле не имеет значения, как вы увидите к концу этого руководства, но вы можете сделать XIB более или менее такой же формы, какой вы ее представляете в своем приложении, чтобы помочь с компоновкой вашего элементы.
4. Создайте собственный файл UIView.
Теперь, когда у нас есть XIB, нам нужно создать собственный класс UIView, который будет им управлять.
Щелкните правой кнопкой мыши там, где находятся все ваши файлы, и выберите new file
(снова), но на этот раз выберите Cocoa Touch Class
в меню Source
.
Когда вам будет предложено назвать новый файл, убедитесь, что вы сделали его подклассом UIView
. Xcode может по умолчанию использовать другой класс Какао.
В этом руководстве мы также назвали этот файл TestView
, так как он будет связан с TestView
XIB, который мы только что создали.
5. Переопределите оба инициализатора UIView.
Здесь все становится немного сложнее. UIViews можно создавать двумя способами - в построителе интерфейса (например, в раскадровке или XIB) или непосредственно в коде.
Для каждого из этих методов создания существует инициализатор, и нам нужно переопределить их оба с помощью нашего собственного настраиваемого инициализатора.
Когда вы создаете свой собственный UIView, вы увидите пустой файл с некоторыми комментариями, добавленными Apple, намекая на то, что нам нужно делать.
Удалите комментарии и введите следующее:
Мы просто переопределили оба инициализатора UIView и вызвали наш инициализатор с именем commonInit
(вы можете называть его как хотите). К сожалению, наш инициализатор пока ничего не делает. Мы доберемся туда через секунду.
6. Добавьте UIView в качестве владельца файла XIB.
Мы почти там. Теперь у нас есть файл XIB и пользовательский UIView. Нам просто нужно соединить их.
Вернитесь в свой XIB-файл и выберите File’s Owner
в разделе заполнителя. Затем в правой части экрана в поле Identity Inspector
введите имя файла UIView (TestView
) как Class
. Это должно быть автозаполнение - в противном случае вы, вероятно, сделали что-то неправильно.
7. Добавить весь вид как выход IB в файл UIView
Теперь, когда вы добавили пользовательский интерфейс UIView в качестве владельца файла, вы сможете нажать кнопку assistant editor
в правом верхнем углу и загрузить представление рядом с XIB.
Ctrl-drag
весь вид в качестве выхода для вашего файла просмотра. Вы можете называть его как хотите, но это хорошая привычка называть его contentView
.
Вы также можете перетащить любые другие элементы как IBOutlets. В данном случае все, что у нас есть, это наш лейбл, поэтому мы его тоже перетащили. Наш файл представления теперь выглядит так:
8. Загрузите XIB в общий инициализатор
Введите в commonInit
следующие четыре строки кода:
В первой строке мы загрузили XIB по имени из памяти. Если вы назвали свой XIB-файл как-то иначе, вам нужно будет изменить строку TestView
в функции loadNibNamed
.
В следующей строке мы добавили представление содержимого, которое мы перетащили в качестве выхода, как подпредставление созданного представления.
В следующих двух строках мы расположили представление содержимого так, чтобы оно занимало внешний вид всего представления. Есть множество способов добиться этого, и это, вероятно, не лучший шаблон, но он быстрый и простой, и всего две строчки кода.
9. Используйте свое мнение
Были сделаны! Теперь у нас есть настраиваемое представление, созданное из файла XIB, которое мы можем использовать в нашем проекте. Посмотрим, как это выглядит.
Щелкните файл раскадровки и перетащите его в UIView. Щелкните identity inspector
в правом верхнем углу и измените класс на TestView
(или как вы назвали свой UIView).
Вы можете разместить его в любом месте экрана. Мы ограничили его центром экрана и сделали так, чтобы он занимал 50% ширины и 50% высоты - просто для демонстрационных целей.
Снова откройте свой помощник редактора. На этот раз он должен открыться в вашем файле контроллера представления. Перетащите TestView
как IBOutlet. Теперь ваш контроллер представления должен выглядеть так:
И последнее - помните этот ярлык с нашей точки зрения? Давайте изменим текст. Я собираюсь использовать любимое приветствие моего старого босса:
Вот и все. Запустим проект!
Вот и все - приложение, которое имитирует жизнь в фронт-офисе НБА.
Помните, когда вы настраивали XIB, я сказал, что размер на самом деле не имеет значения? Вот почему. XIB будет занимать размер этого представления - независимо от того, большой он или маленький, или какую бы форму вы его придумали в своей раскадровке (или коде). Все, что действительно имеет значение, - это то, как вы ограничили все элементы в своем XIB.
Вы можете использовать это представление во всем приложении. Если вы хотите вернуться и изменить внешний вид, вы можете просто изменить его в своем файле XIB, и все эти изменения будут распространяться по всему приложению.
Вопросы или комментарии? Дайте мне знать! Для всех, кто интересуется инвестированием, пожалуйста, ознакомьтесь с Stock Genius, новым приложением для отслеживания акций, которое я разработал и показывает цены в реальном времени прямо с биржи (и множество пользовательских представлений, созданных из xibs!).